Sharing your content on social media is a crucial aspect of any marketing strategy. Exposing your product on social media platforms helps increase visibility and traffic, translating into massive brand awareness and sales gains. However, to properly promote your content on social media, you’ll need to use Open Graph meta tags.
What are Open Graph (OG) meta tags? Why should you use OG tags for social sharing? And why can’t social media crawlers display your rich snippets if you have a JavaScript-based website?
These, along with other important aspects of Open Graph tags, are discussed below.
What are Open Graph (OG) Meta Tags?
Open Graph (OG) tags [also sometimes called open graph meta tags] is a markup protocol that allows developers to turn website URLs (content page, landing page, etc.) into rich objects in a social media platform.
In simple terms, when you copy-paste a URL on social media, Open Graph allows your links to generate some snippet of the URL’s page elements shown below.
As you can see, this post on LinkedIn displays some page elements of the pasted URL, namely the feature image, the title of the page, and the domain. These snippets are shown because the URL is optimized with an Open Graph tag. Without OG, LinkedIn will likely fetch another image connected to the website (not the hero image of the blog), an incorrect meta title, and more irrelevant web page elements.
Example of Open Graph Meta Tags
Here’s the markup from which the snippet above was generated:
</p>
<pre><meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="Static vs Dynamic Websites: Which Is Better for SEO?">
<meta property="og:description" content="The boundary between static & dynamic sites is often blurred as a site may use both, but one is better for SEO. Find the answer and their pros & cons here.">
<meta property="og:url" content="https://prerender.io/blog/seo-for-static-vs-dynamic-webpages/">
<meta property="og:site_name" content="Prerender">
<meta property="og:image" content="https://prerender.io/wp-content/uploads/2021/10/static-v-dynamic-seo-feat.jpg">
<meta property="og:image:width" content="1201">
<meta property="og:image:height" content="302">
</pre>
<p>As you can see, each of these meta tags describes the page’s content and can even specify the size of the feature image. All these tags go into the Head section of the HTML file.
If you want to learn more details about Open Graph tags and codes, visit this link.
Optimizing Open Graph for social media posts is pretty straightforward. As long as you follow the instructions, you shouldn’t run into any bugs. But if you want to check for Open Graph tag errors, we recommend these two tools: LinkedIn’s Post Inspector and Facebook’s Sharing Debugger.
Why You Should Add Open Graph Meta Tags For Social Media Posts
It is true that implementing Open Graph on all your website pages can be resource-consuming. However, the hard work will be worth it compared to the benefits you’ll get, namely the impact on your website’s traffic and the effectiveness of your content distribution strategy.
Here are five reasons you need to implement Open Graph on your website:
1. Increase Your Social Media Links’ CTR
In social media, thousands of videos, messages, posts, and links are posted daily. To get some of your audience’s attention, you’ll need to make your link stand out.
With Open Graph, you can generate eye-catching social links to stop people from scrolling, increase the click-through rate of your links, and get the positive ROI you’re looking for in your content distribution campaign.
2. Control How Your Links are Displayed on Social Platforms
Although most brands use the same featured image, title, and description from the page, you can use Open Graph to test different variations and even set what variation to display for different languages – similar to how hreflang tags are used in SEO.
This gives you total control over how links are shown on social platforms. That includes messaging apps like Slack, WhatsApp, and more.
Pro Tip: Put some extra effort into your Open Graph image. Think of them as the thumbnail of your video, but in this case, your article. Adding a well-formatted and bold-designed image can make a real difference.
3. Increases Your Chances of Shares and Re-Shares
Gray links don’t get shared. Users who see well-designed images with attention-grabbing headlines will likely share them with friends and networks.
Not only are well-crafted snippets more appealing, but they also generate trust. Links shared without Open Graph details can be perceived as broken or low quality. Additionally, to avoid sharing spammy sites, people will avoid sharing your content.
See the example below of unoptimized Open Graph tags content shared on social media.
4. More Visibility Generates More Backlinks
Link building might not be your main focus when sharing your content on social media networks, but Open Graph is still a great way to increase your chances of getting backlinks organically.
Related: Learn how to find and fix broken backlinks.
There are many reasons people link to your pages. However, no one can link to them without knowing they exist first.
Because using Open Graph increases the visibility of your links, there’s a bigger chance for it to get discovered by writers, journalists, and leaders in your industry. If it’s an interesting piece that aligns with what they are or will work on, they will use your link as a reference.
5. Positive Social Signals Help Boosts SEO Performance
There’s still a lot of debate around social signals, but from what most SEO professionals have experience, social media shares, likes, and overall brand visibility on the platforms can help your pages rank higher on search engines.
Logically, it makes sense. After all, social signals are a good way for algorithms to understand how unique, valuable, and reputable a page is.
Still, one thing that can not be argued is that brand awareness can greatly help your SEO performance; your links are getting more real estate on social feeds, more shares, and overall better engagement can help you achieve that.
Variants and Examples of Open Graph Tags
- Title of the page – “og:title“
<meta property=”og:title” content=”Open Graph Meta Tags: Everything You Need to Know” />
- Image of the page – “og:title“
<meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg” />
- URL of the page – “og:url“
<meta property=”og:url” content=”https://example.com/blog/open-graph-meta-tags/” />
- Description of the page – “og:description“
<meta property=”og:description” content=”This is a description of the content that is shared.” />
JavaScript Blocks Open Graph Meta Tags From Social Media Crawlers
Now, in its simplest form, Open Graph works by adding Open Graph tags in the header section of your HTML file. However, there’s one more layer to it that we need to understand as developers and SEO professionals.
Like search engines, social media platforms use crawlers to gather the data from these tags and generate the rich snippet according to your specifications. But if your website is a single page application (SPA), there’s no way for Open Graph crawlers to access the data, as they can’t – by no means – execute JavaScript.
To help you optimize your SPA’s Open Graph and handle most technical SEO issues related to JavaScript, use Prerender.
Prerender creates a snapshot of your fully rendered page and serves it to all crawlers, both from search engines and social media. This means when you share your SPA-page content on social media, all of the intended rich elements (image, URL source, snippet, etc.) will show up on the social wall. With Prerender, social media bots now have unrestricted access to the Open Graph tags.
Moreover, whenever you make any changes to the page, social media crawlers don’t have to render it again from scratch. Thanks to the dynamic caching solution, you’ll save some crawl budget and get a flawless social media sharing experience.
Related: Learn more about the crawl budget, its vital role in indexing, and how to optimize it in this FREE whitepaper.
Improve Social Sharing with Open Graph Tags and Prerender
Distributing content on social media will be much more effective with Open Graph tags. It improves the attractiveness of your content (visually), stopping users from scrolling. And through the image, title, and snippet shown by optimized Open Graph tags, users are more likely to click—giving you more chance to turn them into buyers.
However, these rich snippets won’t appear on social media platforms if you use SPA. Overcome this by adopting Prerender. We turn your JS-based pages into static HTML, feeding social media bots with ready-to-show page elements on social walls.
Learn more about how Prerender works. And when you’re ready, get started with a FREE 1,000 renders per month. Sign up today!
