Meta Tag & Open Graph Generator
Generate SEO meta tags, Open Graph and Twitter Card markup with live Google and social-share previews, character counts against the 60/160 guidance, and a share-image size check.
How to Use
- Choose the page type (website, article, product or profile) and the X card style, or press a preset.
- Type the page title and meta description — the counters turn red past 60 and 160 characters.
- Add the page URL, site name, author and a share image URL. When the image loads, its width and height are measured for you; otherwise type them.
- Watch the Google result, Facebook / LinkedIn card and X card previews, and read Show Work for each length and image check.
- Press Copy tags and paste them into your page’s
<head>.
Google result
Facebook / LinkedIn card
X card
Worked Example
A title that is too long. “The Complete Beginner’s Guide to Waterproof Trail Running Shoes for Wet Winters” is 79 characters, 19 over the guide of 60. Google cuts titles at about 600 pixels, so the result shows roughly “The Complete Beginner’s Guide to Waterproof Trail Running S…” and the words “Wet Winters” are lost. “How to Waterproof Running Shoes in 5 Steps” is 42 characters and shows in full.
A description. “Everything you need to know.” is 28 characters — under 70, so Google is likely to ignore it and quote the page instead. A 144-character description that names the methods (wax, spray, membrane liner) fits under 160 and gives the reader a reason to click.
The share image. 1200 × 630 pixels is a ratio of 1200 ÷ 630 = 1.905, the 1.91 : 1 shape Facebook and LinkedIn draw. A square 1254 × 1254 photo is 1.000 : 1, so a large card keeps only a band across its middle and loses the top and bottom. A 180 × 180 icon is fine for X’s summary card (minimum 144 × 144) but under Facebook’s 200 × 200 minimum, so Facebook shows no picture.
The common mistake: a relative image path, <meta property="og:image" content="/images/share.jpg">. Your own pages resolve it, but Facebook, LinkedIn and X fetch the tag on their own servers and have nothing to resolve it against, so the card appears with no picture. Write the full address: https://acme.com/images/share.jpg.
Show Work
Length and Size Rules
Where These Tags Came From
The <meta> element arrived with HTML 2.0 in 1995, and early search engines leaned on the keywords and description tags to understand pages. Keywords were stuffed so badly that engines stopped trusting them; Google confirmed in September 2009 that it ignores the keywords tag for ranking. The title and description survived because they are what people actually read in a list of results.
Facebook introduced the Open Graph protocol at its f8 conference in April 2010, so that any web page could become a rich object when shared — with a title, a type and an image — using og: properties written in RDFa style. Twitter followed with Twitter Cards in 2012, reading its own twitter: tags but falling back to Open Graph. Today LinkedIn, Slack, Discord, iMessage and WhatsApp all read og: tags, which is why one well-made set of tags controls how a link looks almost everywhere.
About This Tool
This tool writes the title, meta description, author and canonical link, the Open Graph set and the Twitter Card tags for one page, and shows how the link will look in a Google result, on Facebook or LinkedIn, and on X.
It also checks the work. Titles and descriptions are counted against the 60 and 160 guidance, URLs are checked for being absolute, and the share image is measured when it loads and compared with each platform’s minimum size and shape, with the crop shown in the preview. When the size is known it adds og:image:width and og:image:height. Everything runs in your browser; nothing you type is uploaded.
It is for site owners, marketers and developers setting up a page, and for anyone working out why a shared link looks wrong.
Related tools: robots.txt Generator, Schema / JSON-LD Generator, and Favicon Generator.
Frequently Asked Questions
What are Open Graph and Twitter Card tags?
Meta tags that control how a link looks when it is shared. Open Graph (og:) tags are read by Facebook, LinkedIn, Slack, Discord and most other apps; X reads its own twitter: tags and falls back to og: ones for anything missing. They set the title, description and picture of the card, so a shared link shows a rich preview instead of a bare URL.
How long should my title and description be?
About 50–60 characters for the title and 70–160 for the description. Google actually cuts by width — roughly 600 pixels for a title — so 60 characters is a guide, not a hard limit: a 79-character title loses its last 19 or so. Google may also rewrite a description that is short or does not match the search, so put the important words first.
What size should the share image be?
1200 × 630 pixels, a 1.91 : 1 ratio (1200 ÷ 630 = 1.905). Facebook ignores images under 200 × 200. X’s large card wants 2 : 1 and at least 300 × 157; its small summary card wants a square of at least 144 × 144; both accept up to 4096 × 4096 and 5 MB. A square photo on a large card loses its top and bottom.
Why does my link still show the old title or image?
Platforms cache a card the first time anyone shares the URL. After changing the tags, paste the URL into Facebook’s Sharing Debugger and press Scrape Again, and use LinkedIn’s Post Inspector. Adding og:image:width and og:image:height (this tool does when it knows the size) lets Facebook draw the card on the very first share.
Do I need the meta keywords tag?
No. Google said in September 2009 that it does not use the keywords meta tag for ranking at all, after years of it being stuffed with spam. This tool leaves it out. The title, description, canonical link and share tags are the ones that change what people see.
How do I use the Meta Tag & Open Graph Generator?
Just pick your options. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
New page launch
Write the title, description, canonical link and 6 Open Graph tags in one place, check each length, and paste 13 or more tags into the head.
Product pages
Set og:type to product and a 1200 × 630 image so a shared product link shows the picture full width instead of a tiny thumbnail.
Fix a broken share card
Find the cause of a blank preview: a relative og:image such as /img/og.jpg, an image under 200 × 200, or a missing description.
Blog posts
Use og:type article and keep the headline under 60 characters — a 79-character headline loses about its last 19 in search results.
Learning SEO markup
Edit one field at a time and watch which tags change, with Show Work explaining every check.
Last updated: