Categories: SEO

Open Graph Explained

Everyone wants to create content that stands out, encourages brand awareness, and is easy to share in the online marketing world.

Open Graphs tags are one way to earn more views on social media. These useful tags determine how your link previews appear on social media. When someone shares a link from your website, they’ll see the most important parts of your webpage in the preview.

What is Open Graph?

In 2010, Facebook introduced Open Graph meta tags to make sharing websites on the platform easier. Twitter and LinkedIn have since adopted Open Graph meta tags to improve their users’ experience.

When you paste a URL into a Facebook input box, you’ll likely see a link preview. Before Open Graph meta tags, you had no control over how your link preview appeared, and sometimes Facebook would display the wrong content.

Open Graphs meta tags help users optimize their social media link previews, so users always see the essential information.

In the following images, we have an example of meta tags included in a webpage’s code. When someone posts the URL to this webpage on Facebook, we see a stylized link preview:

Why are Open Graph tags important?

Social media channels are a steady source of web traffic and conversions. With the right mix of strategy and design, you can convince users to click through to your website to learn more about your brand, make a sale, and much more.

Open Graph meta tags enhance your webpage’s link previews in a way that catches your audience’s eye. Here’s what a link preview looks like for a webpage without Open Graph meta tags on Facebook:

Let’s review a link preview for a web page with Open Graph. In comparison, we see a larger image and a bolded headline, and a truncated URL.

How to Use Open Graph

Facebook lists 17 Open Graph tags in their official documentation, but only four are required for Facebook to understand your webpage. You’ll use the tags by placing them in-between the <head> tags in the webpage’s backend.

The four required tags are:

OG: title for the title of the article

<meta >

OG: type to indicate the type of object you’re uploading (article, video, etc)
<meta >
OG: image for the URL of the main image

<meta >

OG: URL to indicate the actual URL the user will click through to

<meta >

You can use other OG tags, like:

OG: audio (connect an audio file to your post)
OG: description (add a brief description)
OG: determiner (indicate the word that appears before the object’s title in a sentence)
OG: site-name (list the site from which the object originated)

Other Forms of Open Graph

Twitter Cards

Twitter Cards work similarly to Open Graph in that you can customize how your link previews appear in tweets. When you paste a URL into Twitter’s input box, it will automatically generate a title and main image:

You can still use Open Graph tags with Twitter; the platform just implements its own tag system before Open Graph.

However, Twitter cards have a requirement: images should be sized at 1024 pixels by 512 pixels. You can double-check the appearance of your Twitter card with its Card validator.

Testing Your Open Graph Results

It can be helpful to test your Open Graph implementation to ensure that it works when it’s time to post. To test, you have a few options available to you, including:

Site Audit Tool

The Site Audit Tool includes over 120 on-page and technical SEO checks for each part of your website. One such check indicates how many of your audited pages have Open Graph markups.

To get started with the Site Audit tool:

Pull up the Site Audit tool from your project’s dashboard. (If you don’t have a project set up, you’ll need to create a project for your website to use the Site Audit tool.)

Configure the audit’s settings with the tool’s setting panels. You can set the audit’s crawl scope and include any disallowed pages. Select Start Site Audit.

When the audit is complete, use the Markup thematic report in the Overview tab to see any pages with Open Graph markup:

From the above example, we see that 78% of the pages don’t have any markup. If your results look similar to this, it might be worth considering adding Open Graph markup to your most important pages.

Facebook Object Debugger

Since Facebook uses the Open Graph protocol to determine what to display when a link is available, they offer a debugger tool to test your Open Graph code. To use the tool:

Navigate to Facebook’s Debugger Tool.
Enter the URL of the page you want to be scraped and investigated.
Select Debug.

If there are any issues with your link, the tool returns a warning message:

Other Ways to Check Structured Data

Key Takeaways

Open Graph is a simple addition to your webpage that can bring remarkable results for your marketing campaigns. Your content’s appearance on social media can draw in more users and eventually convert them to sales.

If you’re new to working with Open Graph code, there are plenty of tools to help you test if your implementation works. Try a site auditing tool or any tool that can help you review your structured data.

Find and Fix Sitemap Errors

with the Site Audit Tool

Read original article here

Denial of responsibility! Search Engine Codex is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – admin@searchenginecodex.com. The content will be deleted within 24 hours.

Chris Barnhart

Next What is CTR? Click-Through Rates Explained »

Previous « Ecommerce SEO guide: New documentation from Google

Published by

Chris Barnhart

September 29, 2021 2:40 am

Open Graph Explained