Member-only story
Making websites sharable on social media
A guide on how to include open graph tags to your website, and a svelte template to do so.
When sharing URL content on social media, we are often presented with a well-formatted card giving us information about the page shared. This is not the case if using personal websites. This article looks at how we can correctly format our site metadata to produce effective sharable links.
Open Graph
The protocol for sharing content from a web page is the ‘Open Graph’. This constitutes a set of metadata tags which provide structured, rich information about the content of the page. Whist there are 17 tags in the official documentation, there is only a handful we need to ensure we include. These are outlined below:
Title
The main tag that we want is a description of the content. For legibility, we recommend a title length of less than 60 characters.
<meta property="og:title" content="Open Graph Meta Tags: What are they" />URL
Where does clicking the sharable card direct the user?
<meta property="og:url" content="https://mywebsite.com/link" />Image
The image that is embedded on the website. It is suggested to use a logo, or branded image with a 1.91:1 ratio. Minimum dimensions should be 1200 x 630 for clarity across different device types.
<meta property="og:image" content="https://url.com/image.jpg" />Description
2 to 4 sentences describing the content of the shared link/page.
<meta property="og:description" content="A quick summary here" />Link Type
Generally, this will be of the type ‘article’ or ‘website’
<meta property="og:type" content="article" />Locale
Some information on the language and content of the article.
<meta property="og:locale" content="en_GB" />
