Optimize for Social with Dynamic Open Graph Meta Tags

Dynamic Open Graph Meta Tags for Social Sharing

Social media optimization, like SEO, is critical for website traffic.
When you enable social sharing functionality on your website it helps create a brand presence and provides other connected benefits.
A website that is optimized for social sharing makes it easy for your users to share it with friends and professional networks – who are likely to get additional value out of your content. It also puts your content in front of potential new audiences who would not otherwise have engaged with your brand or found your content.
In fact, it can act as social proof itself. Someone sharing your content on a social media platform is like a user saying “this website is worth checking out.” The more shares your content gets, the more likely other internet users will visit your website and do the same.

Dynamic Open Graph Meta Tags for Social Sharing

icon

We think about website optimization in terms of search engines like Google and Bing, but social media platforms like Facebook, Twitter, and Instagram each have their own bots that crawl the internet for content, too. 

There are two main ways to execute social sharing functionality on your website: by integrating social sharing buttons on the bottom of each post, and by enabling open graph protocol with dynamic meta tags.

icon

Open Graph enables web pages to have a rich snippet preview when someone shares your web page on social media. Rather than just a flat URL with plain text, the page contains a social graph with dynamic elements like a page title, a featured image, and a preview of the text on the page.
When a blog post with Open Graph metadata is shared directly from a website, the dynamic meta tags control what content (e.g. the title, the website name, a preview image) shows up when the post is shared on social networks. The information is displayed in a rich snippet preview that’s more inviting and engaging rather than just a URL with plain text. Rich snippets like these make it more likely that users will engage with the post.
Facebook and Twitter each have their own dynamic meta tags that indicate to their bots what information to display.

icon

Facebook Open Graph

<meta property="og:type" content="website">

<meta property="og:url" content="https://example.io/">

<meta property="og:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">

<meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">

<meta property="og:image" content="https://example.io/assets/meta-tag.png">
icon

Twitter Open Graph

<meta property="twitter:card" content="summary_large_image">

<meta property="twitter:url" content="https://example.io/">

<meta property="twitter:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">

<meta property="twitter:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit">

<meta property="twitter:image" content="https://example.io/assets/meta-tags.png">

 

Social network bots can crawl most static HTML pages without a problem. Where complications occur is when they try to crawl SPAs with dynamic content made with JavaScript frameworks, such as Angular, React and Vue.

icon

Challenges with SPAs

Google can generally crawl and execute JavaScript as long as it’s accessible on the server-side. Social network spiders cannot.

When your website is a SPA made using a JavaScript framework, social media Open Graph scrapers can’t read the Open Graph protocol meta tags you use to indicate social assets. They will only read what’s on your web page’s index.html file rather than executing the JavaScript content itself. This is so that their bots reduce the strain on your servers and speed up the crawling process.

Unless your nested routes specifically outline your metadata in your index.html file (which they won’t, if your website is a SPA), social media Open Graph crawlers won’t access the content you outlined in your routes, and Facebook, Twitter, WhatsApp, etc. won’t be able to read the metatags and display your content properly on social.

Challenges with SPAs
icon

Common Solution - Server-Side Rendering

Server-side rendering (SSR) is a common solution to this problem, as it renders the Open Graph data on the server-side for it to be ready-made for crawling, and makes metatags easily accessible for bots and Open Graph scrapers.

However, SRR has its own complications. Enabling SSR for a SPA to enable social sharing involves lengthy workarounds and installing JavaScript libraries specific to each framework like Angular, React etc.

It also makes things complicated if your web pages have dynamic content. Whenever the tiniest piece of data changes on your page – be it a URL update or a change in the page title – your servers will have to go through the process of reloading all of your Open Graph content all over again.

SSR works fine for lightweight apps and websites that don’t have many pages, or pages that are mostly static. However, it’s not a sustainable solution if you have 1,000s or 10,000s of pages, each with dynamic URLs. It’s non-scalable, and the effort and server costs involved outweigh the benefits of enabling enhanced social sharing.

That’s why the best solution for social media sharing is pre-rendering.

Common Solution - Server-Side Rendering

Best Solution - Dynamic Rendering With Prerender

Prerender doesn’t just optimize your JavaScript website for search engines. It optimizes it for social sharing as well.

Prerender uses dynamic rendering to automate the process of loading the Open Graph metadata that would normally be locked behind JavaScript. It will automatically detect which user-agent is visiting your website – whether a social media crawler or a human user – and serve them the correct version of your webpage accordingly.

Typically, crawlers sent by social media networks will stop when they find your index.html file without executing any of the JavaScript, where your metadata is stored. The bot won’t be able to tell what the page title is, what image is associated with the page, or any other info that might be featured on a shared social media post. And, when someone hits the social share button at the bottom and shares the post on Facebook, all they’ll see is a flat URL that contains no useful information about what’s on the page.

Prerender, however, will pre-load dynamic content on your web pages, make the Open Graph meta tags contained within easily accessible to all major social media networks, and add new dynamically-created URLs as it goes where necessary.

Then, when your user shares your latest blog post on Facebook, Twitter, WhatsApp or LinkedIn, everyone who follows them will see at a glance why your website is worth visiting.

Try Prerender for free, and start building a social media presence that your users can’t ignore.

Best Solution - Dynamic Rendering With Prerender