⚠ Warning Image

OG Image Not Using HTTPS — Security and Compatibility Issues

Some platforms may block non-HTTPS images. Use HTTPS for your OG image.

What's the issue?

Your og:image URL uses HTTP instead of HTTPS. In today's security-conscious web, many platforms block or refuse to load images served over insecure HTTP connections.

Why HTTPS matters for OG images

Platform compatibility

Facebook — Strongly prefers HTTPS; HTTP images may not display in previews
Twitter/X — Requires HTTPS for card images
LinkedIn — May block HTTP images
Discord — Shows a warning for mixed content
Slack — May not unfurl HTTP images

Security

HTTP images can be intercepted and modified by man-in-the-middle attacks
Browsers display "mixed content" warnings when HTTPS pages load HTTP resources
Users are increasingly aware of security indicators

SEO

Google favors HTTPS sites and resources
Mixed content issues can negatively impact your search rankings

How to fix it

Simply change your image URL from HTTP to HTTPS:

<!-- Before -->
<meta property="og:image" content="http://yoursite.com/og-image.jpg" />

<!-- After -->
<meta property="og:image" content="https://yoursite.com/og-image.jpg" />

What if your server doesn't support HTTPS?

Get a free SSL certificate — Use Let's Encrypt for a free, automated SSL certificate
Use a CDN — Services like Cloudflare, Vercel, or Netlify provide free HTTPS
Use an image hosting service — Platforms like Cloudinary, Imgix, or AWS S3 serve images over HTTPS by default
Set up redirects — Configure your server to redirect HTTP to HTTPS

Additional tip: Use og:image:secure_url

For maximum compatibility, you can also specify the HTTPS URL explicitly:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:secure_url" content="https://yoursite.com/og-image.jpg" />

Check your Open Graph tags

Related articles

Missing og:title

The og:title tag is essential for social sharing. Without it, platforms will use the page title or URL.

og:title Is Too Long

Titles longer than 60 characters may be truncated on social platforms.

og:title Is Too Short

Short titles may not be descriptive enough for social sharing.

Missing og:description

The og:description tag provides a summary of the page content for social platforms.

og:description Is Too Long

Descriptions over 160 characters may be truncated on social platforms.

og:description Is Too Short

Short descriptions miss the opportunity to engage users.

OpenGraph MCP Server

Inspect OG tags directly from your editor

The OpenGraph MCP server lets you inspect and analyze Open Graph meta tags directly from your AI-powered editor or assistant. It provides two tools:

inspect_og — Fetch and score OG tags for any URL
suggest_og_tags — Generate recommended meta tag HTML

Add the server to your project's .cursor/mcp.json file:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Restart Cursor after adding the configuration.

Add to your .vscode/mcp.json file (requires GitHub Copilot extension):

{
  "servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Make sure you have GitHub Copilot with MCP support enabled.

Add to your claude_desktop_config.json file:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

The config file is at ~/Library/Application Support/Claude/claude_desktop_config.json on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows.

Add to your ~/.codeium/windsurf/mcp_config.json file:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Restart Windsurf after modifying the configuration.

Add to your Zed settings.json under context_servers:

{
  "context_servers": {
    "opengraph": {
      "command": {
        "path": "npx",
        "args": ["-y", "opengraph-mcp"]
      }
    }
  }
}

Open settings with Cmd+, and add the configuration.

Usage examples

▶ "Inspect the OG tags of github.com"

▶ "Suggest OG meta tags for my website https://example.com"

▶ "Check if my blog post has proper Open Graph tags"