Meta Tag Generator_
Fill in the fields and get the meta, Open Graph and Twitter card tags, with a preview of how the page looks as a search result and as a link card. Or paste the tags you already have and it will check them instead.
The checks are the point. A relative og:image is the single commonest reason a link preview has no picture, and nothing on your page tells you — the tag looks right, it validates, and the scraper quietly finds nothing.
- Input
- Title, description, URL and image, or a block of tags pasted from an existing page.
- Output
- The tags in the order they should appear, plus a search-result and link-card preview and a list of anything wrong.
- Processing
- Generated and checked in this tab. No page is fetched, so the checks are about what your tags SAY rather than what a scraper found.
- Limits
- It cannot fetch your image to measure it. Give the dimensions to the checker below and it will judge them against the documented platform rules.
- Why previews break
- Four causes account for nearly all of it: a relative og:image, an image under 200x200, missing og:image:width and height, and tags rendered by client-side JavaScript that scrapers never run.
Why the link preview has no picture
A relative og:image finds nothing
<meta property="og:image" content="/images/og.png"> is the commonest broken tag on the web. Every scraper requires an absolute URL, and a path silently resolves to nothing at all — no error, no fallback, just a card with no image. It looks correct in the page source and it validates as HTML, which is exactly why it survives. Give the full https:// address and the problem disappears.
1200 by 630, and why that number
Cards are laid out at 1.91:1, which is where 1200×630 comes from. Below 200×200 Facebook refuses the image outright. Between that and 600×315 you get a small square thumbnail beside the text rather than a large card, which is usually not what anyone wanted. Twitter's large card wants at least 300×157 and no side over 4096, with a 5 MB ceiling against Facebook's 8 MB. Anything far from 1.91:1 is cropped, normally from the top and bottom, which is how text centred in a square image loses its first and last lines.
The first share is blank without dimensions
When a scraper meets a URL it has never seen, it reads the tags immediately and fetches the image separately. If og:image:width and og:image:height are absent it does not know the shape yet, so the first person to share the link often gets a card with no image while everyone afterwards gets one. Declaring the dimensions removes the round trip. This page emits them automatically whenever there is an image.
Scrapers do not run your JavaScript
Tags injected by a client-side framework after the page loads are invisible to the crawlers that build link previews. They read the HTML the server sent and nothing more. If your tags come from a single-page app with no server rendering, view source rather than the inspector — the inspector shows the DOM after scripts have run, which is not what the scraper saw. That difference has cost more debugging hours than every other cause on this page combined.
Fill in, check, paste into your head
- 01Type a title and description. The counts beside each field turn amber as you approach the point where they get cut off, which is a pixel width rather than a character count.
- 02Give the page URL and an absolute image URL. Both previews update as you type, so you can see the shape of the card before anything ships.
- 03Read the issues under the previews. Errors break the preview outright; warnings degrade it; notes are guidance you can take or leave.
- 04Copy the block and paste it into your
<head>. Already have tags? Use "Paste tags" and it reads them back into the fields to check instead.
Four link previews that went wrong
No image on any platform
The tag is present and looks right in the source.
/images/og.png
https://example.com/images/og.png
A tiny square instead of a banner
The image is valid but too small for a large card.
400×400
1200×630
Blank the first time, fine afterwards
The scraper had not fetched the image when it built the card.
og:image:width and height
1200 and 630
Perfect in the inspector, empty in the wild
A single-page app writes the tags after load.
the server HTML
render the tags server-side
Image sizes, and what each platform does with them
| Size | Facebook and LinkedIn | Twitter / X |
|---|---|---|
1200×630 | The recommended size — a full-width card | Fills a summary_large_image card |
600×315 | The smallest that still gives a large card | Above the 300×157 minimum |
400×400 | Valid, but renders as a small square thumbnail | Renders as a square summary card |
150×150 | Rejected — no image at all | Below the minimum |
| Over 4096px a side | Accepted | Rejected |
| Over 5 MB | Accepted up to 8 MB | Rejected |
| Anything far from 1.91:1 | Cropped, usually top and bottom | Cropped to fit the card |
1.91:1 is the shape cards are laid out for, which is where 1200×630 comes from. Text near the top or bottom edge of a squarer image is the first thing lost.
Which tags are actually read, and by whom
| Tag | Read by | Worth knowing |
|---|---|---|
<title> | Search engines, browsers, every scraper as a fallback | Truncated by pixel width near 580px, not by a character count |
meta description | Search engines | Not a ranking factor, but it is what people read before deciding to click |
og:title, og:description | Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage | Almost everything that renders a link card reads Open Graph |
og:image | The same | Absolute URLs only — the single commonest mistake on this page |
twitter:card | Twitter / X | Without it a card falls back to the small summary layout |
twitter:title and friends | Twitter / X | Optional — Twitter falls back to the Open Graph tags when these are absent |
meta keywords | Nobody | Google stopped using it in 2009 and said so publicly. It is dead weight |
viewport | Mobile browsers | The one meta tag that changes how the page actually renders |
Twitter reads Open Graph when its own tags are missing, so the twitter:* set is worth adding only when you want a different title or image there.
Getting link previews right
- Always use an absolute URL for
og:imageandog:url. If you take one thing from this page, take that one. - Ship
og:image:widthandog:image:heightso the first share of a URL is not blank while the scraper catches up. - Put the important part of the image away from the edges. Cards crop to 1.91:1 and squarer images lose their top and bottom.
- Skip
meta keywordsentirely. It has been ignored since 2009 and its only remaining effect is telling competitors which terms you care about. - View source rather than the inspector when debugging. The inspector shows the DOM after your JavaScript ran; the scraper only ever saw the server HTML.
- Check
robotsbefore every launch. Anoindexleft over from staging is silent, total, and takes weeks to notice.
Where meta tags disappoint
Platforms cache aggressively
Facebook, LinkedIn and Slack all keep a scraped copy of your tags, sometimes for days. Fixing the tag does not fix the card already in circulation — you have to ask the platform to re-scrape through its own debugging tool. Get it right before the link goes out, because afterwards is genuinely harder.
Character counts are approximations
Google truncates titles by pixel width near 580px, so a title of narrow letters survives longer than one of wide ones, and the same character count can fit or not depending on the words. Every number on this page is practical guidance rather than a specification, and it is labelled that way.
A meta description is not a ranking factor
Google has said so repeatedly, and it frequently ignores yours and writes its own from the page text anyway. It is still worth writing, because when it is used it is the sentence that decides whether anybody clicks. Just do not expect it to move a position.
This page cannot see your image
It checks what your tags say, not what is at the other end of the URL. It cannot tell you the file is a 404, the wrong shape, or behind authentication. Put the dimensions into the image checker below for a verdict on the numbers, and use each platform’s own debugger for a verdict on the file.
Tags in the body do not count
Meta tags belong in the <head>. A scraper reads until the head ends and stops, so a tag that has slipped below it — commonly by being injected next to the content it describes — is never seen at all.
What gets generated, and what gets checked
- Output order
- charset first, because it must fall within the first 1024 bytes of the document; then viewport; then title, description and canonical; then the Open Graph block; then Twitter
- Escaping
- Every attribute value is escaped for &, <, > and the double quote, so a title containing a quotation mark cannot break out of the attribute. A test asserts each value unescapes back to its input
- Image dimensions
- og:image:width and og:image:height are emitted automatically whenever an image is set, because their absence is what leaves the first share of a URL without a picture
- Defaults that are omitted
- A robots value of index, follow produces no tag, since that is what happens anyway. og:type and og:locale appear only when there is something for them to describe
- Checks
- Errors are things that demonstrably break a preview — a relative image URL, a missing title. Warnings degrade it. Notes are guidance. The three are kept separate because a tool that flags everything trains you to ignore it
- Image rules
- 200×200 Facebook minimum, 600×315 for a large card, 300×157 to 4096px for Twitter, 5 MB Twitter and 8 MB Facebook ceilings, 1.91:1 target — all documented platform limits rather than folklore
- Reading tags back
- Pasted HTML is read with pattern matching rather than a DOM parse, because the input is normally a fragment copied out of a head rather than a whole document. og:url wins over a canonical link when both are present
- Scope
- Tags only. The image itself is not generated or fetched; favicon generator covers icons, and robots.txt covers crawling at the site level rather than the page level
- Network
- None from tool code. A test sweep calls every function this page uses with
fetchandXMLHttpRequestreplaced by stubs that throw, so a stray request fails the build instead of shipping. Disconnect from the network and the page still works.
Questions about meta tags and Open Graph
What size should an Open Graph image be?
1200×630, which is the 1.91:1 shape cards are laid out for. Below 200×200 Facebook rejects it entirely; below 600×315 you get a small square thumbnail rather than a large card. Twitter wants at least 300×157, no side over 4096px, and under 5 MB — Facebook allows up to 8 MB. Anything far from 1.91:1 gets cropped, usually from the top and bottom.
Why is my link preview not showing an image?
Almost always because og:image is a relative path. Scrapers require an absolute URL and a path resolves to nothing, with no error anywhere. After that, the usual causes are an image under 200×200, missing og:image:width and og:image:height leaving the first share blank, and tags written by client-side JavaScript that scrapers never execute.
Do I need twitter: tags if I already have Open Graph?
Mostly not. Twitter falls back to the Open Graph tags when its own are absent, so the one genuinely worth adding is twitter:card — without it you get the small summary layout instead of a large image. Add the rest only when you want a different title or picture on Twitter than everywhere else.
Does the meta keywords tag still do anything?
No. Google announced in 2009 that it does not use it for ranking and nothing has changed since. Its only remaining effect is publishing which terms you consider valuable to anyone who views your source, so there is no reason to include it.
Why does my preview look right in the inspector but wrong when shared?
Because the inspector shows the DOM after your JavaScript has run, and scrapers do not run JavaScript. They read the HTML the server sent. Use view-source rather than the inspector to see what they see; if your tags are missing there, they need to be server-rendered.
I fixed the tag but the old preview is still showing.
Platforms cache scraped tags, sometimes for days. Each of the big ones has a debugging tool that forces a re-scrape — Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, and X’s card validator. Until you run one, links already in circulation keep the old card.
Is anything I type here sent anywhere?
The work is JavaScript running in this tab. Every function it calls is covered by a test that stubs fetch and XMLHttpRequest to throw, so a request that slipped in would break the build rather than reach a server — and you can confirm it for yourself by disconnecting and carrying on.