Diário Code - Uma xícara de café e um bule em cima de uma mesa.

Diário Code

Aprenda JavaScript e PHP

Você precisa incluir todas essas tags no HEAD

Uma tela azul de computador escrito head e ao lado um anúncio urgente dizendo: Você precisa incluir essas tags na sua página!

Não é fácil escrever e configurar seção da sua página. Por isso, Deixo aqui para você um modelo para você copiar. Depois de bastante observar outros sites e executar meus próprios projetos com sucesso, estou seguro de que as tags abaixo são tudo que você precisa para que seu site tenha uma excelente performance nos mecanismos de busca.

<meta http-equiv="content-language" content="pt-br"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="http://seu_website.com.br">
<link rel="canonical" href="link-completo-da-pagina"/>
<title>Título da página</title>
<!--Personalização de Navegador-->
<meta name="theme-color" content="Código Hexadecimal de uma cor">
<!--Metatags Globais-->
<meta name="description" content="Descrição da página"/>
<meta name="author" content="Autor da página"/>
<meta name="creator" content="Criador da página"/>
<meta name="thumbnail" content="Imagem de thumbnail 1200x800 ou 800x800"/>
<!--OpenGraph Metatags-->
<meta property="og:description" content="Descrição da página"/>
<meta property="og:title" content="Título da página"/>
<meta property="og:url" content="URL completa da página"/>
<meta property="og:site_name" content="Nome do seu site"/>
<meta property="og:locale" content="pt_BR"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="Imagem de thumbnail 1200x800 ou 800x800"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="800"/>
<!--Twitter Meta Tags-->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="Nome de usuário no Twitter"/>
<meta name="twitter:title" content="Título da página"/>
<meta name="twitter:description" content="Descrição da página para o Twitter">
<meta name="twitter:image" content="Imagem de thumbnail para o Twitter 1200x800"/>
<!--Folhas de estilo-->
<link rel="stylesheet" type="text/css" href="css/global.css"/>
<!--Favicon-->
<link rel="icon" type="image/png" href="URL do ícone"/>
<!--Scripts-->
<script async src="URL do script"></script>

Em artigos futuros, darei uma explicação mais detalhada sobre o objetivo de cada tag apresentada aqui.

Aprenda mais com outros artigos relacionados