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 Google SEO - Title, description, keywords | Learn HTML | 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.
print 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):
  • noindex: prevents the page from being indexed.
  • nofollow: prevents Googlebot from following links on this page.
  • nosnippet: prevents a fragment from being displayed in the search results.
  • noodp: prevents the alternative description of ODP / DMOZ from being used.
  • noarchive: Prevents Google from displaying the cached link for a page.
  • unavailable_after [date]: allows you to specify the exact time and date when you want to stop crawling and indexing the page
  • noimageindex: allows you to specify that you do not want the page to appear as the reference page of an image that is displayed in the Google search results.

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!

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

CONTINUE LEARNING

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Related content:

Would you like to learn more about Web Design?

Meet all the courses and tutorials that we have for you completely free
Learn Web Design
 

Leave your Comment

SPONSOR

Your business can also appear here. More information

Your browser has blocked advertising.
Please 🙏 Allows you to view the ads to access, thank you.