Open Graph tags are present

ab-002539 · site-health-check.seo-discoverability.open-graph

Severity: mediumactive

Why it matters

When a URL is pasted into Slack, Discord, LinkedIn, X, or iMessage, the preview card is generated entirely from Open Graph tags. Without og:title and og:description, shared links render as a naked URL with no thumbnail — dramatically lowering click-through on the most common viral distribution channel. This is findability via social graph rather than search, and it costs nothing to fix but directly gates every shared-link impression.

Severity rationale

Medium because the impact is limited to social-share surfaces rather than search ranking, but preview collapse kills CTR.

Remediation

Add the four core Open Graph tags to the document head with absolute URLs for og:image and og:url. In Next.js App Router, use the metadata API so the framework emits the tags correctly:

// app/layout.tsx
export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Share-surface summary.',
    url: 'https://yoursite.com/',
    images: ['https://yoursite.com/og-image.png'],
  },
};

Validate with the LinkedIn Post Inspector and opengraph.xyz.

Detection

ID: open-graph
Severity: medium
What to look for: Enumerate all Open Graph <meta property="og:..."> tags in the HTML. Count how many of the 4 core OG properties are present: og:title, og:description, og:image, og:url. Extract and record the values of each found tag.
Pass criteria: At least 2 of the 4 core Open Graph properties are present with non-empty values: og:title and og:description are both required at minimum. Report the count of OG tags found (e.g., "3 of 4 core OG properties present").
Fail criteria: Either og:title or og:description is missing or has an empty content attribute value.
Skip (N/A) when: The response Content-Type is not HTML (e.g., JSON API endpoint).
Error when: SPA detected.
Detail on fail: "Missing og:title and og:description — links shared on social media will have no preview"
Remediation: Open Graph tags control how your site appears when shared on social media (Twitter/X, LinkedIn, Discord, Slack). Add the core tags to your <head>:
```
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief summary for social shares">
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:url" content="https://yoursite.com/">
```
In Next.js App Router, use export const metadata = { openGraph: { title, description, images } }. Test with https://cards-dev.twitter.com/validator or the Facebook Sharing Debugger.

Taxons

findability

History

2026-04-18·v1.0.0·Initial import from site-health-check·automated

Why it matters

Remediation

Add the four core Open Graph tags to the document head with absolute URLs for og:image and og:url. In Next.js App Router, use the metadata API so the framework emits the tags correctly:

// app/layout.tsx
export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Share-surface summary.',
    url: 'https://yoursite.com/',
    images: ['https://yoursite.com/og-image.png'],
  },
};

Validate with the LinkedIn Post Inspector and opengraph.xyz.

Detection

ID: open-graph
Severity: medium
What to look for: Enumerate all Open Graph <meta property="og:..."> tags in the HTML. Count how many of the 4 core OG properties are present: og:title, og:description, og:image, og:url. Extract and record the values of each found tag.
Pass criteria: At least 2 of the 4 core Open Graph properties are present with non-empty values: og:title and og:description are both required at minimum. Report the count of OG tags found (e.g., "3 of 4 core OG properties present").
Fail criteria: Either og:title or og:description is missing or has an empty content attribute value.
Skip (N/A) when: The response Content-Type is not HTML (e.g., JSON API endpoint).
Error when: SPA detected.
Detail on fail: "Missing og:title and og:description — links shared on social media will have no preview"
Remediation: Open Graph tags control how your site appears when shared on social media (Twitter/X, LinkedIn, Discord, Slack). Add the core tags to your <head>:
```
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief summary for social shares">
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:url" content="https://yoursite.com/">
```
In Next.js App Router, use export const metadata = { openGraph: { title, description, images } }. Test with https://cards-dev.twitter.com/validator or the Facebook Sharing Debugger.