Meta tag generator (HTML)
Fill in the title, description, URL and image. The tool builds the full meta tag block, with Open Graph and Twitter Card, ready to copy and paste into the head tag. No sign up, right in your browser.
Fill in the fields above to see your meta tag block here.
Everything about meta tags, Open Graph and Twitter Card
Meta tags are small snippets of HTML, placed inside your site's <head> tag, that describe the page to Google and to social networks. Visitors never see them, but the search engine, Facebook, LinkedIn and X read each one to build the title, summary and image that show when the page is found or shared. In one line: meta tags are your page's spec sheet, and leaving them blank hands the algorithm the decision of how your brand appears.
Which meta tags actually matter
There are dozens of possible meta tags, but only a handful change the outcome day to day. Three groups are worth your time: the primary tags (the <title> and description that Google uses), the Open Graph tags (the card that shows on Facebook, LinkedIn and WhatsApp) and the Twitter Card tags (the preview on X). This tool generates all three at once so you never forget one.
| Meta tag | Where it shows | Function |
|---|---|---|
| <title> | Browser tab and Google title | The clickable title of the search result |
| meta name="description" | Summary below the title on Google | Invites the click and drives CTR |
| og:title and og:description | Card when sharing on Facebook and LinkedIn | Title and summary of the social preview |
| og:image | Large image of the social card | The photo that shows when the link is shared |
| og:url, og:type and og:site_name | Card metadata | Canonical URL, content type and site name |
| twitter:card | Card format on X (Twitter) | Sets summary or summary_large_image |
| twitter:title, description and image | Preview on X (Twitter) | Text and image of the card on X |
Where to paste the meta tags
All meta tags live inside the <head> tag, ideally near the top, before the closing </head>. They need to be in the HTML the server delivers, not injected later by JavaScript, because some social crawlers do not run scripts. If you use a CMS like WordPress or a framework like Next.js, paste the block in the theme's header field or in the page's metadata object.
Open Graph: the card that shows on social networks
Open Graph is the protocol, created by Facebook, that defines how your page looks when someone pastes the link into a social network. Without og:image, og:title and og:description, the network tries to guess what to show, and the result is usually a card with no image and trimmed text. With Open Graph set, you control the first impression: the right image, the right title and the right summary. The rule holds: if you have no Open Graph, you do not choose how your link is seen.
Twitter Card: the preview on X
The Twitter Card plays the same role on X (Twitter). The twitter:card tag decides the format: use summary_large_image when you have a good horizontal image, or summary for a smaller card. X falls back to the Open Graph tags when the Twitter ones are missing, but declaring both avoids surprises and keeps the card consistent across every platform.
Ideal size of each meta tag
Every tag has a visible space, and whatever goes past it gets cut. Respecting the size makes sure the title and summary show in full, with no ellipsis in the middle of the important phrase.
- <title>: 50 to 60 characters. Beyond that, Google trims it in the result.
- meta description: 150 to 160 characters, with the key information in the first 120.
- og:image: 1200 by 630 pixels (1.91:1 ratio) is the size that renders the large card without distortion.
- og:title: keep it close to the <title>, up to around 60 characters, so it does not trim in the card.
- og:description: 2 to 4 lines, around 110 to 160 characters in the preview.
Questions about meta tags
What are meta tags?
They are snippets of HTML inside the <head> tag that describe the page to Google and social networks. Visitors never see them, but they define the title, summary and image that show in search and when the link is shared.
Where do I place meta tags on my site?
Inside the <head> tag, ideally near the top. They need to be in the HTML delivered by the server, not just inserted later by JavaScript.
Do I need Open Graph and Twitter Card?
Yes, if you care how your link looks on social. Without those tags, Facebook, LinkedIn and X guess what to show, and the card usually comes out with no image and trimmed text.
What is the ideal og:image size?
1200 by 630 pixels, at a 1.91:1 ratio. That is the size that produces the large social card without cropping or distorting the image.
Do meta tags improve Google rankings?
The title helps directly, since it is a relevance signal and the clickable text in search. The description is not a direct ranking factor, but it drives CTR, which affects performance over time.
Is the meta tag generator free?
Yes, it is 100% free and needs no sign up. Everything runs in your browser and what you type is never sent to any server.
Want a blog that writes and optimizes itself?
Automarticles builds your full blog, with titles, meta tags and content optimized for Google and to be cited by AIs like ChatGPT. With no manual work.