Why do I need Open Graph tags separately from meta description?

The standard ` ` tag is read by Google and other search engines for SERP snippets. Open Graph tags (`og:title`, `og:description`, `og:image`) are read by Facebook, LinkedIn, Slack, and Discord for link previews. Twitter uses its own `twitter:*` namespace. Without OG, social shares get a broken or missing preview card.

What image size works for OG and Twitter?

1200×630 px is the sweet spot — large enough for high-DPI displays, small enough to load fast, matches the 1.91:1 aspect ratio Facebook crops to. For Twitter summary_large_image cards, this size also works. Avoid images smaller than 600×314 — Facebook will fall back to a small thumbnail.

Should the canonical URL include trailing slashes or query strings?

Include trailing slashes if your site serves content at `/blog/` not `/blog` (pick one and be consistent site-wide). Never include tracking query strings like `?utm_source=...` in the canonical — you'd defeat the purpose of preventing duplicate content.

HTML Meta Tag Generator (SEO, OG, Twitter)

SEO & Marketing· 10 tools

Free HTML meta tag generator for SEO and social sharing. Fill in your page's title, description, canonical URL, and social preview image, and get a ready-to-paste `<head>` snippet covering standard SEO tags, Open Graph (Facebook, LinkedIn), Twitter Card, and robots directives. Live character counts flag titles over 60 chars and descriptions over 160 chars so your snippet doesn't get truncated in search results.

Page title15 / 60

Description78 / 160

Canonical URL

Social preview image (1200×630)

Site name

Author (optional)

Twitter handle

Twitter card type

Allow search engines to index (uncheck for noindex, nofollow)

<head> snippet

<title>My Awesome Page</title>
<meta name="description" content="A clear, compelling description of the page that tells users what they'll get." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph -->
<meta property="og:title" content="My Awesome Page" />
<meta property="og:description" content="A clear, compelling description of the page that tells users what they'll get." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example Site" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page" />
<meta name="twitter:description" content="A clear, compelling description of the page that tells users what they'll get." />
<meta name="twitter:image" content="https://example.com/og.png" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@example" />

Frequently Asked Questions

Related Tools