What are meta tags? What are meta tags for?

Learn how meta tags can generate app-relevant data and how your site can benefit from this

metatags-html

Those who already develop websites know that HTML is a language that instructs browsers about which content will be displayed. For this, tags (labels) are used that mark and give semantic value to the content.

However there is some data that needs a particular type of tags for quo browsers and other applications interpret them. I'm talking about the metadata.

Metadata is data that describes data. With metadata you can understand the data over time. And it's the meta tags who are responsible for marking this data in the HTML document.

In this article we will understand what meta tags are for, how to use it, and the most used types.

What are meta tags? What are meta tags for?

meta tags

Meta tags are tags for tagging and describing information related to the website so that certain applications can be used.

Just to get an idea meta tags are responsible for reporting on data such as a description of the content of the page, its author, creation date, among other information.

You've certainly seen the result of an app that used information embedded in meta tags, such as text that describes about a page in a Google search result.

search result not google

Highlighted text is a data taken from a specific metag tag within the HTML code of a page.

How are meta tags used?

Meta tags are inserted between the element's opening and closing tags Head. And it is an empty element that houses attributes with different values and functionalities.

The following is an example of code syntax for meta tag insertion.

Now inside the "head" element:

<!DOCTYPE html>
<html lang="pt-br">
   <head>
         <title>Chief of Design | Blog de Web design para iniciantes</title>
         <meta name="description" content="Um canal de conteúdos sobre Web Design, Front-End, Design, Comunicação e Criatividade em geral. Acesse, curta e compartilhe nossos conteúdos!! Por que Qualquer Um Acha Que Pode Dar Pitacos, Né ??">
   </head>
   <body>
</html>

Attributes

Because it is an HTML (meta) element it also receives attributes common to HTML 5, which are treated as global attributes. Going beyondreceives specific attributes responsible for different functionalities. Let's go to them:

charset

This attribute serves to specify the character encoding used on the pages.

The default does not request a specific code, however it encourages the use of the value "UTF-8".

content

It is an attribute that gives a value associated with the attribute "http-equiv" or with the attribute "name".

http-equiv

This attribute is used to track browser actions and can be used to better specify information. It can be used to perform tasks such as periodically updating the page, redirecting to another page, etc.

Among the valid values for this attribute we have:

defult-style

Sets the name of the default alternate style sheet set.

The value of "content" must match the value of the "title" attribute in an HTML link element in the same document, or it must match the value of the "title" attribute in a "style" HTML element in the same document.

Value of the "title" attribute in :

Code using a value of "title" in the "content" attribute.

refresh

This value stipulates a time for a page to be reloaded or for a redirect to another page.

In the following example the page will be reloaded every 5 minutes, which corresponds to 300 seconds inserted in the "content" attribute.

In this other example there will be a redirect to the "outra_pagina.html" page after 20 seconds pass.

Name

This attribute specifies a name for the metadata.

It is important to know that for HTML5 there are metadata default names. They are:

application-name

Sets the name of the web application running on the page. If the page is not a Web application, the metadata name for the application should not be used.

author

Defines the name of the author of the document.

description

It is intended to contain a short and accurate summary of the content of the page. Although it is not a factor for ranking in search engines it's important that you use compelling text with a keyword because search engines like Google and Bing can show this text in search results. Persuasive text can attract clicks.

generator

It serves to identify the software used to generate the page.

keywords

Defines keywords separated by commas associated with the content of the page. One day it was used as an SEO strategy, but today it does not contribute but to this type of optimization and is ignored by the main search engines.

Other Metadata Names

There are other values besides the default metadata names for the name attribute. These names are registered in the WHATWG Wiki MetaExtensions page, where you can know an extended list that form metag tags. Although none have been formally accepted yet, some of the best-known meta tag names are on this extensive list.

We can find, for example, meta-tags of the robot type. See the following code:

scheme

There is still the "scheme" attribute. This attribute defines the schema in which metadata is described. But he's discontinued so I won't delve into this article.

Other Commonly Used Meta Tag Values

Now I'll pass a list of meta tags that are among the most used. They have the function of transmitting relevant information.

creator

This value defines the name of the creator of the HTML document. The name of the institution can be used.

Chief of Design >

publisher

This value defines the name of the editor.

David Arty>

robots

One of the main functions of meta tags is to pass indexing instructions to search engine crawlers. This is the function of robot meta tags.

Through them you can determine whether a page can be added to a search engine index and whether it is available for a web search. They can also specify whether links to the output pages should be followed or ignored by crawlers.

Next I'll show you the types.

Note: In this case what differentiates each meta tag is the value that goes in the "content" attribute.

index

This type allows robots to index a page.

noindex

This type prevents robots from indexing a page.

follow

This type allows robots to follow the outbound links of a page.

