Meta & OG tag generator

Generate title, description, OG and Twitter card meta tags.

You paste a link into Slack or post it on social media and the preview comes back blank, or worse, with your site's navigation as the description. That happens because the page is missing its Open Graph tags. Fill in the fields here and the tool assembles the full set — standard meta, Open Graph and Twitter Card — ready to paste into the head of your page.

How it works

What the fields produce

Page title and Description feed both the standard search-result tags and the social preview. Page URL becomes the canonical address, Featured image URL becomes the preview picture, and Site name and Twitter handle fill in the attribution shown next to the card. Press Generate, then Copy.

Keep the text within display limits

TagPractical lengthWhat happens if you exceed it
Title50–60 charactersTruncated with an ellipsis in results
Description150–160 charactersCut off mid-sentence
OG titleUp to ~60 charactersWraps or clips in the preview card

Search engines sometimes rewrite the description to match a query, so treat these as targets rather than guarantees.

The image is the part that usually breaks

og:image must be an absolute URL, not a relative path, and it must be publicly fetchable — a crawler cannot see anything behind a login or on a staging server with basic auth. 1200 × 630 pixels is the widely used size and gives a clean wide card on most platforms.

Paste it in the right place, once

The block goes inside <head>, before the closing tag. Give each page its own set; copying one page's tags site-wide means every share looks identical and search snippets duplicate. If you change the tags later, platforms will keep serving the cached old preview until you force a re-scrape with their own debugging tool.

Note that the keywords meta tag is deliberately not generated — search engines stopped using it long ago.

Terms explained

Open Graph (og:)
A tagging convention that originated at Facebook and is now read by most social networks and messaging apps to build a link preview card.
Twitter Card
X/Twitter's own preview tags. summary_large_image renders a wide banner; summary renders a small square thumbnail beside the text.
Canonical URL
The address you want treated as the original when the same content is reachable through several URLs, such as with tracking parameters attached.
og:image
The picture shown in the link preview. It has to be an absolute, publicly reachable URL — relative paths and login-protected files silently fail.
Meta description
The summary text a search engine may display under your title. It is not a ranking signal, but it strongly affects whether anyone clicks.

Frequently asked questions

How long should the title and description be?

Roughly 50–60 characters for the title and 150–160 for the description keeps both from being cut off in most search results. Search engines may rewrite the description to fit the query, so consider these targets rather than fixed rules.

Why does my link preview still show the old image?

Social platforms cache previews aggressively. After updating the tags, force a refresh with the platform's own tool — the Facebook Sharing Debugger, the X Card Validator or the LinkedIn Post Inspector — and the next share will pick up the new version.

Does the keywords meta tag do anything?

No. Google confirmed years ago that it ignores the keywords meta tag, and it is left out of the generated block on purpose. Your title, description and actual page content are what matter.

What image size should I use?

1200 × 630 pixels is the common recommendation and produces a clean 1.91:1 wide card across most platforms. Use an absolute https URL, keep the file size modest, and make sure the file is reachable without logging in.

Where exactly do the tags go?

Inside the <head> element of the page, before </head>. Every page needs its own set — if you paste one page's tags across the whole site, every shared link will show the same title and image.