HTML <meta> name attribute
Definition and Usage
name Attribute defines the name of the metadata.
name Attribute defines content attribute The name of the value.
using name and content Attribute, can use name/value pairs to define metadata for the document. Among them,name Attribute indicates the type of metadata, while content Attribute is used to provide values.
The following table lists several predefined metadata types.
Note:If set http-equiv attributeIf it is set name Attribute.
Consejo:HTML5 introduces a method that allows web designers to control the viewport (the visible area of the web page) through the <meta> tag (see the "Set Viewport" example below).
Example
Use the name attribute to define descriptions, keywords, and authors about the HTML document. Also define the viewport to control the size of the page and the zoom ratio for different devices:
<head> <meta name="description" content="Free Web Tutorial"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Syntax
<meta name="value">
Attribute value
| Value | Description |
|---|---|
| application-name | Define the name of the Web application represented by the page. |
| author |
Define the name of the document author. For example: <meta name="author" content="YK Investment"> |
| description |
Define the description of the page. The search engine can choose this description to display in the search results. For example: <meta name="description" content="Free Web Tutorial"> |
| generator |
Define one of the software packages used to generate documents (not used for hand-written pages). For example: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Define the list of keywords related to the page, separated by commas. Inform the search engine about the content of the page. Consejo:Siempre especifique las palabras clave (los motores de búsqueda necesitan clasificar la página). Por ejemplo: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Controlar el viewport (área visible del usuario en la página web). |
Descripción
Además de los seis tipos de metadatos predefinidos en la tabla, también se pueden usar extensiones de metadatos. Visite esta página para obtener una lista actualizada de extensiones:
http://wiki.whatwg.org/wiki/MetaExtensions
Algunas extensiones se utilizan más, mientras que otras tienen un uso muy limitado, prácticamente nadie las usa. Los metadatos robots claramente pertenecen al primer grupo. Los autores de documentos HTML pueden usarlos para indicar a los motores de búsqueda cómo tratar el documento. Por ejemplo:
<meta name="robots" content="noindex">
Este tipo de metadatos tiene tres valores reconocidos por la mayoría de los navegadores:
- noindex - Indica que esta página no debe ser indexada
- noarchive - Indica que no se debe archivar o cachear esta página
- nofollow - Indica que no se debe seguir la búsqueda a través de los enlaces de esta página
Las extensiones de metadatos disponibles son pocas, por lo que los desarrolladores deben leer la lista en línea y ver qué se puede usar en sus proyectos.
Consejo
Para indicar a los motores de búsqueda cómo clasificar y jerarquizar el contenido, el método más importante en el pasado fue usar la metadatos keywords. Hoy en día, la importancia de los metadatos keywords ha disminuido considerablemente, ya que pueden ser utilizados para crear una ilusión de relevancia entre el contenido de la página y el tema. La mejor manera para que los creadores esperen que su contenido sea visto de manera diferente por los motores de búsqueda es seguir las recomendaciones proporcionadas por ellos mismos. La mayoría de los motores de búsqueda ofrecen guías para optimizar las páginas web o todo el sitio web.
Google: Guía de principiantes sobre optimización de motores de búsqueda (SEO)
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Guía de optimización de motores de búsqueda de Baidu
Configurar el viewport
El viewport es el área visible del usuario en la página web. Puede variar según el dispositivo; es más pequeño en el teléfono que en la pantalla del ordenador.
Usted debe incluir el siguiente elemento <meta> en todas las páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Proporciona instrucciones al navegador sobre cómo controlar el tamaño de la página y la escala.
width=device-width Configuración parcial del ancho de la página para seguir el ancho de la pantalla del dispositivo (diferente según el dispositivo).
initial-scale=1.0 Configuración parcial del nivel de zoom inicial al cargar la página por primera vez en el navegador.
Este es un ejemplo de una página web sin etiqueta meta viewport, y la misma página web con etiqueta meta viewport:
Consejo:Si usa un teléfono o tableta para navegar por esta página, puede hacer clic en los dos enlaces siguientes para ver las diferencias.
Puede encontrar en nuestraTutoriales de diseño de página web responsiva -ViewportAprenda más sobre el viewport.
Compatibilidad con navegadores
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Soporte | Soporte | Soporte | Soporte | Soporte |
