HomeDeveloper ToolsMeta Tag Generator

seo tags. one form.

generate SEO meta tags, Open Graph, and Twitter Card HTML. live Google SERP preview. copy the snippet and paste into your site.

Basic SEO
0/60
0/160
Open Graph
Twitter Card
Google Preview

Page Title

https://example.com

Add a meta description to see how it appears in Google search results.

generated html
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

What this tool does

Fill in your page title, description, image, and a few related fields, and get a complete <meta> block ready to drop into your HTML head — covering search results, Open Graph link previews, and Twitter Cards in one set.

The four meta tags that matter

Your <head> can contain dozens of meta tags, but four of them carry almost all the weight:

html
<title>Page Title — Brand</title>
<meta name="description" content="One sentence, 150-160 chars max." />
<meta property="og:image" content="https://example.com/preview.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
  • Title — what shows up in browser tabs, search results, and bookmark labels. The single biggest SEO signal of the four.
  • Description — the snippet under the title in search results. Does not directly affect ranking but heavily affects click-through rate.
  • og:image — the preview image when your page is shared in chat or social. The thing most likely to be missing.
  • viewport — the directive that makes your site responsive on mobile. Missing it is the original sin of every mobile-broken site.

Title length and structure

Google generally displays the first 50-60 characters of a title before truncating with an ellipsis. The rest of the text still counts for ranking, but it does not show in the SERP. Front-load the words that matter.

A common pattern: Specific Page — Brand for inner pages, Brand — One-line Pitch for the homepage. The em-dash (or pipe) separator is cosmetic; pick one and use it consistently across the site.

Description length and purpose

Sweet spot is 150-160 characters. Longer gets truncated; shorter wastes the slot. The description is your sales pitch in the search result — it should answer “why click this over the other ten options on the page.”

Worth knowing: Google often ignores your description and builds its own snippet from page content if it thinks that snippet better matches the search query. You cannot force Google to use your description. You can write one good enough that it is the better choice.

OG image: the highest-leverage tag

For social sharing — which is where a lot of organic traffic actually comes from in 2026 — the OG image is the single most important field. A great image with weak title still gets clicks; a weak image kills the share regardless of how good the headline is.

Specs that work everywhere:

  • Dimensions — 1200×630 (1.91:1 ratio).
  • Format — JPG or PNG. WebP works on most platforms but iMessage has had compatibility issues. JPG is the safest universal default.
  • Size — under 5MB. Most platforms have their own caps that do not match each other; staying under 5MB clears them all.
  • Absolute URL — must start with https://. Relative paths break previews.

Less-essential tags worth including

html
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
  • robots — explicit signal that this page should be indexed. Default is index/follow but being explicit helps.
  • canonical— points search engines at the “official” URL when the same content might be reachable at multiple paths. Critical for sites with sorted/filtered list pages.
  • og:url — the canonical URL for social sharing. Some platforms attribute shares to this URL even if the actual link was a tracker variant.

Verify before assuming it works

After adding the tags, paste your URL into the OG preview tool to confirm the cards actually render correctly. The tags are a promise; the preview tool is the proof.

What this generates

The tool outputs the complete block — Open Graph, Twitter Card, canonical, viewport, and robots — based on the fields you fill in. Drop it into your HTML head and verify with the preview tool above.

What this tool does

Fill in your page title, description, image, and a few related fields, and get a complete <meta> block ready to drop into your HTML head — covering search results, Open Graph link previews, and Twitter Cards in one set.

The four meta tags that matter

Your <head> can contain dozens of meta tags, but four of them carry almost all the weight:

html
<title>Page Title — Brand</title>
<meta name="description" content="One sentence, 150-160 chars max." />
<meta property="og:image" content="https://example.com/preview.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
  • Title — what shows up in browser tabs, search results, and bookmark labels. The single biggest SEO signal of the four.
  • Description — the snippet under the title in search results. Does not directly affect ranking but heavily affects click-through rate.
  • og:image — the preview image when your page is shared in chat or social. The thing most likely to be missing.
  • viewport — the directive that makes your site responsive on mobile. Missing it is the original sin of every mobile-broken site.

Title length and structure

Google generally displays the first 50-60 characters of a title before truncating with an ellipsis. The rest of the text still counts for ranking, but it does not show in the SERP. Front-load the words that matter.

A common pattern: Specific Page — Brand for inner pages, Brand — One-line Pitch for the homepage. The em-dash (or pipe) separator is cosmetic; pick one and use it consistently across the site.

Description length and purpose

Sweet spot is 150-160 characters. Longer gets truncated; shorter wastes the slot. The description is your sales pitch in the search result — it should answer “why click this over the other ten options on the page.”

Worth knowing: Google often ignores your description and builds its own snippet from page content if it thinks that snippet better matches the search query. You cannot force Google to use your description. You can write one good enough that it is the better choice.

OG image: the highest-leverage tag

For social sharing — which is where a lot of organic traffic actually comes from in 2026 — the OG image is the single most important field. A great image with weak title still gets clicks; a weak image kills the share regardless of how good the headline is.

Specs that work everywhere:

  • Dimensions — 1200×630 (1.91:1 ratio).
  • Format — JPG or PNG. WebP works on most platforms but iMessage has had compatibility issues. JPG is the safest universal default.
  • Size — under 5MB. Most platforms have their own caps that do not match each other; staying under 5MB clears them all.
  • Absolute URL — must start with https://. Relative paths break previews.

Less-essential tags worth including

html
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
  • robots — explicit signal that this page should be indexed. Default is index/follow but being explicit helps.
  • canonical— points search engines at the “official” URL when the same content might be reachable at multiple paths. Critical for sites with sorted/filtered list pages.
  • og:url — the canonical URL for social sharing. Some platforms attribute shares to this URL even if the actual link was a tracker variant.

Verify before assuming it works

After adding the tags, paste your URL into the OG preview tool to confirm the cards actually render correctly. The tags are a promise; the preview tool is the proof.

What this generates

The tool outputs the complete block — Open Graph, Twitter Card, canonical, viewport, and robots — based on the fields you fill in. Drop it into your HTML head and verify with the preview tool above.

more free tools

PDF utilities, image tools, developer helpers — all free, no signup.

Something wrong?