Open Graph Meta Tag Generator

Enter a page's title, description, URL and share image once and get its search and social tags as one block of HTML to paste into the head.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Length check

Title length: 44 chars; Google typically shows up to ~60 characters.
Description length: 125 chars; Aim for roughly 140-160 characters.

Google search preview

Meta tags

<title>Free Online Invoice Generator — PlainToolbox</title>
<meta name="description" content="Create a professional invoice with line items, tax and totals in seconds — free, no sign-up, and nothing leaves your browser.">
<link rel="canonical" href="https://example.com/invoice-generator">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Invoice Generator — PlainToolbox">
<meta property="og:description" content="Create a professional invoice with line items, tax and totals in seconds — free, no sign-up, and nothing leaves your browser.">
<meta property="og:url" content="https://example.com/invoice-generator">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Example Site">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Invoice Generator — PlainToolbox">
<meta name="twitter:description" content="Create a professional invoice with line items, tax and totals in seconds — free, no sign-up, and nothing leaves your browser.">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:site" content="@example">

Quick answers

What are Open Graph meta tags?: They are meta elements in a page's head, written as meta property="og:..." content="...", that tell social networks and chat apps what title, description, image and URL to show when the page is shared. The protocol's four required properties are og:title, og:type, og:image and og:url.
What size should an og:image be?: 1200 by 630 pixels, a ratio of about 1.91 to 1, is the size most platforms recommend and it works for large cards on Facebook, LinkedIn and X. Keep the file under 5 MB, use JPG or PNG, and give the full https:// address of the image.
Where do I put meta tags in HTML?: Inside the head element of the page, before the closing head tag. They must be in the HTML the server sends: tags added later by JavaScript are missed by most social network crawlers, which do not run scripts.
Do I need Twitter Card tags if I already have Open Graph tags?: You need at least twitter:card, which has no Open Graph equivalent and selects the card layout. X falls back to og:title, og:description and og:image when the matching twitter: tags are absent. This generator writes both sets so nothing depends on the fallback.
How long should a title tag and meta description be?: Roughly 50 to 60 characters for a title and 140 to 160 for a description. Search engines cut by pixel width, not by character count, so these are guides. Longer text is not penalised; it is shortened with an ellipsis in the result.
What does the robots meta tag do?: It tells search engine crawlers whether to list the page and follow its links. index, follow is the normal state and is also the default when the tag is absent. noindex, nofollow asks them to keep the page out of results.

What Meta Tag & Open Graph Generator does

This generator writes up to 15 tags from seven fields: the title element, meta description, canonical link and robots tag that search engines read, six Open Graph tags (og:type, og:title, og:description, og:url, og:image, og:site_name) that Facebook, LinkedIn, WhatsApp, Slack and Discord use for link previews, and five Twitter Card tags for X. The same title and description are reused in all three groups. A length check counts the characters in each, and a search preview shortens a title longer than 60 characters and a description longer than 160, ending each with an ellipsis. Fields left blank are left out, so the minimum output is nine tags.

Every tag the generator writes and which field fills it

Tag	Filled from	Left out when
<title>	Page title	Never; the title is required
<meta name="description">	Meta description	Never; the description is required
<link rel="canonical">	Page URL	Page URL is empty
<meta name="robots">	index, follow, or noindex, nofollow when the box is ticked	Never
og:type	Always website	Never
og:title	Page title	Never
og:description	Meta description	Never
og:url	Page URL	Page URL is empty
og:image	Share image URL	Share image URL is empty
og:site_name	Site name	Site name is empty
twitter:card	Always summary_large_image	Never
twitter:title	Page title	Never
twitter:description	Meta description	Never
twitter:image	Share image URL	Share image URL is empty
twitter:site	Twitter/X handle, with @ added if you left it off	Handle is empty

Open Graph tags use the property attribute and Twitter Card tags use the name attribute. The generator writes each in the correct form; mixing them up is a common reason a preview fails.

Generated meta tags: worked examples

A page with no share image, site name or handle

Page title: Handmade Oak Desks | Fenwick Furniture. Meta description: Solid oak desks built to order in Leeds. Choose the size, finish and drawer layout, see the price as you configure, and get delivery in four weeks. Page URL: https://www.fenwick.example/desks/. Other fields empty.

Eleven tags: title, description, canonical, robots index, follow, then og:type, og:title, og:description, og:url, then twitter:card, twitter:title and twitter:description. Length check: Title length 38 chars, Description length 147 chars. Preview address line: www.fenwick.example › desks.

Without an image, shares show a text-only card. Add a Share image URL before publishing if the page will be shared.

A thank-you page hidden from search

Page title: Order Confirmed. Meta description: Thanks for your order. Page URL: https://shop.example/thanks. Site name: Shop. Share image URL: https://shop.example/og.png. Twitter/X handle: shop. Block search engines (noindex) ticked.

All 15 tags, with <meta name="robots" content="noindex, nofollow"> and <meta name="twitter:site" content="@shop">. Length check: Title length 15 chars, Description length 22 chars.

The @ was added to the handle automatically.

Special characters in the text

Page title: Tom & Jerry's "Best" <Tips>. Page URL: https://example.com/a?b=1&c=2

<title>Tom & Jerry's "Best" <Tips></title> and <link rel="canonical" href="https://example.com/a?b=1&c=2">

Ampersands, angle brackets and double quotes are escaped so they cannot break the attribute or the markup. Browsers and crawlers read them back as the original characters.

A title and description that are too long

An 86-character title, The Complete Beginner's Guide to Growing Tomatoes in Small Urban Gardens and Balconies, with a 207-character description

Length check: Title length 86 chars, Description length 207 chars. Preview title: The Complete Beginner's Guide to Growing Tomatoes in Small… and the description is cut after 159 characters with an ellipsis.

