Open Graph meta tags
Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.
They’re part of Facebook’s Open Graph protocol and are also used by other social media sites, including LinkedIn and Twitter (if Twitter Cards are absent).
You can find them in the <head> section of a webpage. Any tags with og: before a property name are Open Graph tags.
Here are some examples :
"How to Become an SEO Expert (8 Steps)" /> <meta property="og:description" content="Get from SEO newbie to SEO pro in 8 simple steps." /> <meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2019/12/fb-how-to-become-an-seo-expert.png" />
Facebook lists 17 OG tags in their official documentation, plus dozens of object types. We’re not going to discuss all of these. Only four are required for Facebook to understand the basics of your page, and there are a couple of others that sometimes help.
Let’s go through these.
og:title
The title of your page.
Syntax
<meta property="og:title" content="Open Graph Meta Tags: Everything You Need to Know" />
Best practices
og:url
The URL of the content.
Syntax
<meta property="og:url" content="https://ahrefs.com/blog/open-graph-meta-tags/" />
og:image
The URL of an image for the social snippet.
Note that this is perhaps the most essential Open Graph tag because it occupies the most social feed real estate.
Syntax
<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />
Best practices
og:type
The type of object you’re sharing. (e.g., article, website, etc.)
Syntax
<meta property="og:type" content="article" />
og:description
A brief description of the content.
Syntax
<meta property="og:description" content="Learn about 13 features that set Ahrefs apart from the competition." />
Best practices
og:locale
Defines the content language.
Syntax
<meta property="og:locale" content="en_GB" />
Best practices
<!-- MS, fb & Whatsapp -->
<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">
<!-- fb & Whatsapp -->
<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="Example">
<meta property="og:title" content="Example">
<meta property="og:description" content="Example">
<!-- Image to display -->
<!-- Replace «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">
<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">
<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">
Note: Image resolution is 256 x 256.
