Link previews are little boxes of information about a website link, often including an image and short text description, which appear below a post that includes that link.
To make a preview appear in your post, just include the link in the post. You don’t need to do anything else, because the link’s preview will be automatically generated.
Why doesn’t the preview appear when I include a link?
It may take some time for the preview to appear as it’s your server which does the generation, and it may have a queue of other tasks to deal with first. If you go back to the post later, the preview should be visible.
Why do previews sometimes look different on different servers?
At a technical level, previews are generated by the server of the person viewing a post, so people from different servers may see slightly different previews, depending on which version of Mastodon (or other Fediverse software) their server is running.
Why do some previews have pictures while others are just text?
Previews are generated based on the settings of the website being linked to. If the website doesn’t have any settings for preview images, the previews in links to that site will just be text.
I run a website, how do I add settings for preview images and descriptions?
Mastodon uses Open Graph information to generate previews. Website owners can include Open Graph code to provide information about their site.
Here are some examples taken from the Wikipedia article on the Open Graph Protocol, you can put them in the header of your site:
<meta property="og:title" content="Example title of article">
<meta property="og:site_name" content="example.com website">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/example-title-of-article">
<meta property="og:image" content="http://example.com/article_thumbnail.jpg">
<meta property="og:image" content="http://example.com/website_logo.png">
<meta property="og:description" content="This example article is an example of OpenGraph protocol.">You don’t need to include all these tags, just the ones you want to include info about. For example if you want images in your preview, you should include the image tag with a link to the image you want to appear on a preview.