A importância das metatags no HTML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 10 Horas
54 Min
42 Seg
Tempo restante da oferta: 10 54 42
[Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br) Explorar
[ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login)
[ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) A importância das metatags no HTML [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web)
# A importância das metatags no HTML
Nesse artigo aprenderemos sobre as metatag no HTML. Vamos aprender como utilizar e o porquê devemos dar bastante atenção para essas tags.
[ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás
Todos nós já compartilhamos algum link na internet, e, no momento que colocamos esse link, automaticamente, carrega uma imagem, título e descrição.
A princípio, isso só é possível, devido ao uso das metatags. Outro impacto dessas tags é em relação ao [SEO](https://www.treinaweb.com.br/blog/tecnicas-de-seo-para-ficar-no-topo-dos-buscadores "SEO") de sua página, ou seja, a forma com que buscadores encontram, ranqueiam e apresenta sua página.
[  ](https://www.treinaweb.com.br/ebook/guia-HTML/)
## O que são as metatags no HTML e como podem nos ajudar?
As metatags são de extrema importância para um documento HTML. Elas funcionam como uma espécie de configuração da sua página. Nelas podemos definir como o navegador irá renderizar o HTML, entre outros aspectos.
Assim como, especificar como nossa página será compartilhada, dar uma descrição da página, qual tipo de codificação de caracteres queremos usar. Enfim, muitas opções diferentes.
As metatags não necessitam de fechamento, como, por exemplo, uma `div`, ou até mesmo, um `p`. Elas se fecham nelas mesmas, igualmente, as tags `img` e `link`, por exemplo. Primeiramente, declaramos seu nome, e o que difere umas das outras é o atributo.
Com o intuito de entender melhor como funciona e de qual forma aplicamos essas configurações, dividi em duas partes. Metatags básicas, que são as tags padrões, e as mais avançadas, que nos ajudam com configurações de compartilhamento e SEO. Então, vamos a elas.
### Metatags básicas
As metatags HTML básicas são, normalmente, as tags que por padrão, são adicionadas pelos editores de texto, como, por exemplo, o [Emmet](https://www.treinaweb.com.br/blog/emmet-toolkit-seja-um-web-developer-mais-rapido "Emmet") do VsCode, ou de qualquer outro editor.
Mas, antes de ver sobre essas tags, é preciso estabelecer algo muito importante. Metatags no HTML precisam ficar dentro da tag `head`, ou seja, no início do HTML.
Isso ocorre pelo fato que, como todo documento na internet, é lido de cima para baixo. Assim sendo, precisamos passar essas tags de configuração antes do corpo do HTML ser lido.
Com esse conceito estabelecido, vamos ver de fato um exemplo de metatag básica:
```html
O que é metatag no HTML
```
Nesse exemplo, temos, três tags de configuração básica, vamos entender cada uma delas.
#### Charset
Como havia dito anteriormente, passamos o tipo da tag pelo seu atributo. Nesse caso do `charset`, define o tipo de codificação de caracter que queremos utilizar. UTF-8 é um padrão de codificação bem conhecido e bem completo. Assim sendo, ele abrange vários caracteres especiais, ou seja, é ideal para nosso idioma, que utiliza, por exemplo, o `ç`.
#### Http-equiv
Nesse caso, o atributo `http-equiv` está fazendo papel de auxiliar na compatibilidade no antigo navegador da Microsoft, o Internet Explorer. Por ser um navegador mais antigo, e bem conhecido por causar problemas de incompatibilidade. É utilizada essa metatag para minimizar alguns problemas de renderização.
Mas, essa não é a única forma de utilizar o `http-equiv`. Podemos também, forçar a atualização da página por período definido, dessa forma:
```html
```
O valor `refresh` informa que queremos atualizar a página. Dentro do `content` passamos o periodo que queremos que esse carregamento se repita. O valor é lido em segundos, logo, o exemplo acima a página irá atualizar a cada 30 segundos.
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
Existem outras formas de uso desse atributo, para questão de curiosidade e conhecimento, vou deixar a documentação do [site do Mozilla](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/meta "site do Mozilla"), que aborda os assuntos necessários para entender as várias formas de uso desse atributo.
#### Viewport
Já o atributo viewport, informa que queremos nossos elementos renderizados proporcionalmente, forçando qualquer dispositivo a se basear no pixel CSS, que também é explicado de forma clara como isso funcionar no artigo [Pixel físico e pixel CSS](https://www.treinaweb.com.br/blog/pixel-fisico-e-pixel-css "Pixel físico e pixel CSS").
Nesse mesmo atributo podemos definir, até mesmo, se queremos deixar nossa página com zoom, ou bloquear a opção de zoom em dispositivos touch screen.
[  Curso HTML5 + CSS3 - Web design responsivo Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-web-design-responsivo)
### Metatags de compartilhamento e SEO
Metatag de compartilhamento, por si só, já tem um impacto tremendo no SEO da sua página. Entretanto, existem metatags no HTML que servem para ajudar o SEO a sugerir sua página a quem procura algo no Google relacionado ao seu conteúdo. Vamos ver alguns exemplos.
#### Informações do site
Existem algumas opções para passar as informações do nosso site dentro da metatag no HTML. Essas informações podem ser passadas de diferentes formas, vamos ver alguma delas.
##### Autor
```html
```
Assim como anteriormente, o atributo que muda o sentido da metatag é o `name`, então, nesse caso, usamos `author`. Nele, dizemos que queremos passar o nome do autor do site. Dentro de `content`, passamos o nome do autor.
##### Descrição
Outro caso é a descrição da página, que impacta diretamente no SEO da sua página. Também é essa descrição que fica em destaque no google. Utilizamos dessa forma:
```html
```
No `name` informamos a função da metatag. Já no `content` passamos toda informação necessária para descrever nossa página. Vale ressaltar que não há limite de caracteres, você pode fazer uma descrição detalhada da sua página.
##### Palavra chave
Nessa metatag usamos `keywords`, as palavras chaves. Isso ajuda os mecanismos de busca a sugerir sua página, quando algum usuário busca algum tema que você destacou como palavra chave. Para usar essa metatag, você deve fazer dessa forma:
```html
```
No `name`, declaramos a palavra `keywords`, dentro de `content`, separando por vírgula, colocamos as palavras chaves que queremos associar nossa página.
#### Metatag OG
As `og` são um tipo de metatag criada pelo Facebook, para auxiliar os desenvolvedores na quando precisamos compartilhar a página. A sigla `og`, vem de `Open Graph Protocol`. No site oficial do [The Open Graph protocol](https://ogp.me/ "site oficial"), podemos ver toda documentação, com descrições detalhadas sobre as opções de uso. Entretanto, vamos ver como podemos usar algumas dessas tags.
##### Og:title
Quando estamos trabalhando com `og`, não usamos o atributo `name` para diferenciar o sentido da tag. Nós usamos o atributo `property` para dar o sentido que queremos.
```html
```
Sendo bem semelhante com a forma que vimos as tag até agora, acaba, de um certo modo, facilitando a compreensão. Dentro do atributo `property` adicionamos `og:` e, só então, colocamos o valor que queremos. No caso, o titulo de compartilhamento do site. Seguindo o padrão, no `content`, colocamos o título.
##### Og:image
Com essa metatag, podemos passar uma imagem de compartilhamento. Pode ser tanto uma imagem que está dentro do seu site, como uma url de imagem.
```html
```
Assim como no anterior, dentro de `property` passamos qual a função. Após isso, no `content` passamos o caminho da imagem ou, a url dela.
##### Og:image:width e og:image:height
Outra caracteristica que podemos modificar, é a largura e altura da imagem de compartilhamento. Dessa forma, estamos dizendo que a imagem tem uma proporção específica e você não quer que a imagem fique distorcida.
```html
```
Dentro de `property` informamos, se queremos modificar a largura com `image:width`. Ou, a altura, com `image:height`. Sempre utilizando `og:` na frente. Como vimos anteriormente, dentro de `content` passamos o valor em `pixel` que queremos da imagem.
[  Formação Desenvolvedor Especialista Front-end Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-front-end)
### Veja na prática como utilizar e a importância das matatags
### Conclusão
Existem alguns sites que fazem o teste de compartilhamento pra gente. Esses sites nos ajudam a ver como nossa página ficaria e, até se está faltando alguma propriedade. Três grandes empresas criaram esse tipo de site para auxiliar os desenvolvedores, [Twitter](https://cards-dev.twitter.com/validator "Twitter"), [Meta](https://developers.facebook.com/tools/debug/ "Meta") e [Linkedin](https://www.linkedin.com/post-inspector/ "Linkedin").
Embora não seja obrigatório o uso dessas metatags no HTML. Em um ambiente profissional, ou até mesmo, em um projeto pessoal, é de extrema importancia o uso dessas tags de forma correta.
Seja como for, o domínio em metatags pode diferenciar o rank do nosso site e, em vários casos, pode impactar no número de acesso da sua página. Isso se levar em conta que uma página com uma boa descrição e uma imagem de compartilhamento que faça sentido com conteúdo, pode atrair mais cliques.
- [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end)
- [ #SEO ](https://www.treinaweb.com.br/blog/tag/seo)
- [ #HTML ](https://www.treinaweb.com.br/blog/tag/html)
Autor
## Amauri Blanco Corrêa
Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia.
[Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri)
## Continue estudando
Transforme leitura em prática com os cursos e formações da TreinaWeb.
[Ver cursos](https://www.treinaweb.com.br/cursos)
Continue lendo
## Artigos relacionados
-  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira)
3 anos atrás
## [ A importância do inglês na área de tecnologia: como ele pode te ajudar? ](https://www.treinaweb.com.br/blog/a-importancia-do-ingles-na-area-de-tecnologia-como-ele-pode-te-ajudar)
Confira nesse artigo alguns pontos que justificam a importância do inglês neste meio e como você pode aproveitar essa ajuda do idioma para impulsionar a sua carreira.
Ler artigo
-  [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software)
7 anos atrás
## [ A importância da documentação para desenvolvedores de software ](https://www.treinaweb.com.br/blog/a-importancia-da-documentacao-para-desenvolvedores-de-software)
Confira neste artigo a importância da documentação de um software.
Ler artigo
-  [ Design ](https://www.treinaweb.com.br/blog/categoria/design)
10 anos atrás
## [ UX: A importância da experiência do usuário nos projetos ](https://www.treinaweb.com.br/blog/ux-a-importancia-da-experiencia-do-usuario-nos-projetos)
Em um mercado competitivo, projetar uma boa experiência acaba sendo fundamental para o sucesso de um produto ou serviço.
Ler artigo
-  [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux)
2 anos atrás
## [ UX Inclusivo: A importância da acessibilidade no design ](https://www.treinaweb.com.br/blog/ux-inclusivo-a-importancia-da-acessibilidade-no-design)
Confira a importância de tornar suas aplicações móveis acessíveis para todos, garantindo inclusão social, maior alcance e conformidade legal.
Ler artigo
-  [ Design ](https://www.treinaweb.com.br/blog/categoria/design)
8 anos atrás
## [ Manual da marca: sua importância e o que ele deve conter ](https://www.treinaweb.com.br/blog/manual-da-marca-sua-importancia-e-o-que-ele-deve-conter)
Veremos neste artigo, a importância do manual da marca para a manutenção da identidade visual de um negócio. Também conhecido como manual de identidade visual ou brand guideline, ele, por muitas vezes é pouco valorizado ou até mesmo desconhecido por parte das empresas.
Ler artigo
-  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira)
7 anos atrás
## [ Soft Skills: por que você precisa delas? ](https://www.treinaweb.com.br/blog/soft-skills-por-que-voce-precisa-delas)
Conheça um pouco mais sobre o termo Soft Skills e a importância em sua carreira.
Ler artigo
-  [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux)
6 anos atrás
## [ Arquitetura da informação - um breve overview ](https://www.treinaweb.com.br/blog/arquitetura-da-informacao-um-breve-overview)
Confira neste artigo o que é Arquitetura da Informação, seus conceitos fundamentais e qual a importância de ter essa estruturação.
Ler artigo
-  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira)
5 anos atrás
## [ 5 dicas para conseguir um bom estágio ](https://www.treinaweb.com.br/blog/5-dicas-para-conseguir-um-bom-estagio)
Conquistar a primeira experiência profissional para adquirir experiência na área pode parecer difícil - e às vezes é mesmo. Por isso, separamos algumas ações simples, para tentar facilitar essa busca e te ajudar a conseguir as oportunidades da melhor maneira.
Ler artigo
-  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira)
3 anos atrás
## [ 5 passos para vencer a procrastinação nos estudos de TI ](https://www.treinaweb.com.br/blog/5-passos-para-vencer-a-procrastinacao-nos-estudos-de-ti)
Se você sofre com a procrastinação, confira essas dicas que irão te ajudar a impulsionar seus estudos.
Ler artigo
-  [ Certificações ](https://www.treinaweb.com.br/blog/categoria/certificacoes)
8 anos atrás
## [ 5 motivos para você ter uma certificação ](https://www.treinaweb.com.br/blog/5-motivos-para-voce-ter-uma-certificacao)
Está em dúvida se uma certificação vale a pena? Veja cinco motivos que podem te ajudar a tomar essa decisão.
Ler artigo
-  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira)
6 anos atrás
## [ O que é mindfulness e como pode nos ajudar na área de TI? ](https://www.treinaweb.com.br/blog/o-que-e-mindfulness-e-como-pode-nos-ajudar-na-area-de-ti)
Conheça mindfulness, como sua prática ajuda na vida pessoal e profissional. E como aplicar ele no seu dia a dia na área de tecnologia da informação.
Ler artigo
-  [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon)
6 anos atrás
## [ O que é VPC e como ela funciona? ](https://www.treinaweb.com.br/blog/o-que-e-vpc-e-como-ela-funciona)
A VPC é o principal serviço de rede privada na AWS e ela tem uma íntima ligação em como suas aplicações estarão distribuídas dentro dos servidores da AWS. Vamos entender qual é a sua importância e o que podemos fazer com uma VPC na AWS.
Ler artigo
## Um ano de acesso total para você viver de programação.
Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.
- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**
**Garantia incondicional de satisfação**
Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.
### Acesso completo a todos os cursos e dezenas de Formações.
12 meses
Economize R$ 840,00 54% OFF
de 12x R$ 129,00 por apenas
12x R$ 59,00
sem juros no cartão de crédito ou R$ 599,00 à vista
Oferta termina em **10h 54min 42s**
- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!
[Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br)
Escola online de programação, tecnologia e IA.
- [ ](https://www.facebook.com/TreinaWeb/)
- [ ](https://www.instagram.com/treinaweb/)
- [ ](https://www.youtube.com/user/TreinaWeb)
- [ ](https://twitter.com/treinaweb)
- [ ](https://www.linkedin.com/company/treinaweb)
- [ ](https://github.com/treinaweb)
## Inscreva-se em nossa newsletter
Receba lançamentos, promoções e novidades.
Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se
## Cursos
- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)
## Conteúdo
- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)
## A empresa
- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)
## Baixe nosso aplicativo
[ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile)
Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58