Meta Tag Generator with Google Preview

<!-- Add your meta tags here -->

🔗 Related Tools

What is a Meta Tag Generator?

Meta tags are short pieces of HTML in the <head> of a page. Visitors do not see them on the page, but browsers, search engines and social media apps read them. They carry the page title, a short description, and the title, description and image that appear when someone shares your link.

A meta tag generator writes this code for you. You type the text, and the tool puts it into the right tags with the right names, so you do not have to remember the syntax or the exact spelling of each tag. This tool also shows an approximate Google search preview and warns you when your title or description gets too long.

The tool formats what you type. It does not write the words for you, and it does not read or score your live page.

How to Generate Meta Tags

1. Type the page title. Watch the counter, which turns red above 60 characters.
2. Type the description. Its counter turns red above 160 characters.
3. Add the other details you have: keywords (optional), the author name, the page address and the address of the image used when your link is shared.
4. Check the Google preview. It updates as you type.
5. Click Copy Code and paste the code inside the <head> section of your page.
6. Click Reset to clear all the fields and start a new page.

Fields that you leave empty, such as the optional keywords, do not add a tag to the code.

What You See on the Page

Item	Meaning
Page Title	The title of the page, used in the title tag and in the social tags
Description	A short summary of the page, used in the description tag and in the social tags
Keywords (optional)	A list of words for the meta keywords tag. Google does not use this tag
Author Name	The name for the author tag
Page URL	The address of the page, shown in the preview and used in the og:url tag
Image URL	The full address of the image used when your link is shared
Character counters	Show the length of the title (limit 60) and the description (limit 160), and turn red above the limit
Google preview	An approximate picture of how your result may look in Google search
Code box and Copy Code	The generated tags, with a button that copies them
Reset	Clears all the fields

Example

These are made-up values on an example website.

Field	Value
Page Title	Free Online Tools for Developers | Example Site (47 characters)
Description	Format JSON, convert colors and generate QR codes with free tools that run in your browser. No signup needed. (109 characters)
Keywords	free tools, developer tools, json formatter
Author Name	Example Team
Page URL	https://www.example.com/tools/
Image URL	https://www.example.com/images/share.jpg

Generated code:

<title>Free Online Tools for Developers | Example Site</title>
<meta name="description" content="Format JSON, convert colors and generate QR codes with free tools that run in your browser. No signup needed.">
<meta name="keywords" content="free tools, developer tools, json formatter">
<meta name="author" content="Example Team">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Tools for Developers | Example Site">
<meta property="og:description" content="Format JSON, convert colors and generate QR codes with free tools that run in your browser. No signup needed.">
<meta property="og:url" content="https://www.example.com/tools/">
<meta property="og:image" content="https://www.example.com/images/share.jpg">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Tools for Developers | Example Site">
<meta name="twitter:description" content="Format JSON, convert colors and generate QR codes with free tools that run in your browser. No signup needed.">
<meta name="twitter:image" content="https://www.example.com/images/share.jpg">

Approximate Google preview:

Free Online Tools for Developers | Example Site
www.example.com › tools
Format JSON, convert colors and generate QR codes with free tools
that run in your browser. No signup needed.

If the title or description is longer than the limit, Google may cut it and add three dots. The exact place where it cuts depends on the width of the text on the screen.

Which Tags the Tool Writes

Tag	What it does	Who reads it
<title>	The title of the page. It appears in the browser tab and as the blue link in search results	Browsers, search engines
meta name="description"	A short summary of the page. It may be used as the text under the title in search results	Search engines
meta name="keywords"	A list of keywords. Google does not use it	Some other tools and systems
meta name="author"	The name of the author	Some tools and systems
og:title, og:description, og:image, og:url, og:type	Control the preview card when your link is shared	Social and messaging apps
twitter:card, twitter:title, twitter:description, twitter:image	Control the card on X, formerly Twitter	X and some other apps

There are other useful tags that the tool does not write, such as the character set, the viewport, the canonical link and the robots tag. They are part of a normal page setup, so add them if your page does not have them yet.

Title and Description Length

