Learn how to use the HTML <meta> element.
The <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.
The <meta> element has several attributes and values.
The 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 <head> element.
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.
The meta 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 tag
The 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 toinitial-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
The robots meta tag (also called “robot meta directives”) tells search engines whether they should index your page or not, by using the attribute value index or noindex.
By default, it’s set to index, so if you don’t want your website to be indexed, you specify it as a content value noindex
<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 follow or nofollow values.
<meta name="robots" content="nofollow" />You can also combine noindex and nofollow in a single element:
<meta name="robots" content="noindex, nofollow" />Tread carefully with your <meta> robots configuration.
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 follow.
