Create pretty link previews with meta tags
Jon Smoley
ยท
Senior Software Engineer
Published on Tuesday December 10, 2024
Nobody likes a boring hyperlink, especially one that's long and filled with alphanumeric gibberish. Link previews on the other hand tell readers what content is in your link, and increase engagement. But how do we tell apps and websites to create previews of our gorgeous websites?
The Open Graph Protocol lets you define metadata about your website that apps and other websites can read from to create visual link previews. The available fields evolve over time, but most websites use them for images, titles, and descriptions.
The short and sweet
For most use cases, apps and websites only need these fields to create previews. Add these fields to your <head> tag.
1<head>
2 <!-- Show a thumbnail image next to your link -->
3 <meta property="og:image" content="">
4
5 <!-- The link of your link! Who knew -->
6 <meta property="og:url" content="">
7
8 <!-- The main title of your link -->
9 <meta property="og:title" content="">
10
11 <!-- Content description, used by accessibility tools -->
12 <meta property="og:description" content="">
13
14 <!-- The type of content. video, music, article, etc -->
15 <meta property="og:type" content="">
16
17 <!-- The language of your content -->
18 <meta property="og:locale" content="">
19</head>And that's it! Once you deploy your changes you'll start seeing link previews like these:
Android
iMessage
Note: iMessage currently does not read og:description
Discord
Signal
Note: Signal will not use images for previews if the url for that image does not begin with https. The first message here uses http, and the second uses https.
Note: LinkedIn will not show a description if an image is found. If you're curious how linkedin will display your link, you can use their post inspector tool.
Commonly used Open Graph tags
og:description
Description of your content. Used by accessibility tools
1<meta
2 property="og:description"
3 content="Use OpenGraph Meta tags to create professional looking links"
4>og:image
Shows a thumbnail image to display next to your content. While you can have multiple og:image meta tags, it is recommended to only use one. Some websites will add pagination arrows on your thumbnail to see the different images, but most websites do not support this.
1<meta
2 property="og:image"
3 content="https://smoleycodes.com/blog/prettyLinkPreviews//blog/prettyLinkPreviews/hero.png"
4>og:locale
Most websites (like Facebook) support declaring a locale (like en_US) where the first two letters are a language code, and last two are a country code.
1<meta
2 property="og:locale"
3 content="en_US"
4>og:title
Very similar to the <title> tag, this puts the title in the same spot as other open graph tags. It is recommended to have both on your website.
1<meta
2 property="og:title"
3 content="Create pretty link previews with meta tags">
4>og:type
Specifies the type of content on the page. At the time of writing this article, there are types for music, videos, articles, books, profiles, and websites. This list will grow as the community agrees on the schema for more types.
1<meta
2 property="og:type"
3 content="article"
4>og:url
The URL where your content can be found. While this might seem redundant, this helps other tools with not making duplicate records of your content.
1<meta
2 property="og:url"
3 content="https://smoleycodes.com/blog/pretty-link-previews"
4>