Open Graph Tags

In one line

Learn what Open Graph tags are, why they matter for social media click-through rates, and how to implement the core tags in this SEO glossary definition.

Definition & overview

Open Graph tags is a specialized category of HTML <meta> tags that dictates how webpage links appear when shared across different social networks. It prevents platforms from randomly scraping text to ensure shared content consistently displays accurate, high-quality social media previews.

Marketing teams across the industry often spend weeks crafting a new campaign only to share the link across platforms like LinkedIn and Facebook and see a broken image or a missing headline. Social platforms rely on the Open Graph protocol to understand page content. Without these specific Open Graph meta tags, networks rely on Facebook internal heuristics and random text scraping to guess what to display. That guesswork leads to poor visual presentation and actively damages your click-through rate (CTR).

Taking control of these snippets means you dictate the exact branding users see in their feeds, turning shared links into standalone definitions of your content. A clear headline and an appropriately sized image build immediate trust, so implementing these tags is a foundational step for protecting your brand consistency and maximizing the return on your content distribution.

How to implement open graph tags

Adding this HTML markup to your website requires placing a few lines of code into the head section of your webpages. You can handle this manually or rely on standard CMS tools.

1Identify your core pages: Start with your homepage, primary service pages, and high-traffic blog posts.
2Define the basic properties: Every page needs four essential structured properties to function correctly. These OG tags transform your webpage into rich graph objects. You must define the og:title for the headline, the og:image for the visual preview, the og:url for the canonical link, and the og:type to tell the platform if the content is an article or a general website.
3Update your CMS settings: Most marketing teams use plugins like Yoast SEO for WordPress or native Shopify settings to populate these fields automatically. You simply upload your preferred image and type your title into the plugin interface.
4Inject the code manually: If you use a custom build, ask your developer to map your database fields directly to the corresponding meta tags in the document template.

Example

Successful code implementation requires absolute precision in your syntax to avoid syntax errors. You need to nest your Open Graph properties directly inside the website <head> element before the closing tag.

Here's a complete HTML snippet you can copy and adapt for a standard article page:

<head>
<!-- Standard SEO Meta Tags -->
<title>Your Article Title Here</title>
<meta name="description" content="A brief summary of your webpage content goes here.">
<!-- Open Graph Tags -->
<meta property="og:title" content="Your Engaging Social Media Headline">
<meta property="og:description" content="A compelling one-sentence summary to drive clicks.">
<meta property="og:image" content="https://www.yourdomain.com/images/social-preview-image.jpg">
<meta property="og:url" content="https://www.yourdomain.com/exact-page-url">
<meta property="og:type" content="article">
</head>

Notice that the property attribute defines the specific tag and the content attribute holds the actual text or URL you want the social network to display.

Common mistakes

Even experienced marketing teams run into issues when deploying these tags. A common frustration is launching a major campaign only to see a broken link preview on your feed. You can protect your CTR by avoiding these frequent deployment errors:

Ignoring image dimensions: Platforms will crop or stretch your visuals if you upload the wrong size. Use a 1.91:1 aspect ratio and aim for 1200 x 630 pixels to ensure crisp displays across all devices.
Forgetting the cache: If you update an image after publishing, social networks will still show the old one. Always use the Facebook Sharing Debugger, LinkedIn Post Inspector, or Twitter Card Validator to handle clearing cache so the platform pulls your new tags and updates your Twitter Cards.
Overwriting via CMS plugins: Sometimes a theme update or a conflicting plugin will inadvertently strip your code. You should periodically inspect your source code to confirm your tags remain intact.
Using relative URLs: The og:url and og:image properties require absolute URLs that include the full domain path. Using relative paths will break your previews.

Frequently asked questions

What is the difference between Open Graph tags and meta tags?

Standard meta tags communicate directly with search engines to dictate organic search results and indexing. Open Graph tags exist specifically for social networks. They dictate the exact image, title, and description displayed when a user shares your link.

How to fix some Open Graph meta tags are missing?

You fix this error by adding the missing properties directly to your website code. Log into your CMS and update your SEO plugin settings, or ask your developer to hardcode the required title and image tags into your template.

How to restore tags on Facebook?

If Facebook displays outdated information, you need to clear the platform cache. Paste your URL into the Facebook Sharing Debugger and click the scrape button. This forces the platform to fetch your newest tags and update the preview.

Meta tagsTitle tagCanonical tagSchema markup

Want this handled for you?

See how your site performs across Google, AI Overviews, ChatGPT, and Gemini.

Get your free visibility report