Where do I add Open Graph tags on my website?

Open Graph tags go in the section of your HTML, between the and tags. In WordPress, you add them through your SEO plugin (Yoast or RankMath). In Next.js, you use the Metadata API.

Do I need to add Open Graph tags to every page?

Yes. Each page should have its own OG tags that match its content. A homepage OG tag should be different from a blog post OG tag because each page has a different title, description, and image.

How to Add Open Graph Tags to Any Website

Whether you're using raw HTML, WordPress, Next.js, or Webflow — here's exactly how to add Open Graph tags to your site.

Not sure if your OG tags are set up correctly?

Check your Open Graph tags free with Proovd — paste a URL and see exactly how it looks on X, LinkedIn, Slack, Discord, WhatsApp, and Reddit.

Quick Answer

Add og:title, og:description, og:image, and og:url to your page's <head>
Also add twitter:card and twitter:image for X/Twitter
In WordPress: use Yoast or RankMath's built-in OG settings
In Next.js: use the Metadata API or <NextMetadata>

Method 1: Raw HTML (Any Static Website)

If you have direct access to your HTML files, add these tags inside the <head> section of each page:

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

Make sure the og:image URL is absolute (starts with https://). Relative paths like /images/preview.jpg will not work.

Method 2: WordPress (Yoast SEO)

If you use WordPress with Yoast SEO, OG tags are handled automatically:

Install and activate the Yoast SEO plugin
Edit any page or post
Scroll down to the Yoast SEO metabox
Click the "Social" tab
Set the "Facebook title", "Facebook description", and "Facebook image"
Yoast automatically generates the correct og: tags

Yoast also adds Twitter Card tags automatically. You can configure them under Yoast SEO → Social → Twitter.

Method 3: WordPress (RankMath)

RankMath works similarly to Yoast but with slightly different settings:

Install and activate RankMath SEO
Edit any page or post
Find the RankMath metabox
Go to the "Social" tab
Set the social image, title, and description
RankMath auto-generates OG and Twitter Card tags

Method 4: Next.js (App Router)

In Next.js 13+ (App Router), use the Metadata API:

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

For dynamic pages (like blog posts), generate metadata in generateMetadata():

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

See our Open Graph Tags in Next.js guide for a deeper dive.

Method 5: Webflow

Webflow has built-in Open Graph settings:

Go to your project settings
Click "SEO Settings"
Under "Default Meta Tags", set the Facebook/OG image, title, and description
For individual pages, go to the page settings → SEO Settings and override the defaults
Webflow automatically generates the correct OG tags

Method 6: Custom CMS or Headless Setup

If you're using a headless CMS (Contentful, Sanity, Strapi, etc.), add OG tags in your frontend framework. The process is the same as Next.js — generate the tags dynamically from your CMS data and inject them into the page <head>.

Quick Fix Checklist

Identify your platform (WordPress, Next.js, Webflow, custom HTML)
Set og:title, og:description, og:image, og:url
Set twitter:card and twitter:image
Use 1200×630 pixel images
Use absolute URLs for all image paths
Test with Proovd to verify on all platforms

Frequently Asked Questions

Do I need to add OG tags to every page?

Yes. Each page should have its own OG tags. The homepage OG tags should be different from individual blog post tags because each page has unique content.

Can I use relative URLs for og:image?

No. OG image URLs must be absolute (starting with http:// or https://). Platforms' crawlers need a full URL to fetch the image.

Does WordPress add OG tags automatically?

WordPress doesn't add OG tags by default, but plugins like Yoast SEO and RankMath do. Install either one and configure the social settings.

Verify your Open Graph tags after adding them

Check your Open Graph tags free with Proovd — paste a URL and see the preview on X, LinkedIn, Slack, Discord, WhatsApp, and Reddit.