Esse código é uma estrutura básica de um documento HTML que incorpora várias meta tags importantes para SEO (Search Engine Optimization) e para melhorar a aparência do conteúdo quando compartilhado nas redes sociais. Vamos detalhar cada parte do código e entender como utilizá-lo da melhor forma:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Cabeçalho do documento -->
</head>
<body>
<!-- Corpo do documento -->
</body>
</html><!DOCTYPE html>: Declaração do tipo de documento, essencial para que o navegador interprete o HTML corretamente.<html lang="pt-br">: Define o idioma do conteúdo da página como português do Brasil.<head>: Contém metadados, links para estilos, scripts, e outras informações de configuração.<body>: Onde o conteúdo visível da página será inserido.
<meta charset="UTF-8">
<title>Título da página</title>
<meta name="description" content="Descrição de até 150 caracteres, mostrada na busca.">
<link rel="canonical" href="Link único da página">
<meta name="author" content="Nome do autor do site">
<meta name="robots" content="index"><meta charset="UTF-8">: Define a codificação de caracteres como UTF-8, garantindo que caracteres especiais sejam exibidos corretamente.<title>: Título da página que aparece na aba do navegador e nos resultados de busca.<meta name="description" content="...">: Descrição da página para motores de busca, importante para SEO.<link rel="canonical" href="...">: URL canônica da página, ajuda a evitar conteúdo duplicado.<meta name="author" content="...">: Nome do autor do site.<meta name="robots" content="index">: Instrução para motores de busca indexarem a página.
<meta itemprop="name" content="Título da página">
<meta itemprop="description" content="Descrição da página em menos de 200 caracteres.">
<meta itemprop="image" content="https://exemplo.com/imagem.png">
<link href="https://plus.google.com/+SuaPagina" rel="publisher"><meta itemprop="name" content="...">: Nome da página para Schema.org.<meta itemprop="description" content="...">: Descrição para Schema.org.<meta itemprop="image" content="...">: URL da imagem para Schema.org.<link href="https://plus.google.com/+SuaPagina" rel="publisher">: Link para a página do Google+.
<meta property="og:title" content="Título da página">
<meta property="og:description" content="Descrição da página em menos de 200 caracteres."/>
<meta property="og:url" content="Link da página">
<meta property="og:site_name" content="Nome do site"/>
<meta property="og:type" content="website">
<meta property="og:image" content="https://exemplo.com/imagem.png"><meta property="og:title" content="...">: Título da página para o Open Graph.<meta property="og:description" content="...">: Descrição para o Open Graph.<meta property="og:url" content="...">: URL da página.<meta property="og:site_name" content="...">: Nome do site.<meta property="og:type" content="website">: Tipo de conteúdo.<meta property="og:image" content="...">: URL da imagem para o Open Graph.
<meta name="twitter:title" content="Título da página">
<meta name="twitter:description" content="Descrição da página em menos de 200 caracteres.">
<meta name="twitter:url" content="Link da página">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://exemplo.com/imagem.png">
<meta name="twitter:site" content="@empresa"><meta name="twitter:title" content="...">: Título da página para Twitter.<meta name="twitter:description" content="...">: Descrição para Twitter.<meta name="twitter:url" content="...">: URL da página para Twitter.<meta name="twitter:card" content="summary">: Tipo de card do Twitter (summary é um tipo comum).<meta name="twitter:image" content="...">: URL da imagem para Twitter.<meta name="twitter:site" content="@empresa">: Nome do usuário ou empresa no Twitter.
- Título e Descrição: Mantenha o título e a descrição curtos, descritivos e com palavras-chave relevantes.
- Canonical URL: Sempre use a URL canônica correta para evitar problemas de conteúdo duplicado.
- Metadados de Redes Sociais: Use imagens de alta qualidade e garanta que títulos e descrições estejam bem otimizados para cada rede social.
- Atualização Regular: Revise e atualize metadados regularmente para garantir que estejam alinhados com o conteúdo atual da página.
- Verificação de Ferramentas: Utilize ferramentas como Google Search Console e o validador de Open Graph do Facebook para verificar se os metadados estão corretos.
Esses passos ajudarão a melhorar a visibilidade da sua página tanto nos motores de busca quanto nas redes sociais, proporcionando uma melhor experiência para os usuários.