How to Use Open Graph Tags to Boost Social Engagement

What is open graph?

Open Graph Tags are snippets of code you add to your webpages that define how your content appears when users share it on certain social media sites.

Og meta tags belong to the Open Graph ProtocolWhich Facebook Created to Standardize How Metadata is Pulled From Webpages and Displayed in its feed.

For example, take this blog post shared on Facebook with an open graph image tag:

Compared with this post without the og image tag:

The first post is more visually appealing and provides extra details about the shared content.

Og tags give you more control over how your content looks when on sites like Facebook, LinkedIn, X (Formerly Twitter), and Pinterest.

They go in the header section of your webpages. Like this:

We’ll cover how to add them later in this article.

Why are open graph meta tags important?

Open Graph Meta Tags Create appearance and informative Previews of your pages, which can improve social media metrics like engines, impressions, and recities.

A 2024 Inma Study Showed that Facebook posts with images had 100% more engine and 114% more impressions than posts without images.

Other Open Graph Tag Benefits May Include:

• Higher Click-Through Rate (CTR): Link Previews are more enticing to click on, which can lead to more referral traffic to your sit
• More Shares: People are more likely to share content with link previews
• Strongeer Branding: Enriched Previews Help Mantain Brand Voice and Consistency Across Social Platforms
• Professional Look: Missing Tags can make your brand appear neglected
• Indirect seo benefits: More clicks and shares can generate backlinks and user interactions that Benefit SEO

Open Graph Types: required & optional tags

Open Graph Tags Enrich How Social Media Platforms Display Your Page Previews. Some tags are required. Others are optional. This Section Provides Standard Code Snippets, Best Practices, and Examples.

Required tags

The below tags must be present for social media sites using the open graph protocol to display enriched previews.

OG: Title

The OG: Title Tag Specifies a Title for your content and shows users what your page is about.

Best practices,

• Match the webpage’s content
• Encourage clicks with descriptive text
• Keep Titles Between 55-60 Characters to avoid truncation
• Use Title case or sentence case, but avoid all caps

Example,

OG: Image

OG: image adds an image to your preview that takes up a lot of visual space, which can increase clicks.

Best practices,

• Use images at 1200 x 630 pixels for most social media platforms
• Use JPEG or PNG Formats
• Ensure Your OG Social Image Matses Your Page Content
• Use high-resolution images

Example,

 

OG: URL

OG: URL is the Uniform Resource Locator (URL) of your page and tells social media sites where to pull the content from.

Best practices,

• Use an exact url.
• Use the canonical url for any duplicates, which ensures the social media site can access the right metaproperties, even if other versions of the page are shared

Example,

OG: Type

OG: Type describes the type of content and should match one of the following object type Values:

• Website
• Article
• Book
• Profile
• VIDEO
• Music

Best practices,

• Choose an Og Type That Mats The Page’s Content. If you have multi multiple content types (Eg, a blog post with images and videos), choose the primary one
• Use the correct corresponding object type value

Example,

Optional tags

These tags are not required, but they can improve how social media sites display your content.

OG: Description

The OG: Description Tag provides a brief summary of your content to motivate clicks.

Best practices,

• Keep your descriptions concise, accurate, and enticing
• Use fewer than 120 characters to prevent truncation
• Avoid repeating the Og: Title

Example,

OG: site_name

The OG: site_name tag lists the site, business, or brand associateed with the content.

Best practices,

• Verify spelling and match your branding
• Avoid Repeating Your Brand Name If it appears in the Og: Title

Example,

OG: Locale

The OG: Locale Tag Specifies Your Content’s Language and Country So Social Media Sites Can Categorize it.

Best practices,

• Use the correct Language and Country Code
• Confirm The Correct Order (IE, language_country)
• Use OG: Local: Alternate for Additional Regents or Languages

Example,

How to set up og tags

Here’s how to add open graph tags on a more popular content management systems.

In WordPress

In WordPress, You Can Add Open Graph Tags Through Various Plugins, but we recommend yoast seo.

To access and use the plugin for open graph, follow these steps:

1. Log in to your wordpress account
2. Navigate to “Plugins“And search for” yoast seo “(the premium version is required)
3. Install and activate the plugin
4. Navigate to “Yoast seo,Settings,
5. Slide the toggle benefath the open graph feature to enable it
6. Use the “SocialTab in the plugin to customize tags on individual pages

In Wix

With adds open graph tags to your pages by default based on your site’s data and open graph best practices.

To customize them, follow these steps:

1. Log in to your wind account
2. Go to “Search Engine Optimization (SEO)“In your Dashboard
3. Click on “SEO Settings,
4. Select the page type you want to edit (IE, blog post, product page, etc.)
5. Click “Edit“Next to” SEO Basics & Social Share “
6. Scroll down to “social share” and apply your custom tags

In squarespace

Squarespace Adds Essential OG Types, but you can customize them on a per-page betis.

Here’s how:

1. Log in to your squarespace account
2. Hover over the page to edit and click on the gear icon next to “menu”
3. Click “Advanced,
4. Copy and Paste your Og Tags Into “Page Header Code Injection”
5. Click “Save,

How to check your Og Meta Tags

For Facebook

Use Facebook’s Sharing debugger Tool to test your Og Tags.

Insert the page url and click “DebugAny Issues will appear under “Warnings that should be fixed.”

Scroll to the “Link Preview” Section to see how your post will look.

For linkedin

Use Linkedin’s Post Inspector to check your Og Tags.

Enter Your Page URL and Click “InspectReview the link preview and if anything is missing or can be improved.

For x

X no longer provides a link preview in its card validatorSo use the tweet composer to check how your content will appear.

Audit your open graph tags

Use site audit to confirm that your Og Tags are present and correctly set up.

To check which pages on your site have og tags, run a site audit. Then, Click “View Details“Under the” Markup “report.

Find the “Pages by Markup Type” Section and Look for “Open Graph.” The blue number shows how many pages have og tags. Click to see the full list.

Click “# Types“In the” Markup “column to see whether you’ve correctly implemented open graph meta tags via a green check mark.