Meta tags for search and sharing, with previews
This meta tag generator writes the HTML that controls how a page appears in Google results and when its link is shared on Facebook, LinkedIn, X, Slack, Discord or WhatsApp. Fill in a title, description, canonical URL and share image, and you get the primary SEO tags, the Open Graph tags and the Twitter Card tags, properly escaped and ready to paste into your <code><head></code>, with live previews of the search snippet and each social card. Paste the head of an existing page to load its tags and improve them. Everything runs in your browser.
How to generate meta tags
- 1Write a title and description. The counters turn red when Google is likely to truncate them: about 600 pixels (≈60 characters) for the title and about 160 characters for the description.
- 2Enter the page's canonical URL, your site name and an absolute image URL — ideally 1200 × 630 pixels — with alt text.
- 3Choose the Open Graph type, locale and Twitter card style, and add your X handles. Untick Allow indexing for pages that must stay out of search results.
- 4Check the Google, Facebook, LinkedIn and X previews, then switch to HTML, choose which groups to include, and copy the tags into your page's
<head>. - 5To edit an existing page, click Import and paste its HTML or view-source.
The tags that matter for SEO
- <title>
- The single most important on-page signal and the clickable headline in results. Put the main topic first, keep it unique per page, and end with the brand. Google rewrites titles it finds unhelpful, too long or stuffed with keywords.
- meta description
- Not a ranking factor, but often used as the snippet under the title, so it drives clicks. Summarise the page in 120–160 characters with a reason to visit.
- canonical
- <link rel="canonical"> names the preferred URL when the same content is reachable at several addresses (tracking parameters, http and https, trailing slashes).
- robots
- noindex keeps a page out of results, nofollow tells crawlers not to follow its links. Index, follow is the default, so the tag is only written when you change it.
- viewport & charset
- Not SEO tags as such, but every page needs them: UTF-8 and a responsive viewport are prerequisites for mobile-first indexing.
- keywords
- Ignored by Google and Bing for ranking for over a decade. Include it only if an internal search or another system reads it.
Open Graph: how links look when shared
Open Graph is the protocol Facebook introduced and almost every platform now reads: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest and many more. The essential tags are og:title, og:description, og:image, og:url and og:type; og:site_name and og:locale refine the card.
The image makes or breaks the card. Use an absolute https:// URL, 1200 × 630 pixels (a 1.91:1 ratio), under 5 MB, in JPEG, PNG or WebP, and keep text and logos away from the edges because platforms crop differently. Platforms cache cards: after changing the tags, refresh them with Facebook's Sharing Debugger, LinkedIn's Post Inspector or by sharing a URL with a query string.
Twitter / X Cards
X reads its own twitter:card tag to choose the layout — summary_large_image for a full-width image, summary for a small square thumbnail — and twitter:site and twitter:creator for the site's and author's handles. For the title, description and image it falls back to the Open Graph tags, so the generator writes twitter:title, twitter:description and twitter:image only when Open Graph is turned off, avoiding duplicated markup.
X currently shows large-image cards as the image with the title overlaid and the domain underneath; descriptions appear only on summary cards in some clients.
Title length: characters versus pixels
Google truncates titles by width, not by a character count: on desktop the limit is roughly 600 pixels in a 20-pixel Arial-like font, which fits about 50–60 characters depending on the letters — "WWW" is three times wider than "iii". The counter measures the title in that font in your browser, so it reflects your actual words. Descriptions are cut at about 920 pixels, roughly 155–160 characters on desktop and fewer on mobile.
Truncation is not a penalty — it only hides the end of the text — but keeping the important words early ensures they are seen. Make sure the title and description match the visible content; Google is more likely to keep them unchanged.
Where to put the tags
All of these tags belong inside the <head> element of the page, and they must be present in the HTML the server sends: link preview crawlers do not run JavaScript, so tags added by client-side code are invisible to Facebook, LinkedIn and X. In frameworks such as Next.js, Nuxt or Astro, use their metadata APIs to render them on the server. Every attribute value is HTML-escaped, so quotes and ampersands in your titles cannot break the markup.
Combine this with a robots.txt that lets crawlers reach your pages, an XML sitemap listing your canonical URLs, and a favicon so your result shows your icon.
Frequently asked questions
- What is the ideal length for a meta title and description?
- About 50–60 characters (under ~600 pixels) for the title and 120–160 characters for the description. The counters show both and turn red when Google is likely to cut the text off.
- What size should an Open Graph image be?
- 1200 × 630 pixels (1.91:1) works on Facebook, LinkedIn, X and messaging apps. Use an absolute https URL, keep it under 5 MB, and keep key content in the centre.
- Why does my link preview show an old image or title?
- Platforms cache link previews. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to re-scrape the URL; X refreshes its cache after about a week, or immediately for a URL with a new query string.
- Do I need both Open Graph and Twitter tags?
- You need Open Graph for most platforms and at least twitter:card for X. X falls back to og:title, og:description and og:image, so the other Twitter tags are optional when Open Graph is present.
- Does the meta keywords tag help SEO?
- No. Google and Bing have ignored it for ranking for many years. It is optional here and only useful if some internal system reads it.
- Can I edit the meta tags of an existing page?
- Yes. Click Import, paste the page's HTML (view-source works) and the title, description, canonical, Open Graph, Twitter and robots values are loaded into the form.
- Why does my share image not appear in the preview?
- The URL must be absolute (https://…) and publicly reachable. Some servers block images from being shown on other sites; the real platforms fetch them server-side, so they may still work.
- Is anything uploaded?
- No. The tags are generated in your browser. Only the share image is loaded from the URL you enter, to show it in the previews.