Skip to content
SeenLens

Open Graph tags missing: how to add og:title and og:description

Open Graph tags are meta tags in the page head that tell chat apps and social sites how to show a link preview. SeenLens passes a page with both og:title and og:description, warns when one is missing and fails when both are. Adding the tags takes about ten minutes per template.

By SeenLens · Last updated

Run the free 43-check scan on your page

What does the Open Graph check test?

SeenLens reads the og:title and og:description meta tags in the page head. Empty values count as missing.

Open Graph check results
Tags presentResult
og:title and og:descriptionPass
One of the twoWarn
NeitherFail

The Open Graph protocol asks for four properties on every page: og:title, og:type, og:image and og:url. It lists og:description and og:site_name as optional but generally recommended. SeenLens tests title and description because they work as a summary of the page. Add all six for a full preview.

Open Graph is made for link previews. The check's weight is low (2 in the structured data dimension). Some AI tools may read the tags as a summary, but no study shows a citation effect.

How can I see which tags my page has?

Terminal
curl -s https://example.com/page | grep -oiE '<meta[^>]*property="og:[a-z:_]+"[^>]*>'

No output means the page has no Open Graph tags. Next.js can stream metadata into the body for browsers that run JavaScript, but for bots that read HTML only, such as the Facebook crawler, it keeps the metadata in the head. Check the raw HTML either way.

How do I add Open Graph tags?

HTML
<head>
  <meta property="og:title" content="Open Graph tags missing: how to fix it" />
  <meta property="og:description" content="Add og:title, og:description, og:image and og:url to the page head." />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/fixes/open-graph" />
  <meta property="og:image" content="https://example.com/images/open-graph.png" />
  <meta property="og:site_name" content="Example" />
</head>

Next.js App Router

Export a metadata object or a generateMetadata function from a layout or page. Next.js creates the head tags. Set metadataBase once in the root layout so relative image paths resolve to absolute URLs.

app/pricing/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Pricing",
  description: "The scan is free. The report costs USD 49.",
  openGraph: {
    title: "Pricing",
    description: "The scan is free. The report costs USD 49.",
    url: "https://example.com/pricing",
    siteName: "Example",
    type: "website",
    images: ["https://example.com/og.png"],
  },
};

A page that exports its own openGraph object replaces the whole openGraph object from its layout, because Next.js merges metadata shallowly. A page that sets only openGraph.title therefore loses the layout's description. Repeat every field you need, or put the shared fields in a variable and spread it.

WordPress

Check your SEO plugin's social settings first. Most SEO plugins offer Open Graph output and per page fields. If you prefer code, print the tags from a child theme or a small plugin with the wp_head action.

functions.php (child theme)
add_action('wp_head', function () {
  if (!is_singular()) return;
  $title = esc_attr(get_the_title());
  $desc  = esc_attr(wp_strip_all_tags(get_the_excerpt()));
  echo '<meta property="og:title" content="' . $title . '" />' . "\n";
  echo '<meta property="og:description" content="' . $desc . '" />' . "\n";
  echo '<meta property="og:url" content="' . esc_url(get_permalink()) . '" />' . "\n";
});

Turn off duplicate output from the theme or a second plugin. Two sets of tags make crawlers use the first one.

Shopify

Your theme may already print Open Graph tags. Open the live page source and search for og:. If they are missing, add them inside the head element of layout/theme.liquid.

layout/theme.liquid
<meta property="og:title" content="{{ page_title | escape }}">
<meta property="og:description" content="{{ shop.description | escape }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name | escape }}">

Static sites

Add the tags to the layout head and fill them from front matter. Give each page its own title and description.

How do I verify the fix?

  1. Run the curl command. You must see og:title and og:description.
  2. Paste the URL into a sharing debugger from the platform that matters to you, such as the Facebook Sharing Debugger. These tools clear cached previews.
  3. Scan the page with SeenLens. The evidence line quotes the og:title it found.

Preview caches can hold the old card for hours or days. Use the platform's debugger to refresh it.

When can I ignore this check?

Pages that people never share, such as account or checkout pages, do not need link previews. Add the tags to every public page you want shared. If a CMS fills the tags per page, a single missing description on a template is still worth a fix. The tags take minutes to add.

Scan your page with SeenLens

Sources