Learn how to use the HTML
<meta> element is used to define several types of metadata about HTML documents. Metadata just means information. Or more specifically metadata is data that describes and gives information about other data.
<meta> element has several attributes and values.
name attribute is one of the most important ones.
name takes several values. For example
description, which is used together with the
content attribute to describe a page:
<head> <meta name="description" content="Learn about the HTML meta element" /> </head>
<meta> elements only live inside the
Metadata is not visible on your web page but is parsed (read) and processed by machines, such as servers, browsers, and search engines.
This makes the
<meta> element is one of the most important HTML elements for SEO because it provides search engines like Google additional data (besides your website’s content) that tells them what your website is about and how relevant it is compared to what people search for.
description is sometimes used by search engines to generate a page description for your website in the SERPs (Search Engine Results Pages) if it finds it better than your on-page content.
viewport meta tag helps to make non-mobile-friendly websites look better on smaller screens. The following viewport tag configuration is optimized for mobiles, and should be used by default unless you have a good reason not to:
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-widthtells the browser to set the page width based on the user’s device width.
initial-scalecontrols the zoom level on the initial page load.
initial-scale-1means that its zoom level is 100%. If you set it to
initial-scale-2, the page will zoom 200% on the first page load.
viewport is one of the more advanced
<meta> element tags, that you should study carefully before you start customizing the defaults.
Mozilla has solid docs on the viewport tag.
robots meta tag (also called “robot meta directives”) tells search engines whether they should index your page or not, by using the attribute value
By default, it’s set to
index, so if you don’t want your website to be indexed, you specify it as a
<meta name="robots" content="noindex" />
robots can also be used to tell search engines whether not they should follow any links on your website, by using the
<meta name="robots" content="nofollow" />
You can also combine
nofollow in a single element:
<meta name="robots" content="noindex, nofollow" />
Tread carefully with your
If you actually set it to
noindex, nofollow like the code above, you will discourage search engines from indexing both your content and your links, globally (on your entire website). You rarely want to do this, because it will hurt your SEO.
A common use case for
noindex is if your website is still under development, and not ready for the public. WordPress has an option to temporarily disable page indexing (
nofollow) for that purpose.
And for links, instead of applying
nofollow globally (for all links), a more practical use case is to use
nofollow on certain outbound (external) links, e.g. for paid links, that have no reason to be followed by search engines. You would do that directly on the anchor element:
<a href="#" rel="nofollow">Click to see our sponsor</a>
By default, hyperlinks are set to