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.
What if I include several links in a post, do I get several previews?
No. You only get a preview for the first link you included. The other links will work but there won’t be previews for them.
Should I rely entirely on the preview to describe my links?
No. You should also describe your links in the body of your post, because some people may not see the preview. Some apps or interfaces don’t show previews, and occasionally previews fail to render even on apps and interfaces that do show them.
Is there any way to disable previews, either when reading or writing posts?
No, but such options have been suggested. If you are comfortable using Github, you can vote for these features to be added to Mastodon by giving a thumbs up in this issue ⧉.
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.