Meta Tag Generator
Generate the head tags a page needs: title, description, canonical, robots directives, viewport and language, with the lengths search engines actually use.
<!-- Put these inside <head>. The html element needs the lang attribute too. -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free WordPress Developer Tools</title>
<meta name="description" content="Generators and converters for WordPress developers. Everything runs in your browser.">
<link rel="canonical" href="https://bucketwp.com/">
<meta name="robots" content="index, follow">
<link rel="icon" href="/favicon.ico">
</head>
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Fill in the page details and copy the head tags out: title, description, canonical, robots directives and the two lines every page needs before any of the rest matters.
How to use
- Write the title for the result page, not for the file. Around 55 to 60 characters survives; anything past that is cut with an ellipsis.
- Treat the description as ad copy. It is not a ranking factor, but it decides whether the result gets clicked. 120 to 160 characters.
- Set the canonical to the absolute URL this page should be indexed under, including the protocol and the host.
- Leave charset and viewport on. The first has to appear within the first 1024 bytes, the second is what makes the page usable on a phone.
- Copy the tags into
<head>, and put thelangattribute on thehtmlelement rather than in a meta tag.
Example
A page that should be indexed with a large image preview:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free WordPress Developer Tools</title>
<meta name="description" content="Generators and converters for WordPress developers.">
<link rel="canonical" href="https://bucketwp.com/">
<meta name="robots" content="index, follow, max-image-preview:large">
</head>max-image-preview:large is what allows a full width thumbnail beside the result. Without it Google may show a small one or none.
Pitfalls
- A page blocked in
robots.txtcannot be read, so anoindextag on it is never seen. Use one or the other, not both. - A relative canonical resolves against the current URL, so it usually points at itself and does nothing. Use the absolute URL.
- Two canonical tags on one page make both untrustworthy, and search engines then pick for you. Check your theme and your SEO plugin are not both adding one.
- The keywords meta tag has been ignored by Google since 2009. Nothing here emits it on purpose.
- A charset declared after the first 1024 bytes can be missed, which is how a page ends up rendering mojibake.
- Missing viewport is why a site looks zoomed out on a phone regardless of the CSS.
nosnippetremoves the description from results entirely. That is usually worse than a description you are unhappy with.- Setting
noindexon a page that other pages link to wastes those links. Consider whether the page should exist at all.
Compatibility
These tags are plain HTML5 and are read by every search engine and social network. theme-color is honoured by Chrome on Android and by Safari 15 and later on macOS; other browsers ignore it. max-snippet, max-image-preview and max-video-preview need a crawler that supports the 2019 robots directives, which Google and Bing both do. The tool runs entirely in your browser.
Frequently asked questions
How long should the title be?
Does the description affect rankings?
Do I need a canonical on every page?
noindex or robots.txt?
noindex to keep a page out of results; robots.txt to stop it being crawled at all. Combining them stops the crawler ever seeing the noindex.Where does the lang attribute go?
html element. There is no meta tag equivalent that browsers or screen readers use.