Meta tags Google SEO - Title, description, keywords
Metatags are used to define metadata in the HTML document, these data are not displayed by the browser; it has another purpose.
Meta tags are a perfect way for webmasters to provide search engines with information about their sites. These can be used to offer information to all types of customers. Each system processes only those that it understands and ignores the rest. Meta tags are added to the <head> section of your HTML page and usually look like this:
The <meta> tag is used to define data ("metadata") on the web document or html, this data is not displayed by the browser , since they are included in the header section and are usually used to establish values as keywords (keywords), description of the page, author of the same, last modification date, etc
This data is used by browsers, for example, to reload the page or set display values of it.
Searchers usually use keywords to set search values for the page, while other types of data could be used by other types of web services.
The format of the label is as follows:
<meta atributo="valor" />
Among the attributes to be highlighted we can find the following:
Charset
This attribute allows you to set the set of characters that the browser must use to view the information in the HTML document what is being represented.
The syntax for defining this tag with the charset attribute is as follows:
<meta charset="character set" />
The most commonly used character sets are UTF-8 and ISO-8859-1, which correspond to the Unicode encoding and the character set for the Latin alphabet.
The following example establishes a Unicode character set for the document.
<!DOCTYPE HTML5>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
name, content
These attributes allow you to define data pairs, ie a value name with its respective value or content.
The name attribute serves to establish the name of the data to be defined, while content is used to establish the value or content that you want to give the data.
Among the data that are usually used are application-name, author, description, generator and keywords.
| name | Description |
|---|---|
| application-name | Used to define the name of the application of which the web document is a part. |
| author | Used to define the name of the author of the web document. |
| description | Used to define a description of the web document, it is used by search engines to establish results. |
| generator | Used to specify the name of the program with which the web document was created. |
| keywords | It is used to indicate a series of terms or words that serve to establish categories in which the web document can be included. It is usually used by search engines to establish searches and categories of documents. |
The following example shows the use of the <meta> tag in conjunction with the attributes discussed above:
<!DOCTYPE HTML5>
<html>
<head>
<meta charset="utf-8" />
<meta name="application-name" content="Ejercicios y prácticas 1.0">
<meta name="author" content="Hugo Delgado">
<meta name="description" content="Prácticas y ejercicios de HTML">
<meta name="generator" content="disenowebakus.net">
<meta name="keywords" content="ejercicios, practicas, programación, html, etc.">
</head>
<body>
</body>
</html>
http-equiv
This attribute is usually Use to specify and simulate HTTP protocol header attributes. It is used to establish a value for the attribute, like the previous attribute, among the attributes we can highlight the following: contenttype, default-style and refresh.
| http-equiv | Descripcition |
|---|---|
| content-type | Used to specify the character set of encoding the document. |
| default-style | It is used to specify the style sheet preferred. |
| refresh | It is used to establish a refresh interval of the web document, which will be updated by the browser after the specified time. |
The following example shows the use of the <meta> tag in conjunction with the attributes discussed above:
<!DOCTYPE HTML5>
<html>
<head>
<meta charset="utf-8" />
<meta name="application-name" content="Ejercicios y prácticas 1.0">
<meta name="author" content="Hugo Delgado">
<meta name="description" content="Prácticas y ejercicios de HTML">
<meta name="generator" content="disenowebakus.net">
<meta name="keywords" content="ejercicios, practicas, programación, html, etc.">
<meta http-equiv="refresh" content="400">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
</body>
</html>
Etiqueta <BASE>
The <base> tag allows you to specify a URL2 by default and a default destination for all the relative links in the web document. It is a label included in the category of Metadata Content.
The label can only appear once within the web document and must be placed after the document header label <head>, thus being the first label of the header.
It must also be taken into account, that it is a label without closure, that is, there is no closing label of the same and therefore the abbreviated format is used to close it.
The format of the label is as follows:
<base href="valor" target="valor" />
Among the attributes to be highlighted that have the label are the following:
href
This attribute allows to establish the base URL for all relative URLs that exist in the web document
The syntax to define this tag with the href attribute is as follows:
<base href="valor URL" />
target
The attribute allows you to specify the default destination for all links and forms of the web document.
The syntax to define the tag with the target attribute is as follows:
<base href="valor" target="valor" />
Among the possible values that can be applied to the target attribute, we find the following:
| Target | Description |
|---|---|
| _blank | Specifies that the destination is a new window browser, or a new tab. |
| _self | By default. Open the destination in the same place where the click was made. |
| _parent | Opens the destination in an associated frame. |
| _top | Opens the destination by occupying the entire body of the window. |
| Framename | Opens the destination under which is the name specified |
The following example shows the use of the <base> tag in conjunction with the attributes specified above:
<!DOCTYPE HTML5>
<html>
<head>
<base href="http://www.dominio.com/images/" target="_blank" />
</head>
<body>
<img src="imagen.gif" width="24" height="39" alt="Stickman" />
<a href="http://www.dominio.com">Enlace</a>
</body>
</html>
Tag <LINK>
The <link> tag, allows you to load and establish the existing relationship between the current web document and an external resource. This tag is normally used to load stylesheets for the web document.
This label included in the category of Metadata Content, is a label of the so-called "empty", that is, normally only its start tag is specified and it does not have any type of content, limiting the information and configuration of the same to the attributes of which it has.
The label is usually inserted in the header section of the web document, although it is possible to find it in other places, at the end of the document, for example, it is best to place it where it has been indicated.
The format of the label with all its attributes is as follows:
<link href="valor" hreflang="valor" media="valor" rel="valor" sizes="valor" types="valor" />
Among the attributes to emphasize that it has the label are the following:
href
This attribute allows you to establish the URL in which the document you want to link with the web document is located.
The syntax to define this tag with the href attribute is as follows:
<link href="valor URL" />
hreflang
This attribute allows you to set the language of the document being linked, although it does not perform any special function in browsers, it can be used by the search engines to establish the language.
The syntax to define this tag with the hreflang attribute is the following:
<link href="URL" hreflang="Codigodelenguaje" />
The language code can be consulted using the following internet address:
rel
The attribute is used to specify the relationship existing between the web document and the document with which the link is being made. The attribute is mandatory and must be included.
The syntax for defining this tag with the rel attribute is as follows:
<link href="URL" hreflang="CodigoLenguaje" rel="valor" />
Among the possible values that can be applied to the rel attribute are the following:
| Rel | Description |
| alternate | Specifies the relationship of the document with an alternative version of it. (Printer, Mirror, Translated, Etc.) |
| author | Specifies the relationship of the link with the author of the document with which it is linked. |
| help | Specifies the relationship with the help document. |
| icon | Normally used to associate a small icon with the web document. This icon is usually visible in the browser's address bar. |
| license | Specifies the copyright information about the web document. |
| next | Specifies that the web document is part of a series of documents, and indicates that the document that links is the next in the series. |
| prefetch (prerender) | It is used to specify from the web document that is being loaded, which is the next web document that has to be loaded, in this way the browser requests are quest cache, subsequently loading the page more quickly. |
| prev | Specifies that the web document is part of a series of documents, and indicates that the document that links is the previous one in the series. |
| search | Specifies that the link is to the search utility in the document. |
| stylesheet | The most used, specifies that the The document with which it is linked is a style sheet to be imported, which will apply format to the web document. |
Sizes
The attribute is used only if it has previously specified in the rel attribute the value icon, and allows specifying the size of the attribute with which is being linked, although it is supported by the html5 language, browsers to date do not implement it.
The syntax to define this tag with the sizes attribute is as follows:
<link rel="icon" href="demo_icono.gif" type="image/gif" sizes="16x16" />
Among its possible attributes you can find the following:
| Sizes | Description |
|---|---|
| width x height | You have to specify the width and height values by inserting the symbol "x" between them, for example 16x16, 32x32, you can insert several sizes separated by blank spaces. "16x16 32x32" |
| any | Indicates that the icon with which it is linked is scalable, as if it were an svg image. |
type
The syntax to define this tag with the types attribute is as follows:
<link type="ValorMime" />
Among the types you can find the style sheet as "text / css", or the plain text "text" / plain ", etc.
media
This attribute has been much modified in this latest version of the language, and although later we focus more on the same initially serve to indicate the type of device for which the link is being made.
La sintaxis para definir esta etiqueta con el atributo media es la siguiente:
<link rel="Valor" type="Valor" href="URL" media="valor" />
The syntax to define this tag with the media attribute is as follows:
| Media | Description |
|---|---|
| all | Default value, specify all types of devices. |
| aural | Used to specify that the device for which it is linked is a speech synthesizer. |
| braille | Specifies a braille type device. |
| handhelp | Specifies a handheld device, small screen or limited bandwidth. |
| projection | Specifies a projector type device. |
| Specifies a printing device. | |
| screen | Specifies a pc screen device. |
| tty | Specifies a teletype type device, which uses fixed size characters. |
| tv | Specifies a television type device. |
As indicated above, the attribute has many more options that will be deepened in the same throughout the development of the agenda.
The following example shows the use of the <link> tag in conjunction with the attributes discussed above:
<!DOCTYPE HTML5>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="theme.css" hreflang="es" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>
Google understands the following meta tags (and related elements):
| Meta tag | Description |
|---|---|
| <meta name="description" content="Descripción de la página" /> | This tag provides a brief description of the page. In some cases this description is used as part of the fragment that is displayed in the search results. |
| <title>Title of the page </title> | Although technically it is not a meta tag, it is usually used together with the "description". The content of this tag is usually displayed as the title of the search results (and, of course, in the user's browser) |
| <meta name="robots" content="..., ..." /> <meta name="googlebot" content="..., ..." /> |
These meta tags can control the behavior of the crawl and the search engine indexing. The robots meta tag applies to all search engines, while "googlebot" is specific to Google. The default values are "index, follow" (same as "all") and it is not necessary to specify them. Google understands the following values (if you specify several values, separate them with a comma):
Now you can also specify this information in the header of the pages using the HTTP header directive "X-Robots-Tag". This is especially useful for limiting the indexing of non-HTML files, such as graphic files and other types of documents. |
| <meta name="google" content="notranslate" /> | When we recognize that the content of a page is not in the language that the user might want to find, we usually provide a link to a translation in the search results. In general, this allows to offer a unique and convincing content to a much larger group of users. However, there may be cases where you do not want to use this option. This meta tag tells Google not to provide a translation of this page. |
| <meta name="google-site-verification" content="..." /> | You can use this tag on the top-level page of your site to demonstrate ownership of it in Webmaster Tools. Remember that, although the values of the "name" and "content" attributes must exactly match the data you are given (including uppercase and lowercase), it does not matter if you change the XHTML tag to HTML or the label format match the one on your page. |
| <meta http-equiv="Content-Type" content="...; charset=..." /> | This meta tag defines the content type of the page and the character set. Make sure to delimit the value of the content attribute with quotes; otherwise, the attribute of the character set could be interpreted incorrectly. |
| <meta http-equiv="refresh" content="...;url=..." /> | This meta tag directs the user to a new URL after a certain period of time and, sometimes, is used as a form simple redirect. However, it is not compatible with all browsers and can be confusing for the user. W3C does not recommend the use of this label. Instead, Google suggests the 301 redirect by the server. |
Other highlights:
- Google can read meta tags similar to HTML and XHTM, regardless of the code used on the page.
- Except in the case of "verify", the use of uppercase or lowercase letters does not usually matter in meta tags.
ChatGPT Free
Ask questions on any topic
CITE ARTICLE
For homework, research, thesis, books, magazines, blogs or academic articles
APA Format Reference:
Delgado, Hugo. (2019).
Meta tags Google SEO - Title, description, keywords.
Retrieved Dec 10, 2024, from
https://disenowebakus.net/en/metatags
Participates!
Share it with your friends in Social Networks!CONTINUE LEARNING
IT ALSO DESERVES TO PAY TO VISIT:
To insert an image, the img tag is used and the most popular accepted formats are JPEG, GIF and PNG....
Internet is a tool used throughout the world that allows us to access multiple resources and know...
All colors that you can see on your monitor are formed from to join certain proportions of three...
There are three types of lists in HTML that allow us to organize the information: numbered lists,...