Item	Common guideline	Counter turns red
Title	Up to about 60 characters	Above 60 characters
Description	Up to about 160 characters	Above 160 characters

• These are rules of thumb, not official limits. Google does not publish a character limit.
• Google cuts by width, not by characters. Wide letters such as W take more room than narrow ones such as i, so two titles with the same number of characters can be cut in different places.
• Phones often show less than computers. Put the most important words at the start.
• Longer is not always a problem. A longer text may be cut with three dots, but the whole text is still in your page.

Tips for a good title

• Say clearly what the page is about, and put the main words near the start.
• Make every page title different from the others on your website.
• Add your site or brand name at the end if there is room, for example after a bar or a dash.
• Do not repeat the same word again and again. Write for people and not for a robot.

Tips for a good description

• Write one or two clear sentences that tell a reader what they will get on the page.
• Be honest. A description that promises something the page does not offer makes people leave quickly.
• Give each page its own description. The same text on every page is not helpful.
• You can end with a short invitation such as what the visitor can do next.

Will Google Show My Title and Description?

Often, but not always. Google can create a title link and a snippet from other parts of your page when it thinks that they describe the page better for a particular search, and the same page can show different text for different searches. This is normal and does not mean that your tags are wrong.

• The preview in this tool is a guide. It helps you judge the length and the look. It cannot show what Google will choose for every search.
• Matching text helps. A title and a description that fit the content of the page are more likely to be used.
• Changes take time. After you update your tags, it can take days or longer for search results to change.

The Meta Keywords Tag

Google has said that it does not use the meta keywords tag, so adding keywords there will not help your page rank in Google. That is why the keywords field in this tool is optional. You can leave it empty and the tag will not be added. Some other tools or systems may still read it, and it does no harm, but it is not worth spending time on.

Open Graph and Twitter Card Tags

When someone shares a link in a chat or on a social site, the app often shows a small card with a picture, a title and a short text. That card is built from Open Graph tags and, for X, formerly Twitter, from Twitter Card tags. Without them, the app has to guess and can pick a wrong picture or no picture at all.

Tag	What it sets
og:title	The title shown in the card
og:description	The text shown in the card
og:image	The picture shown in the card
og:url	The main address of the page
og:type	The kind of content, such as website or article
twitter:card	The card type. summary_large_image shows a large picture, and summary shows a small one
twitter:title, twitter:description, twitter:image	The title, text and picture for the card on X

Many apps fall back to the Open Graph tags when other tags are missing. Including both sets is the safest way to get the card that you want.

Choosing the image

• Use the full address, starting with https, for example https://www.example.com/images/share.jpg. A short or relative path such as /images/share.jpg does not work reliably.
• It must be public. If the image is behind a login or blocked, apps cannot load it.
• A size of 1200 by 630 pixels is commonly recommended for link cards. Platforms change their advice, so check their help pages if the exact size matters.
• Keep important text in the middle, because apps crop the picture in different ways.
• Do not use a tiny image. Small pictures look blurry or may not be used at all.
• The tool only writes the address. It does not upload the image or check that it loads.

If your picture does not have the right shape, the Image Resizer for Social Media can crop it to a standard size.

How to Add the Tags to Your Website

1. Click Copy Code.
2. Open the HTML of your page, or the shared header file or template of your website.
3. Paste the code inside the <head> section, between <head> and </head>.
4. Save and publish the page, then open it and check that the title shows in the browser tab.

• One title and one description per page. If your theme, builder or SEO plugin already adds these tags, change the values in its own settings instead of adding a second set.
• Different pages need different values. If you use a shared template, make the title and the description change for each page.
• Many website builders and content systems have fields for the title, the description and the social image. Use those fields when they exist.

Common Mistakes

• Using the same title or description on every page: Each page should describe itself.
• Writing text only for search engines: Stuffing words in makes the result look spammy to readers.
• Ignoring the length: A very long title or description is cut off, and the end can be lost.
• Promising what the page does not offer: This hurts trust, and people leave quickly.
• Using a relative path for the image: Use the full https address.
• A private or blocked image: Apps cannot load it, so the card shows no picture.
• Pasting tags outside the head section: They may be ignored.
• Adding duplicate tags: Two titles or two descriptions can conflict.
• Expecting a change to show instantly: Search results and social previews are cached.
• Treating the keywords tag as an SEO trick: Google does not use it.

