Generate SEO meta tags for your website with live Google search preview.
Fill in the fields you need. The code box updates as you type. These lines are always there, even when the form is empty:
<meta charset="UTF-8"> and the standard viewport tag.robots, from the two Robots drop-downs. The default is index, follow.theme-color, from the color picker.og:type and twitter:card, from their drop-downs.Every other tag appears only when its field has a value: <title>, description, keywords, author, the canonical <link>, og:title, og:description, og:url, og:image, og:site_name, twitter:title, twitter:description, twitter:image and twitter:site.
The Language field does not add a line to the code, because language is not a head tag. Instead, a note under the code box shows the tag to use, such as <html lang="en">. Put the lang part on the <html> tag your page already has.
Empty social fields borrow from other fields. The OG and Twitter titles use the page title. The OG and Twitter descriptions use the meta description. The OG URL uses the canonical URL, and the Twitter image uses the OG image. So for most pages you only fill in Basic SEO and one image URL.
Copy Code copies exactly the text you see in the code box. Download as HTML saves the same text as meta-tags.html. That file is a list of tags, not a full web page. Paste the tags inside the <head> of your page.
<head>, because browsers only look for it in the first 1024 bytes of the file.", &, < and > in any field. The code uses ", &, < and > for them, so the tag does not break. For example, a title of Tom "Big" & Co becomes content="Tom "Big" & Co". Browsers and Google read that back as Tom "Big" & Co.yoursite or @yoursite in the Twitter handle field. Both give @yoursite. It goes into twitter:site, which is meant for the website's account. There is no field for twitter:creator, the author's own account. Add that tag by hand if you need it.https:// and your domain. A share preview cannot load an image from a short path like /img/cover.jpg.It is a rough guide, not a copy of Google. The title counter turns orange above 54 characters and red above 60. The description counter turns orange above 144 and red above 160. The title box stops at 80 characters and the description box at 200.
Google does not cut titles at a fixed number of characters. It cuts by width in pixels, about 600 pixels on a desktop screen. Wide letters like W and M take more space than i or l. So a 55-character title in capital letters can be cut, while a 65-character title in small letters may fit.
The preview on this page measures your title in 20px Arial, the font Google uses for desktop titles, and cuts it at about 600 pixels with …. So the cut is the same on every screen. On a narrow phone the preview title wraps onto a second line instead of being cut again. This is still an estimate. Google can change its layout, and your computer may not have the exact same font. Put the most important words at the start of the title.
Google also changes what it shows. It may rewrite a title that is very long, full of keywords, or does not match the page. It often shows a different description, taken from your page text, when that text matches the search better. And the address line in real results shows your site name and a short form of the URL, not the full URL you typed.
| Tag | What it does | Should you add it? |
|---|---|---|
title | The clickable headline in search results and the name on the browser tab. | Yes, on every page. Make each one different. |
description | A summary that Google may show under the title. It is not a ranking factor. | Yes. One or two plain sentences about the page. |
keywords | Nothing in Google. Google said in 2009 that it does not use this tag for ranking. | No. Leave the field empty. |
author | Names the author. Google does not list it among the meta tags it uses. | Optional. |
robots | noindex keeps the page out of search results. nofollow asks search engines not to follow its links. | Only when you need noindex or nofollow. index, follow is already the default. |
canonical | Names the main URL when the same page opens at several URLs, for example with ?ref= tracking codes. | Yes. Google treats it as a strong hint, not a strict rule. |
theme-color | Colors the browser bar in some mobile browsers. | Optional. |
og: tags | The title, text, image and link in share previews on Facebook, LinkedIn and many chat apps. | Yes, if people share your pages. |
twitter: tags | The card layout on X (Twitter). X uses the og title, description and image when the matching twitter tags are missing. | Keep twitter:card. The others are optional. |
One trap with noindex: search engines must be able to crawl the page to see the tag. If robots.txt blocks the page, Google never reads the noindex, and the URL can still appear in results.
The Open Graph protocol lists four required tags: og:title, og:type, og:image and og:url. This generator writes og:image only when you give an image URL. Without an image, many sites show a plain text link. A wide image of 1200 × 630 pixels is a common choice for large previews.
Two more things often go wrong:
A short, clean result for a blog post looks like this:
<title>How to Repot a Snake Plant | Green Corner</title> <meta name="description" content="When to repot, which soil to use, and how to avoid root rot."> <link rel="canonical" href="https://example.com/repot-snake-plant"> <meta property="og:type" content="article"> <meta property="og:title" content="How to Repot a Snake Plant"> <meta property="og:url" content="https://example.com/repot-snake-plant"> <meta property="og:image" content="https://example.com/img/repot.jpg"> <meta name="twitter:card" content="summary_large_image">
No. Google said in 2009 that it does not use the keywords meta tag for ranking in web search. The generator still writes the tag if you fill in the Keywords field, so leave that field empty unless another system you use asks for it.
Google cuts titles by width in pixels, about 600 pixels on desktop, not by a fixed number of characters. Capital letters and wide letters like W and M use more space. The 60-character counter is only a guide. Google may also rewrite a title it thinks does not describe the page well.
Google often builds the snippet from your page text when that text matches the search better. Your meta description is used when Google thinks it describes the page well. It is not a ranking factor, but a clear and accurate one is more likely to be shown.
Yes. In the code, each straight double quote becomes ", each & sign becomes &, and the less-than and greater-than signs become < and >. Browsers and Google turn these back into the normal characters, so your title and description show exactly as you typed them.
Language is not a head tag. It belongs on the opening html tag that your page already has, as the lang attribute. The note under the code box shows the tag with your language code, such as en. Add that lang part to your existing html tag.
Facebook, LinkedIn and other sites save the preview the first time a link is shared. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to make them read the page again. Also check that the og:image URL is a full https address that opens in a private browser window.