The tags themselves keep the full text. Only the preview is shortened, to show what a searcher is likely to see.

Share image sizes and text limits by platform

One 1200 by 630 pixel image satisfies every row below.

Where it appears	Reads	Image guidance	Notes
Facebook, Messenger	og: tags	1200 x 630 px recommended, 1.91:1; under 8 MB	Images below 600 px wide are shown as a small thumbnail
LinkedIn	og: tags	1200 x 627 px, 1.91:1	Caches previews for about a week unless refreshed
X (Twitter), large card	twitter: tags, then og: fallback	2:1 ratio, 300 x 157 px minimum, under 5 MB; JPG, PNG, WEBP or GIF	Selected by twitter:card summary_large_image, which this tool always writes
WhatsApp, Slack, Discord, iMessage	og: tags	Same 1200 x 630 px image	Smaller files load more reliably in chat previews
Search results	title and meta description	None	About 60 characters of title and 160 of description are shown on desktop

Platform guidance changes from time to time; treat the figures as the commonly published recommendations and confirm with each platform's own documentation for anything critical.

Canonical URL, og:url and why they should match

The Page URL field feeds two tags. The canonical link tells search engines which address is the main version of a page when the same content can be reached at several, for example with and without tracking parameters or a trailing slash. og:url tells social platforms which address to attach likes and shares to. Pointing both at one clean, absolute URL keeps those signals in one place.

Use the exact form you want indexed: the https scheme, your preferred host with or without www, and no campaign parameters. The generator does not tidy the value; whatever you type is what both tags contain, apart from the escaping of ampersands.

The address line in the search preview is built from the same field by removing the scheme and a trailing slash and replacing each remaining slash with a chevron, so https://example.com/blog/tomatoes/ is shown as example.com › blog › tomatoes.

After you paste the tags: how to check they work

View the page source, not the browser's element inspector, and confirm the tags are in the head of the HTML the server returns.
Check there is only one title element, one meta description and one canonical link. Templates and plugins often add their own, and duplicates give unpredictable results.
Open the share image URL in a private browser window. If it needs a login, redirects, or is blocked by robots.txt, platforms cannot fetch it.
Run the URL through each network's own preview tool, such as Facebook's Sharing Debugger or LinkedIn's Post Inspector, which also force a fresh fetch.
If an old preview keeps appearing, the platform has cached it. Re-scrape with the tools above, or change the image file name so it counts as a new image.
If you ticked noindex for a staging copy, make sure that tag does not travel to the live page.

Tags this generator leaves out

The output covers the common case of a standard web page. Add these by hand if you need them:

og:image:width, og:image:height and og:image:alt, which help platforms lay out the card and describe the image.
og:type values other than website, such as article or product, and the article:published_time and article:author tags that go with them.
og:locale for pages not in US English.
twitter:creator for the author's handle, and the small summary card type.
A separate social title or description. The page title and meta description are reused for the og: and twitter: tags.
charset, viewport, theme-color and favicon links, which belong in the head but are not about search or sharing.
The keywords meta tag, which major search engines ignore.

How to use it

1
Enter the Page title and Meta description. Both are required; the Length check shows their character counts as you go.
2
Fill in Page URL with the full canonical address, including https://. It is used for both the canonical link and og:url.
3
Add Site name and Share image URL. Use an absolute image URL starting with https://; leave the field empty to omit og:image and twitter:image.
4
Type your Twitter/X handle with or without the @ sign, or clear the field to leave out twitter:site.
5
Tick Block search engines (noindex) only for pages that should stay out of search results.
6
Copy the Meta tags block, or download meta-tags.html, and paste it inside the head element of the page.

Common questions

Is anything I type sent to a server?

No. The tags and the preview are built in your browser from the fields on the page. The generator does not fetch your URL or image either, so it cannot tell you whether they exist; it only writes the markup.

What is the difference between Open Graph and Twitter Card tags?

Open Graph is the protocol Facebook introduced and most platforms now read: LinkedIn, WhatsApp, Slack, Discord and others. Twitter Cards are X's own set, written with name="twitter:...". X reads Open Graph values for title, description and image if its own are missing, but still wants twitter:card.

Why does my link preview not show an image?

The usual causes are a relative image path instead of a full https:// URL, an image the crawler cannot reach, a file that is too large or too small, tags injected by JavaScript after load, or a cached older preview. Work through the checks listed above in that order.

Does a title over 60 characters hurt the page?

Not by itself. Length is not something search engines penalise; the visible title is simply cut off, which can hide the part that would have earned the click. Put the words that matter most at the start.

Will the search preview match the real result exactly?

No. It shows your tags cut at fixed character counts, while real results are cut by pixel width, vary by device, and may use a rewritten title or a passage from the page in place of your description. Treat it as a length check for the text you control.

Should the Open Graph title be the same as the page title?

It can be, and this generator makes them identical. Some sites prefer a shorter og:title without the brand suffix, since platforms show the site name separately. If you want that, edit the og:title and twitter:title lines after copying.

When should I use noindex?

For pages that should not appear in search at all: staging copies, internal tools, order confirmations, thin filter or search-result pages. Leave it off everything you want found. Note that the box sets nofollow as well, which also asks crawlers not to follow the page's links.

Do Open Graph tags change how a page appears in search results?

No. They are read by social platforms and chat apps. Search engines build their listings from the title element, the meta description and the page content. The effect of og: tags is on how a shared link looks, and so on how many people click it.

How do I add these tags in WordPress, Next.js or another framework?

Most systems generate head tags for you. In WordPress a plugin or the theme sets them per page; in Next.js the metadata export does. Use the generated block as a reference for the values, and avoid pasting it in as well, or you will end up with duplicates.