Using Open graph tags and Twitter cards with your openresume site

Are you wondering how to make your content more clickable, shareable, and noticeable on social media?

Open Graph meta tags and Twitter Cards are the solutions.

Here’s how one of the websites built with openresume looks when shared on Facebook with Open Graph meta tags:

Shokunbi Johnson openresume.io snippet on facebook

What are 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.

This is how the tags look on Facebook:

Why are Open Graph tags important?

People are arguably more likely to see and click shared content with optimized OG tags, which means more social media traffic to your website.

There are three reasons for this:

  1. They make content more eye-catching in social media feeds.
  2. They tell people what the content is about at a glance.
  3. They help Facebook understand what the content is about, which can help increase your brand visibility through search.\

SIDENOTE.

 Open Graph tags also help create a snippet when someone sends you a link through direct messages using apps that support the Open Graph protocol—naturally Facebook’s Messenger and WhatsApp, but also iMessage and Slack.

How to set up Open Graph tags

Log in to your openresume dashboard, go to tools and click on Advance SEO. On the Open graph page, fill the required fields and click save

Setting open graph data on openresume.io

 

How to test and debug Open Graph tags

Now that you’ve deployed all the tags, you need to make sure they’re working as expected and are ready for sharing.

For that, use these tools:

They all work the same. They pull tags from the page and show how it looks when shared.

Testing also helps prevent issues where OG tags aren’t displayed or pulled correctly.

Here’s what the FB Sharing Debugger looks like in action:

facebook debug tool for johnson.openresume.io

The most important thing is how the snippet looks. If you miss or incorrectly set up less important tags, it’s not a big deal. You can ignore warnings about unimportant tags like ‘fb:app_id’

If something looks amiss and you update the tags, use the “Scrape Again” button to pull fresh data. If you don’t see the change after the crawl, use the Batch Invalidator to clear the cache and repeat.

Repeat this process with the Twitter Card Validator and LinkedIn Post Inspector to ensure that your content looks as intended across all networks.