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 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.
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>
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:
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".
It is an attribute that gives a value associated with the attribute "http-equiv" or with the attribute "name".
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:
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.
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.
This attribute specifies a name for the metadata.
It is important to know that for HTML5 there are metadata default names. They are:
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.
Defines the name of the author of the document.
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.
It serves to identify the software used to generate the page.
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:
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.
This value defines the name of the creator of the HTML document. The name of the institution can be used.
Chief of Design >
This value defines the name of the editor.
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.
This type allows robots to index a page.
This type prevents robots from indexing a page.
This type allows robots to follow the outbound links of a page.
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">
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.
This type prevents pages from being cached. It is applied to Google, Bing and Yahoo.
This type prevents any page description from being displayed on the search engine results page. It is applied to Google and Bing.
Prevents search engines from indexing images on the page. It is applied to Google.
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.
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:
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.
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.
This value sets the language of the publication.
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" />
This value defines the title of the page or article.
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.
This value defines the destination address of the publication.
This value defines the name of the site.
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">
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.
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.