How to Use Open Graph Meta Tags for Facebook Sharing
Open Graph is a technology introduced by Facebook in 2010 that enables integration between Facebook, user data and website. Facebook ‘scrapes’ the URL you are sharing and gets the information it displays from meta tags within the <head> section of the page.
With an amalgamation of Open Graph Meta tags in your page’s content, you can determine what parts of your page you want to show when someone shares your page. The tags will have an effect on conversions and click through rates massively.
MOST IMPORTANT META TAGS:
1. og:title The title of the content you are sharing.
Example: <meta property=”og:title” content=”Product Engineering | Digital Transformation | TO THE NEW ” />
NOTE: There is no limit on the number of characters, but it’s best to remain between 60 and 90. Also, if your title is longer than a hundred characters then Facebook will truncate it to 88 i.e only 88 characters are visible in open graph and on click a person can see the whole title.
2. og:description It is few lines of description of the content that usually appears below the link title on Facebook.
Example: <meta property=”og:description” content=”A digital technology company that drives digital transformation and builds disruptive products by leveraging UX, cutting edge technologies and cloud ” />
NOTE: There is no restriction on the number of characters, however, it’s best to use around 200 characters.
3. og:image It is the image that represents your content within the graph when it gets shared.
Example: <meta name=”og:image” content=”http://tothenew.com /image-name.jpg” />
Note:
- og:image property is useful if your page has several images and you want a specific image with your content.
- The image should not be smaller than 300px *200px and also the recommended resolution for an og:image is 1200px * 627px.
- If og:image is not set then Facebook will show anything stupid like unwanted content or ad banner scraped from the page, or nothing. We positively don’t need that!
- You can also change image attributes by adding below meta tagsog:image:typeog:image:widthog:image:height
- The image which is employed in og:image can be totally different what you’ve got on your page.
4. og:type This is the type of object or page which you are sharing such as video, blog post, website etc. Also, depending on the type you specify, you may have to add more properties.
Example: <meta property=”og:type” content=”website” />
Note: This tag is very important when your page has a ‘Like’ button and represents a true life object (like a book ). If you don’t outline any type, Facebook will browse it as “website” by default.
For Example If you define <meta property=”og:type” content=”business” /> then alternate properties like business type , name etc. are also required.
5. og:url The canonical URL of the content or page you are sharing.
Example: <meta property=”og:url” content=”http://www.yourdomain.com” />
Note: This tag is useful when you have more than one URL for the same content.
6. og:locale This defines the language of the content. It is in the format language_TERRITORY.
Example: <meta property=”og:url” content=”en_US” />
Note: By default it is en_US and it is not needed unless the language is not English or it is outside the United States.
ADDITIONAL META TAGS:
- og:site_name If the content is an element of a large website, then the name should be displayed for the website.
Example: <meta property=”og:site_name” content=” allmovie” />
- og:video It is the URL of a video file that enhances the content.
Example: <meta property=”og:video” content=”https://www.youtube.com/watch?v=3UMTtLlpaus” />
- og:audio It is the URL of an audio file to accompany with your content.
Example: <meta property=”og:audio” content=” http://your_audio.mp3” />
- og:locale:alternate It is an array of alternative locale where this page or content is available.
Example: <meta property=”og:audio” content=” http://your_audio.mp3”
SAMPLE SCENARIO GIVEN BELOW :
og:title <meta property=”og:title” content=”Product Engineering | Digital Transformation | TO THE NEW ” />
og:description <meta property=”og:description” content=”A digital technology company that drives digital transformation and builds disruptive products by leveraging UX,cutting edge technologies and cloud ” />
og:image Not set
og:type Not set
og:locale <meta property=”og:url” content=”en_US” />
As og:image is not set for the http://www.tothenew.com page that’s why it contains arrow (Refer highlighted section in above image) in the open graph with multiple images scraped from the page.
FACEBOOK DEBUGGER:
An Open graph debugger named Facebook Debugger https://developers.facebook.com/tools/debug/ offered by Facebook enables developers to check their page and verify how it will look once shared on Facebook. By using this tool you can verify if your Open Graph is correctly detected or not and it also gives you suggestions and warning to repair what went wrong.
So from next time, to share your content or your website page on Facebook, add open graph meta tags in your page’s HTML.
I hope you find this blog useful.