Good to Know

• The tool formats the text that you type. It does not write text for you.
• Quotes, ampersands and other special characters in your text are converted so that the tags stay valid.
• The Google preview is an approximation and does not show the exact choice that Google makes.
• The tool does not check your live page, your image or your rankings.
• To test how a link looks after you publish it, use the link preview or debug tools that the platforms provide.

Privacy

• The code and the preview are made in your browser, and what you type is not sent to our server.
• We do not save your text or your tags. They disappear when you close or reload the page, so copy what you need.
• Avoid typing confidential text, such as a page that is not yet announced, into any online tool.
• No signup, no account and no app install are needed.

Google, X and Twitter are trademarks of their owners. WebToolsKit is not connected with, endorsed by or sponsored by them.

Frequently Asked Questions

How do I generate meta tags for my page?

Type your page title and description, add the other details that you have, such as the author name, the page address and an image address, and the code appears in the code box as you type. Click Copy Code and paste it inside the head section of your page.

What are meta tags?

Meta tags are small pieces of HTML in the head of a page that describe the page to browsers, search engines and social media sites. They are not shown on the page itself. The title and the description are used in search results, and Open Graph and Twitter Card tags control how a link looks when it is shared.

How long should the title and the description be?

A common guideline is up to about 60 characters for the title and up to about 160 characters for the description, and the counters turn red when you go over. These are rules of thumb and not official limits. Google cuts text based on how wide it is on the screen and not on a fixed number of characters, and phones usually show less than computers.

Will Google show exactly what I write, and is the preview exact?

Not always. Google may use a different title or description than the ones in your tags, for example when it thinks that another part of the page matches a search better. The preview in this tool is an approximation that helps you judge the length and the look of your text, and it cannot show what Google will really display for every search.

Do I need the keywords meta tag?

No. Google has said that it does not use the meta keywords tag, so you can leave the keywords field empty. Some other tools or systems may still read the tag, which is why the field is there as an option.

Does the meta description help my page rank higher?

Google has said that it does not use the meta description as a ranking signal, but it may show it as the snippet under your title. A clear, honest description can make people more likely to click your result. Nothing in this tool can promise a ranking.

What are Open Graph tags?

Open Graph tags are meta tags whose names start with og:. Social and messaging apps read them to build the preview card when someone shares your link, with a title, a description and an image. The tool writes the main ones, such as og:title, og:description, og:image and og:url.

What are Twitter Card tags?

Twitter Card tags are meta tags whose names start with twitter:. X, formerly Twitter, reads them to build the preview card of a shared link. Many apps fall back to Open Graph tags when other tags are missing, but including both sets is the safest way to get the card that you want.

What image address should I use for social sharing?

Use the full web address of the image, starting with https, and make sure that anyone can open it without logging in. An image of 1200 by 630 pixels is commonly recommended for link cards. Platforms can change their advice, so check the help page of the platform if the exact size matters. The tool only writes the address into the tags. It does not upload the image or check that it loads.

Where do I paste the generated code?

Paste it inside the head section of your page, between the opening and closing head tags. Use one title and one description per page. If your website builder, theme or SEO plugin already adds these tags, change the values in its own settings instead, because two sets of tags can conflict.

Why does the old preview still show after I changed my tags?

Search engines and social platforms keep copies of pages and previews for some time. It can take days for Google to update a result, and social sites often cache a link preview until you refresh it with the platform's own link preview or debug tool.

Does the tool write my title and description, or check my page?

No. It puts the text that you type into the correct HTML tags and shows a preview. It does not write text for you, it does not read your live page and it does not give an SEO score. You decide the words.

Is what I type sent to a server?

No. The code and the preview are made in your browser using JavaScript, and what you type is not sent to our server. Avoid typing confidential text, such as a page that is not yet announced, into any online tool.

Is this meta tag generator free, and does it work on mobile?

Yes. The tool is free and needs no signup. It is designed for phone screens as well as desktop.