nofollow

This type prevents robots from following the outbound links of a page.

Combination of values

Combination of values in the "content" attribute is also allowed. That makes everything more practical. Combinations maintain the functions of each value in the isolated mode.

<meta name="robots" content="index, follow">
<meta name="robots" content="index, nofollow">
<meta name="robots" content="noindex, follow">
<meta name="robots" content="noindex, nofollow">

noodp

The name of noodp comes from "No ODP", referring to the acronym ODP which stands for Open Directory Project. This is the formal name of DMOZ, a directory that has pages with descriptions that may appear in search engines. To prevent this from happening you should use the following code.

noarchive

This type prevents pages from being cached. It is applied to Google, Bing and Yahoo.

nosnippet

This type prevents any page description from being displayed on the search engine results page. It is applied to Google and Bing.

noimageindex

Prevents search engines from indexing images on the page. It is applied to Google.

viewport

This value gives hints about the initial value of the viewport. It is used for websites that have been developed to be responsive.

The following code has the most frequent usage values on websites.

The value "width=devide-width" defines which width of the page should follow the width of the device screen. Remembering that devices vary screen dimensions.

The value "initial-scale=1.0" sets the initial zoom level when the page is first loaded by the browser.

Meta viewport value tag is a comprehensive subject that requires a separate study. This documentation can help to delve into the subject.

Known meta tag values, but not conforming

These are values that we find on many web pages, but they are obsolete.

content-language

This attribute defines the default language of the web page. The attribute that receives the value for the language is "content". The following example states that the default language is Portuguese brazil.

Because it is obsolete it is indicated, instead of using this meta tag, that uses the attribute "lang" in the element. Here's how it looks next:


content-type

This attribute serves to specify the character encoding used on the pages.

As we have seen in this article there is another way to specify character encoding that is through meta tag with attribute "charset". This is the form indicated for use.

Bonus - Opengraph Tag Goals

These are meta tags that are also registered in the extended list WHATWG Wiki MetaExtensions.

They are used to provide data from your website, or page to Facebook in the process of publishing content on this social network. With this you have control over how your content will be published.

Facebook post preview

These meta tags are characterized by having a particular property attribute and by using values that start with og: characters.

Now let's go to the examples.

and: locale

This value sets the language of the publication.

and: type

This value specifies the type of your site. The default type is website. If you have a blog the type for each article will be article.

If you use the value article. It is interesting to provide other important article information such as:

  • article:author - Data from the author of the publication.
  • article:section - Article category.
  • article:published_time - Time of publication.
<meta property="og:type" content="article">
<meta property="article:author" content="https://www.facebook.com/david.diarty">
<meta property="article:section" content="Freelancer and Entrepreneurship" >
<meta property="article:published_time" content="2018-06-07T12:04:39-03:00" />

and: title

This value defines the title of the page or article.

and: description

Defines a short description of the content of the page. You can use the same description as the meta tag description or one suitable one to attract attention on Facebook.

and: url

This value defines the destination address of the publication.

and: site_name

This value defines the name of the site.

and: image

This value is used to display the image that represents the publication. The value of the "content" attribute must display the address of the image.

It is interesting to provide more relevant information about the image such as:

  • og:image:type - Stipulates the format of the image. JPEG, PNG, GIF, and BMP types are accepted.
  • og:image:width - Stipulates the width of the image in pixels.
  • og:image:height - Stipulates the height of the image in pixels.
<meta property="og:image" content="www.seusite.com.br/imagem-1.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1280"> 
<meta property="og:image:height" content="630">

Conclusion

Through this article we can see how meta tags work and how your site can benefit from its use. The list of existing meta tags is quite extensive and goes well beyond those presented here.

Some may be invalid for HTML 5, so if you need to provide some metadata that is not related to the meta tags presented in this article I suggest that you refer to the list of existing values in the WHATWG Wiki MetaExtensions page and also consider validating your HTML code in the W3C validator to verify that the meta tags used are compliant.

I hope the article will be useful to you. I ask you to share with friends and if you wish to contribute your comments.

Hug!

References:

https://www.w3.org/TR/2014/CR-html5-20140429/document-metadata.html#attr-meta-http-equiv-default-style

https://wiki.whatwg.org/wiki/MetaExtensions

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/meta

Ed Francisco

hello! This is Ed Francisco, a Chief of Design since its first lines of content and codes.

Speaking of code, I believe HTML is the most remarkable web technology that has allowed me to get to where I am, and also write these lines about me for you.

I have a degree in Production Technology (this is where I got to know HTML) and a Technician in Digital Production, Web and Multimedia (where I improved my knowledge of HTML).

I'm from São Paulo from the East Zone. I ventured trying to unravel the mysteries of the web since 2008.