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 outline how your content material seems when customers share it on sure social media websites. 

OG meta tags belong to the Open Graph protocol, which Fb created to standardize how metadata is pulled from webpages and displayed in its feed. 

For instance, take this weblog put up shared on Fb with an Open Graph picture tag:

In contrast with this put up with out the OG picture tag: 

The primary put up is extra visually interesting and offers additional particulars concerning the shared content material.

OG tags provide you with extra management over how your content material appears when shared on websites like Fb, LinkedIn, X (previously Twitter), and Pinterest.

They go within the header part of your webpages. Like this:

We’ll cowl the way to add them later on this article.

Why Are Open Graph Meta Tags Essential?

Open Graph meta tags create interesting and informative previews of your pages, which might enhance social media metrics like engagements, impressions, and reactions.

A 2024 INMA research confirmed that Fb posts with photographs had 100% extra engagement and 114% extra impressions than posts with out photographs.

Different Open Graph tag advantages could embody:

• Increased click-through fee (CTR): Hyperlink previews are extra engaging to click on on, which might result in extra referral site visitors to your website
• Extra shares: Persons are extra more likely to share content material with hyperlink previews 
• Stronger branding: Enriched previews assist keep model voice and consistency throughout social platforms
• Skilled look: Lacking tags could make your model seem uncared for
• Oblique website positioning advantages: Extra clicks and shares can generate backlinks and consumer interactions that profit website positioning

Open Graph Sorts: Required & Elective Tags

Open Graph tags enrich how social media platforms show your web page previews. Some tags are required. Others are elective. This part offers commonplace code snippets, finest practices, and examples. 

Required Tags

The under tags should be current for social media websites utilizing the Open Graph Protocol to show enriched previews. 

og:title

The og:title tag specifies a title in your content material and reveals customers what your web page is about.

Greatest Practices: 

• Match the webpage’s content material
• Encourage clicks with descriptive textual content 
• Maintain titles between 55-60 characters to keep away from truncation 
• Use title case or sentence case, however keep away from all caps 

Instance: 

og:picture

og:picture provides a picture to your preview that takes up numerous visible house, which might enhance clicks. 

Greatest Practices: 

• Use photographs at 1200 x 630 pixels for many social media platforms
• Use JPEG or PNG codecs
• Guarantee your OG social picture matches your web page content material
• Use high-resolution photographs

Instance: 

og:url

og:url is the uniform useful resource locator (URL) of your web page and tells social media websites the place to drag the content material from.

Greatest Practices: 

• Use an actual URL. 
• Use the canonical URL for any duplicates, which ensures the social media website can entry the suitable metaproperties, even when different variations of the web page are shared

Instance:

og:kind

og:kind describes the kind of content material and will match one of many following object kind values:

• Web site
• Article
• E-book
• Profile
• Video
• Music

Greatest Practices:

• Select an OG kind that matches the web page’s content material. If in case you have a number of content material varieties (e.g., a weblog put up with photographs and movies), select the first one 
• Use the proper corresponding object kind worth

Instance: 

Elective Tags

These tags usually are not required, however they’ll enhance how social media websites show your content material. 

og:description

The og:description tag offers a short abstract of your content material to inspire clicks. 

Greatest Practices: 

• Maintain your descriptions concise, correct, and engaging
• Use fewer than 120 characters to stop truncation 
• Keep away from repeating the og:title

Instance: 

og:site_name

The og:site_name tag lists the location, enterprise, or model related to the content material.

Greatest Practices: 

• Confirm spelling and match your branding
• Keep away from repeating your model title if it seems within the og:title

Instance: 

 og:locale

The og:locale tag specifies your content material’s language and nation so social media websites can categorize it.

Greatest Practices: 

• Use the proper language and nation code
• Affirm the proper order (i.e., language_country)
• Use og:native:alternate for extra areas or languages

Instance: 

Find out how to Set Up OG Tags

Right here’s the way to add Open Graph tags on a number of widespread content material administration techniques.

In WordPress

In WordPress, you may add Open Graph tags via varied plugins, however we advocate Yoast website positioning.

To entry and use the plugin for Open Graph, observe these steps:

1. Log in to your WordPress account
2. Navigate to “Plugins” and seek for “Yoast website positioning” (the Premium model is required)
3. Set up and activate the plugin
4. Navigate to “Yoast website positioning” > “Settings”
5. Slide the toggle beneath the Open Graph characteristic to allow it
6. Use the “Social” tab within the plugin to customise tags on particular person pages

In Wix

Wix provides Open Graph tags to your pages by default primarily based in your website’s knowledge and Open Graph finest practices.

To customise them, observe these steps:

1. Log in to your Wix account
2. Go to “Search Engine Optimization (website positioning)” in your dashboard
3. Click on on “website positioning Settings”
4. Choose the web page kind you wish to edit (i.e., Weblog put up, Product web page, and so forth.)
5. Click on “Edit” subsequent to “website positioning fundamentals & social share”
6. Scroll all the way down to “Social share” and apply your customized tags

In Squarespace

Squarespace provides important OG varieties, however you may customise them on a per-page foundation.

Right here’s how:

1. Log in to your Squarespace account
2. Hover over the web page to edit and click on on the gear icon subsequent to “Menu” 
3. Click on “Superior”
4. Copy and paste your OG tags into “Web page Header Code Injection”
5. Click on “Save”

Find out how to Examine Your OG Meta Tags

For Fb

Use Fb’s Sharing Debugger device to check your OG tags. 

Insert the web page URL and click on “Debug.” Any points will seem below “Warnings That Ought to Be Mounted.” 

Scroll to the “Hyperlink Preview” part to see how your put up will look. 

For LinkedIn

Use LinkedIn’s Submit Inspector to verify your OG tags.

Enter your web page URL and click on “Examine.” Overview the hyperlink preview and if something is lacking or will be improved. 

For X

X not offers a hyperlink preview in its card validator, so use the Tweet Composer to verify how your content material will seem. 

Audit Your Open Graph Tags

Use Web site Audit to substantiate that your OG tags are current and accurately arrange.

To verify which pages in your website have OG tags, run a website audit. Then, click on “View particulars” below the “Markup” report. 

Discover the “Pages by Markup Kind” part and search for “Open graph.” The blue quantity reveals what number of pages have OG tags. Click on to see the total checklist. 

Click on “# varieties” within the “Markup” column to see whether or not you’ve accurately carried out Open Graph meta tags by way of a inexperienced verify mark.