Do Open Graph tags affect SEO?

Not directly — search engines like Google don't use OG tags for ranking. But they affect click-through rates on social platforms and messaging apps, which can drive traffic that indirectly signals relevance. Think of them as conversion optimization for shared links.

How often do platforms re-scrape Open Graph tags?

It varies. Facebook caches for up to 30 days. LinkedIn can cache for a week or more. Slack re-fetches each time a link is posted in a channel, so it's usually fresh. Always use the platform's debugger tool to force a re-scrape after updating tags.

Can I use a different image for Twitter than for other platforms?

Yes. Set og:image for Facebook, LinkedIn, Discord, and Slack. Then set a separate twitter:image for Twitter/X. They can point to different files — useful if you want a square crop for Twitter and a wide 1200×630 for everything else.

What happens if I don't add OG tags at all?

The platform scrapes your page and guesses. It might pull the page title from your <title> tag, grab the first paragraph of text as a description, and pick a random image from the page — often a logo, ad unit, or icon. The result is usually wrong and rarely clickable.

Do Open Graph tags work on single-page apps (SPAs)?

Only if the OG tags are present in the server-rendered HTML. Platforms don't execute JavaScript when scraping — they read the raw HTML response. If your SPA renders content client-side only, OG tags in that content won't be seen. Use server-side rendering (SSR) or static generation to ensure the tags are in the initial HTML payload.

لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

Open Graph Tags — Stop Your Links Looking Terrible on Slack

نُشرت في مايو 23, 2026

Open Graph tags control the image, title, and description shown when you share links on Slack, LinkedIn, Twitter, and Discord. Learn the 6 essential tags, how to size og:image correctly, and how to test that your previews actually work.

Open Graph Tags — Stop Your Links Looking Terrible on Slack 1

إعلان · حذف؟

You paste a URL into Slack. Instead of a rich preview with a big image, title, and a two-line summary, you get a bare link — or a random sentence pulled from the middle of the page. Your teammates click anyway, but they had no idea what they were about to see.

Open Graph tags fix that. They’re a handful of <meta> lines in your page’s <head> that tell Slack, LinkedIn, Twitter, Discord, and every other platform exactly what to show when someone shares your URL. Leave them out and the platform guesses — badly.

What Are Open Graph Tags?

Open Graph (OG) is a protocol Facebook introduced in 2010 so that web pages could control how they appear when shared on the platform. The idea was simple: add structured metadata to the HTML <head> and platforms can pull a proper title, description, and image instead of guessing.

It worked so well that every major platform adopted it. Today, Slack, LinkedIn, Twitter/X, Discord, iMessage, WhatsApp, and Telegram all read OG tags when generating link previews. Facebook still uses them too.

The 6 Essential Open Graph Tags

These six tags belong on every page you want to share. Skip any of them and platforms will fill in the blanks themselves — usually wrong.

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

og:title — The headline shown in the preview. Keep it under 70 characters. Don’t just copy your <title> tag — OG titles can be punchier since they don’t need to include the site name.
og:description — The two-line summary under the title. 150–200 characters is the sweet spot. Make it useful, not vague.
og:image — The image shown in the preview card. This is the tag that makes or breaks your link’s appearance. More on sizing below.
og:url — The canonical URL for this page. Always use the full URL including https://. This prevents duplicate previews when the same content is linked from different URLs.
og:type — Use website for most pages. Use article for blog posts, paired with article:published_time و article:author.
og:site_name — Your brand name. Some platforms show it separately from the title, so keep it short.

Twitter/X Card Tags

Twitter has its own system called Twitter Cards. The good news: it falls back to OG tags if Twitter Card tags are missing. The bad news: the fallback isn’t perfect, and Twitter won’t show large image cards unless you explicitly opt in.

Add these alongside your OG tags:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />

The critical tag is twitter:card. Set it to summary_large_image and you get the big card. Set it to summary and you get a small thumbnail. Without this tag, Twitter defaults to summary and your carefully crafted OG image disappears.

og:image — The Tag That Does the Heavy Lifting

If there’s one tag to get right, it’s og:image. A blank link preview might still get clicked. A preview with a blurry, stretched, or missing image won’t.

Recommended dimensions

1200 × 630 pixels — the universal standard that works across Facebook, LinkedIn, Twitter, and Slack
Minimum: 600 × 315 pixels — anything smaller and some platforms skip the image entirely
File size: under 8 MB — Facebook and most platforms reject larger files
Format: JPG or PNG — JPG for photos, PNG for graphics with text

Keep key content away from the edges

Different platforms crop OG images differently. Slack shows a wide card, LinkedIn crops to square in some contexts, and mobile apps do their own thing. Keep your logo, text, and focal point within a centered safe zone — roughly the inner 80% of the image — to avoid anything important being cut off.

How to Add Open Graph Tags to Your Site

Plain HTML sites

Paste the tags inside the <head> of your HTML, before the closing </head> tag:

<head>
  <!-- your existing tags -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description." />
  <meta property="og:image" content="https://yoursite.com/og.jpg" />
  <meta property="og:url" content="https://yoursite.com/page/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

WordPress

If you’re running WordPress, you don’t need to touch code. Plugins like Yoast SEO, Rank Math, or All in One SEO handle OG tags out of the box. After installing, look for the “Social” section in the post/page editor — you can set a custom OG title, description, and image for each piece of content independently from the SEO title and meta description.

Next.js and React apps

In Next.js App Router, use the built-in metadata export in your page.tsx:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
    url: 'https://yoursite.com/page/',
    type: 'website',
    siteName: 'Site Name',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
  },
};

How to Test Your Open Graph Tags

Don’t assume your tags are working — platforms cache previews aggressively and the cached version might be days old. Use these tools to check and force a refresh:

Facebook Sharing Debugger — shows exactly what Facebook reads and lets you clear the cache and re-scrape
LinkedIn Post Inspector — LinkedIn caches hard, so this is the only reliable way to force a refresh
Twitter Card Validator — preview how your card will look on Twitter/X
مدقق Open Graph — check any URL’s OG tags directly from your browser without logging into any platform

ال مدقق Open Graph at IO Tools is useful for quick audits — paste any URL and it fetches all OG and Twitter Card tags in one view, so you can spot missing tags without jumping between platform-specific debuggers.

If you need to generate clean, correctly formatted OG tags from scratch, the مولد علامة HTML outputs the exact markup you need for any page.

5 Common Open Graph Mistakes

Using a relative image URL — og:image must be an absolute URL (https://yoursite.com/image.jpg). Relative paths like /images/og.jpg silently fail and the image won’t load.
One OG image for the entire site — A single fallback image works for the homepage, but blog posts, product pages, and landing pages each deserve their own. A generic site-wide image kills the sense of context that makes previews clickable.
Forgetting twitter:card — Without it, Twitter defaults to a small thumbnail even if you have a perfect 1200×630 OG image. Always add it explicitly.
Publishing changes without refreshing the cache — Platforms cache OG data aggressively. After updating tags, use the platform’s debugger to force a re-scrape, or the old preview will keep showing up for days.
Writing an og:description that reads like a title — Use the description field to add information that isn’t in the title: what the reader will learn, who it’s for, what problem it solves.