Skip to content
Browse all guides

Issue #97 · important

Issue 97

What is this issue?

Open Graph (OG) tags are meta tags that control how your web pages appear when shared on social media platforms like Facebook, LinkedIn, and X (Twitter). They define the title, description, image, and other metadata that social platforms display in link previews.

This issue checks whether your page has the essential Open Graph tags implemented. A passing implementation must include:

  • og:title - The title of your page
  • og:description - A brief description
  • og:image - An image to display
  • og:url - The canonical URL of the page
  • og:type - The type of content (e.g., website, article)

Example of passing implementation:

<meta property="og:title" content="My Awesome Page Title" />
<meta
  property="og:description"
  content="A compelling description of my page content"
/>
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

Why does it matter?

Open Graph tags are crucial for social media visibility and engagement:

  • Click-through rates: Pages with proper OG tags get up to 3x higher CTR when shared on social platforms
  • Brand consistency: Ensures your content appears exactly as intended across all social channels
  • Crawlability: Social media crawlers rely on these tags to understand and display your content
  • AI Search / AEO: AI systems use OG tags to understand page context and relationships

Without OG tags, social platforms will attempt to auto-generate previews, often resulting in:

  • Missing or irrelevant images
  • Truncated or incorrect titles
  • Poor descriptions pulled from random page content

Resolving this issue improves your social media presence and contributes to a higher overall SEO health score by ensuring your content is properly represented across all sharing platforms.

How to fix it

  1. Add required OG tags to your HTML <head> section:

    • og:title - Keep under 60 characters for optimal display
    • og:description - Aim for 150-200 characters
    • og:image - Use images at least 1200×630 pixels for best results
    • og:url - Use the canonical URL of the page
    • og:type - Use "website" for general pages, "article" for blog posts

  2. Test your implementation:

    • Use Facebook Sharing Debugger
    • Use LinkedIn Post Inspector
    • Validate with social media preview tools

  3. Ensure images are accessible:

    • Use absolute URLs (starting with https://)
    • Host images on a reliable CDN
    • Avoid images that require authentication to access

  4. Update dynamically for each page:

    • Don't use the same OG tags across all pages
    • Customize per-page titles, descriptions, and images

Examples

Example 1: Missing Open Graph Tags

Problematic state (what fails):

<html>
  <head>
    <title>My Page</title>
    <!-- No OG tags present -->
  </head>
  <body>
    <h1>Welcome to my page</h1>
  </body>
</html>

Corrected state (what passes):

<html>
  <head>
    <title>My Page</title>
    <meta property="og:title" content="My Page" />
    <meta
      property="og:description"
      content="Welcome to my page with all the details"
    />
    <meta property="og:image" content="https://example.com/image.jpg" />
    <meta property="og:url" content="https://example.com/page" />
    <meta property="og:type" content="website" />
  </head>
  <body>
    <h1>Welcome to my page</h1>
  </body>
</html>

Example 2: Incomplete Open Graph Tags

Problematic state (what fails):

<meta property="og:title" content="My Page" />
<!-- Missing og:description, og:image, og:url, og:type -->

Corrected state (what passes):

<meta property="og:title" content="My Page" />
<meta property="og:description" content="Complete description here" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

How PixyScan detects this

PixyScan checks for Open Graph tags by:

  1. Fetching the page HTML after following all redirects
  2. Parsing the <head> section to extract meta tags with property attributes starting with og:
  3. Checking for required tags: Verifies that og:title, og:description, og:image, og:url, and og:type are present
  4. Validating content: Ensures tags exist and have non-empty content values
  5. Flagging the issue if any required OG tag is missing or empty

The detection is performed on the raw HTML response without JavaScript execution, matching how social media crawlers see your pages.

References