Link previews are implemented on many chat/messaging clients and social media sites. Essentially when you post a link, a little preview of the link will appear in your post that often contains a title, image, and description.
Using Link Previews
Using link previews is pretty easy.
As a demo, copy and paste the URL below into a chat or social-media that supports link previews:
https://artmenagerie.app
You should see the title, description, and image appear in your chat or social-media.
Try it with a URL from your own website! Most, if not all, pages generated by Art Menagerie should support link previews.
Troubleshooting
If you are having issues with link previews, check the following:
- Ensure your website is public
- Make sure the Canonical URL under Site Settings is set correctly to the base URL of your website. For example,
https://artmenagerie.app - Check that your post has text in the body. To show an image, a post needs to either have an image attached to itself, or it needs to show another post's image in the body; for example,
Not all chat clients or social-media will show link previews, or support the same features for link previews.
How it Works
Art Menagerie implements the Open Graph protocol, which is supported by many chat/messaging clients and social-media.
The Open Graph protocol defines a set of standard set of <meta> tags that go in the <head> section of an HTML page.
If you use your browser's feature to View Source of https://artmenagerie.app you can see these <meta> tags. At time of writing, this is what it looks like:
<meta property="og:title" content="Art Menagerie">
<meta property="og:site_name" content="Art Menagerie">
<meta property="og:type" content="website">
<meta name="description" content=" Welcome to the Art Menagerie, a tool to build your own webspace! No AI, no tracking, no ads, no 3rd-party moderation ! Art Menagerie is a cross between a content management system (CMS) (e.g. Wordpress, Drupal, etc.) and a static site generator (SSG) (e.g. Jekyll, Hugo, etc.) Run the GUI on your own…">
<meta property="og:description" content=" Welcome to the Art Menagerie, a tool to build your own webspace! No AI, no tracking, no ads, no 3rd-party moderation ! Art Menagerie is a cross between a content management system (CMS) (e.g. Wordpress, Drupal, etc.) and a static site generator (SSG) (e.g. Jekyll, Hugo, etc.) Run the GUI on your own…">
<meta property="og:image" content="https://artmenagerie.app/-/P5CTHYBGF2AVVV2-med.webp">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="360">
<meta property="og:image:alt" content="A pre-alpha release screenshot of Art Menagerie is on the left and Argentarius painted as a tigress is on the right. Orange text says "Website Builder" and the URL https://artmenagerie.app">
<meta property="twitter:card" content="summary_large_image">
An explanation of the <meta> tags:
property="og:title"contains the page/post/feed titleproperty="og:site_name"is the site name set under Site Settingsproperty="og:type"describes the type of item on the page, typically this iswebsitename="description"&property="og:description"are a short description/summary of the page. Art Menagerie takes text from the body to populate these automatically for you up to a certain character limit. Thename="description"is typically used by search engines whileog:descriptionis used for link-previewsproperty="og:image"provides a full URL to an image to display with the link preview. This is one of the reasons why it is important to set the Canonical URL under Site Settings to the base URL of your website for link previews to work correctlyproperty="og:image:width"the width of the image in pixelsproperty="og:image:height"the height of the image in pixelsproperty="og:image:alt"alternative text for the image to help people with disabilities understand the contents of the imageproperty="twitter:card"comes from a different standard that predates the Open Graph protocol but is still supported by many clients. This is set to tell the client to show a large image (if supported)