Content is king. However, without social-media sharing and distribution channels that facilitate sharing, even the best content will fail to get noticed.
If you want to maximize your reach on social media platforms then your first port of call should be to optimize how posts look when shared, and you do this via Open Graph tags.
What is Open Graph?
Initially created by Facebook, Open Graph is an internet protocol that standardizes the use of metadata within a webpage to represent the content of a page. It essentially promotes collaboration between Facebook and other social media platforms by allowing them to become rich “graph” objects with the same working as other Facebook objects.
As confusing as that might sound, it merely means that Open Graph allows a certain level of autonomy over how information travels from a third-party website to Facebook when a page is shared/liked, etc. How this works is by sending the data via Open Graph meta tags in the <head> part of the website’s code.
Although first initiated by Facebook, this methodology is now being adopted on other social media platforms. Twitter, LinkedIn, and Google recognize Open Graphs tags. Interestingly, Twitter has its own meta tags known as “Twitter Cards,” but it still acknowledges and utilizes Open Graph tags and will do so if it doesn’t find any Twitter Cards.
The Importance of Open Graph
Open Graph can be a crucial component of your content/marketing strategy. And in that regard, social media is also a powerful tool. Social media sites are the primary source of most of the web’s traffic. For this reason, the ability to use meta tags to optimize your content properly is of the essence. In fact, the tags can drastically affect the conversions and click-through rates of your site!
Open Graph is the unsung hero that ensures that everything that we share on Facebook is rightly optimized. If you’ve ever seen someone share a link that has a thumbnail missing or has an utterly irrelevant picture attached to it, you know that it has not been appropriately optimized for the site. Open Graph ensures that you don’t face such issues and that your content is seamlessly integrated into your social media page.
Although utilizing Open graph tags will not as such directly affect your on-page SEO, it will undoubtedly affect the performance of your links on social media. Therefore, it is a necessary aspect to look into and get right!
How to Implement Open Graph?
So, how does Open Graph work? Open Graph implementation is done by adding Open Graph markup to HTML documents. It goes in the <head> section of your pages. You may be able to do this manually, but if the website is driven by a CMS, then chances are some plugins can make the implementation of Open Graph even easier.
The four required properties for Open Graph are:
og:urlog:titleog:descriptionog:image
Additionally, there are also two recommended properties, which can be used to provide even more context:
og:typeog:locale
Open Graph on Facebook
Since Open Graph was created by Facebook, let’s start off by looking at how each of these properties will work for the site.
og:title
This is how you define your content’s title, and it serves a similar purpose as the traditional meta title tag in your code. Make sure to make it as compelling as possible! Additionally, although there is no limit on characters, it’s best to stay between 60 and 90.
For example:
<meta property=”og:title” content=”Your compelling title here” />og:url
Under this property, you set the URL for the page being shared. Essentially, this means that you set one page that all your shares will go to. However, remember that the URL provided it won’t show on the Facebook newsfeed; only the domain will be visible.
For example:
<meta property=”og:url” content=”http://www.yourdomain.com” />og:description
This descriptor is quite similar to the meta description tag you find in HTML. Here, you describe your content, and that description shows below the link title on Facebook. There are no character limits, but it is advised to stick to less than 200 words.
However, unlike a regular meta description tag, it won’t have any tangible effect on your SEO. Therefore, don’t waste any time on including keywords and instead focus on making it as compelling as possible to encourage people to click for the page.
For example:
<meta property=”og:description” content=”Your compelling description here” />og:image
This is a very important Open Graph tag because adding a picture is the foolproof method of elevating your content value. Under this property, you ensure that a particular thumbnail shows when the page in question is shared. It can be very useful for hitting those conversion rates!
Make sure your image resolution for an OG image is 1200 pixels x 627 pixels – so that your thumbnail is big and attractive. Just ensure that you don’t exceed the 5MB size limit.
Here’s an example
<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />og:type
This is where you describe what kind of content you’re sharing. This can be anything, from a blog post to a video, including (but not limited to):
- website
- article
- blog
- book
- game
- movie
- food
- city
- country
- actor
- author
- politician
- company
- hotel
- restaurant
The code would read something like this:
<meta property=”og:type” content=”website” />
og:locale
This one will define the language of your content. You can change it to any language, although the default is American English.
Example syntax:
<meta property="og:locale"content="en_GB" />
Platforms that Support Open Graph
Here’s a list of all the platforms that support Open Graph:
- Slack
- Telegram
- Google+
Best Practices for Open Graph
Lastly, let’s look at some of the best practices associated with Open Graph:
1) Make sure that you define at least all the required Open Graph properties – but also the recommended ones.
2) Keep your og:title under 55-60 characters.
3) Keep your og:description under 60-65 characters for best results.
4) For og:image, use high-quality images with dimensions of at least 1,200 x 630 pixels.
5) When you’re preparing the Open Graph markup for a page, always run it through the Open Graph debugger to preview your snippet and to make sure all data is filled in.
6) If you end up making any mistakes that were later fixed and now you want Facebook to generate a new snippet: go to the Open Graph debugger and click “Fetch new scrape information.” This will refresh the cache.
7) Use og:image:width and og:image:height to enable Facebook, etc., to load the image properly right after it’s first shared.
CMO & Co-founder
Helping entrepreneurs automate and scale via growth hacking strategies.
Follow me on Twitter for life behind the scenes and my best learnings in the world of SaaS.