Add Open Graph tags for link previews

Why it matters

Open Graph tags decide the title, text and image shown when someone shares your link on social networks and in chat apps. Without them each service guesses and the preview is often blank or ugly.

The fix

1. Add the four basic Open Graph tags (og:title, og:type, og:image, og:url) and og:description to the head of the homepage. Use absolute https addresses.
2. Use an image of about 1200 by 630 pixels, in a common format such as JPEG or PNG, that works when cropped.
3. Test the preview with the debugger of the network you care about, for example the Facebook Sharing Debugger or LinkedIn Post Inspector, which also refresh their cache.

<meta property="og:title" content="Handmade oak furniture | Example company">
<meta property="og:description" content="Handmade oak tables and chairs, built to order and delivered across Europe.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/img/share-1200x630.jpg">

The examples use example.com. Replace it with your own domain.

Read the documentation ↗(opens in a new tab)

Related

• Reported by the SEO basics check
• Add a title to the homepage
• Add a meta description to the homepage
• Add a canonical link to the homepage
• Fix the canonical link on the homepage
• Point the canonical link at your own domain
• Complete the Open Graph tags
• Add a viewport meta tag