› blog › How to Add Open Graph Meta Tags to Your Website (Step-by-Step)

How to Add Open Graph Meta Tags to Your Website (Step-by-Step)

Aug 21, 2025

In this article:

Step 1: Know the essential tags
Step 2: Add tags in plain HTML
Step 3: Add tags in WordPress
Step 4: Add tags in modern frameworks
Step 5: Test your tags
Common mistakes to avoid

Step 1: Know the essential tags

The most important Open Graph tags are:

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A short description of your page." />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:url" content="https://example.com/your-page" />

og:title – The headline that appears in the preview.
og:description – A short summary of your content.
og:image – The image shown alongside the link.
og:url – The canonical URL for the page (important if your site has multiple versions).

If you’re unsure what each tag does, see our Beginner’s Guide to Open Graph Tags.

Step 2: Add tags in plain HTML

If your website is static or hand-coded, place the OG tags inside the <head> section of your HTML page:

<head>
  <title>My Page</title>
  <meta charset="UTF-8" />

  <meta property="og:title" content="My Blog Post" />
  <meta property="og:description" content="This is my post about Open Graph." />
  <meta property="og:image" content="https://example.com/images/post.jpg" />
  <meta property="og:url" content="https://example.com/my-post" />
</head>

That’s it! Once published, your page will provide these details to social platforms.

Step 3: Add tags in WordPress

If you use WordPress, you don’t need to touch the code. Plugins can handle OG tags for you:

All in One SEO (AIOSEO) – Lets you set Open Graph images and titles per post.
Yoast SEO – Automatically generates OG tags and gives you a preview.

Once installed, edit any post or page and scroll down to the SEO settings to customise your Open Graph fields.

Step 4: Add tags in modern frameworks

If you’re using a framework like Next.js, Astro, or React, you can generate OG tags dynamically per page.

Next.js example:

import Head from "next/head";

export default function BlogPost() {
  return (
    <Head>
      <title>My Blog Post</title>
      <meta property="og:title" content="My Blog Post" />
      <meta property="og:description" content="This is my post about Open Graph." />
      <meta property="og:image" content="https://example.com/images/post.jpg" />
      <meta property="og:url" content="https://example.com/my-post" />
    </Head>
  );
}

Astro example:

---
const { title, description, image, url } = Astro.props;
---

<head>
  <title>{title}</title>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
</head>

This way, your OG tags can change depending on the content being rendered.

Step 5: Test your tags

After adding OG tags, don’t forget to test. Tools you can use:

Facebook Open Graph Debugger – See what Facebook detects.
Open Graph Checker – Preview across different platforms.

These tools can also refresh the cache if you’ve updated your tags but aren’t seeing changes.

Common mistakes to avoid

Forgetting the og:image (the most important tag for engagement).
Using an image that’s too small or large (see our Open Graph Images Guide).
Not matching og:url with your canonical page URL.
Blocking your images with robots.txt.

Adding Open Graph meta tags is one of the simplest ways to improve how your content looks on social media. Whether you add them manually, use a plugin, or generate them dynamically, the key is to include the four essential tags and always test your setup.

← Back to all posts