Atributo name do <meta> HTML
Definição e uso
name O atributo define o nome do metadado.
name O atributo define Atributo content o nome do valor.
usando name e content o atributo, pode usar pares nome/valor para definir metadados do documento. Entre eles,name O atributo indica o tipo de metadado, enquanto content Atributo usado para fornecer valores.
A tabela a seguir lista vários tipos de metadados pré-definidos.
Aviso:se configurado atributo http-equivse for configurado name Atributo
Dica:O HTML5 introduziu um método que permite que os designers de páginas web controlem o viewport (área visível do usuário da página) através da tag <meta> (veja o exemplo "Configuração do viewport" abaixo).
Exemplo
Use o atributo name para definir descrições, palavras-chave e autores do documento HTML. Além disso, defina o viewport para controlar o tamanho da página e a proporção de escalonamento para diferentes dispositivos:
<head> <meta name="description" content="Tutoriais Web gratuitos"> <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>
Sintaxe
<meta name="value">
Valor do atributo
| Valor | Descrição |
|---|---|
| application-name | Define o nome da aplicação web representada pela página. |
| author |
Define o nome do autor do documento. Por exemplo: <meta name="author" content="YK Investment"> |
| description |
Define a descrição da página. O mecanismo de busca pode usar essa descrição para exibir os resultados da busca. Por exemplo: <meta name="description" content="Tutoriais Web gratuitos"> |
| generator |
Define um pacote de software usado para gerar documentos (não usado para páginas manuscritas). Por exemplo: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Define a lista de palavras-chave relacionadas à página, separadas por vírgula. Informe o mecanismo de busca sobre o conteúdo da página. Dica:Sempre especifique as palavras-chave (os motores de busca precisam classificar a página). Por exemplo: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Controlar o viewport (a área visível do usuário na página da web). |
Descrição
Além dos seis tipos de metadados pré-definidos na tabela, também é possível usar extensões de metadados. Acesse esta página para obter uma lista de extensões atualizadas frequentemente:
http://wiki.whatwg.org/wiki/MetaExtensions
Alguns extensões são usados mais frequentemente, enquanto outros têm usos muito limitados, quase nunca usados. Os metadados robots pertencem ao primeiro grupo. Os autores de documentos HTML podem usá-lo para informar os motores de busca sobre como tratar o documento. Por exemplo:
<meta name="robots" content="noindex">
Este tipo de metadado tem três valores reconhecidos por a maioria dos navegadores:
- noindex - indica que não deve indexar essa página
- noarchive - indica que não deve arquivar ou cache essa página
- nofollow - indica que não deve seguir os links dessa página para a busca
Existem poucas extensões de metadados disponíveis, os desenvolvedores melhorariam ler a lista online para ver quais podem ser usadas em seus próprios projetos.
Dica
Para informar aos motores de busca como classificar e classificar o conteúdo, o meio mais importante no passado foi usar os metadados keywords. Atualmente, a importância dos metadados keywords pelos motores de busca já não é tão grande, pois pode ser abusado para criar uma ilusão de relevância entre o conteúdo da página e o conteúdo. O melhor método para os criadores esperarem que o conteúdo seja visto de maneira diferente pelos motores de busca é usar as sugestões fornecidas por eles mesmos. A maioria dos motores de busca oferece guias para otimizar páginas da web ou todo o site.
Google: Guia Inicial de Otimização para motores de busca (SEO)
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Guia de Otimização para motores de busca do Baidu
Configurar o viewport
O viewport é a área visível do usuário na página da web. Ele varia de dispositivo para dispositivo - ele é menor no telefone do que na tela do computador.
Você deve incluir o seguinte elemento <meta> em todas as páginas da web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ele fornece instruções ao navegador sobre como controlar o tamanho da página e a proporção de zoom.
width=device-width Alguns ajustes definem a largura da página para seguir a largura da tela do dispositivo (diferente para diferentes dispositivos).
initial-scale=1.0 Alguns ajustes definem o nível de zoom inicial ao carregar a página pelo navegador.
Este é um exemplo de página da web sem meta-tag de viewport, e a mesma página com meta-tag de viewport:
Dica:Se você estiver navegando esta página em um telefone ou tablet, você pode clicar nos dois links abaixo para ver as diferenças.
Você pode encontrar em nossoTutorial de Design de Web Responsiva - ViewportAprenda mais sobre o viewport.
Suporte a navegadores
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Suporte | Suporte | Suporte | Suporte | Suporte |
