Modelo - Meta Tags para SEO

INTRODUÇÃO
Traduzido do inglês-Meta elementos são tags usadas em documentos HTML e XHTML para
fornecer metadados estruturados sobre uma página da Web. Eles fazem parte da seção
principal de uma página da web. Vários elementos Meta com diferentes atributos podem ser
usados na mesma página.
O QUE SÃO META TAGS?
Meta Tags: As meta tags fornecem informações adicionais sobre uma página da web para os
mecanismos de busca e navegadores. Isso inclui descrições, palavras-chave, autor, idioma,
codificação, entre outros. A tag <meta> é usada para incluir essas informações na seção
<head> do código HTML.
SEO TÉCNICO
O SEO técnico envolve otimizar aspectos da estrutura e do código de um site para melhorar
a forma como os motores de busca rastreiam, indexam e classificam. O uso correto e
otimizado de meta tags faz parte dessa estratégia para garantir que os mecanismos de busca
compreendam a relevância do conteúdo da página.
TITLE TAG
A tag <title> é usada para definir o título da página, que é exibido na parte superior da janela
do navegador e também nos resultados da pesquisa. Ela é fundamental para o SEO, pois
ajuda a descrever o conteúdo da página de maneira concisa e relevante
HEADING TAGS
As tags de cabeçalho, como <h1>, <h2>, <h3>, etc são usadas para definir a estrutura
hierárquica do conteúdo da página. Elas não apenas ajudam a organizar o conteúdo para os
leitores, mas também têm um impacto no SEO, pois os mecanismos de busca consideram o
texto nas tags de cabeçalho como indicadores importantes do tema principal da página.
PREFIXO META
O prefixo "meta" é frequentemente usado para se referir a informações sobre informações,

ou seja, metadados. Isso é semelhante ao termo "metalinguagem", que se refere à
linguagem que descreve e comenta sobre outra linguagem. No contexto das meta tags, o
prefixo "meta" indica que essas tags fornecem informações sobre a própria página.
Em resumo, as meta tags, juntamente com outras práticas de SEO técnico, desempenham um
papel vital na otimização de um site para os mecanismos de busca. Ao usar meta tags de
forma adequada e otimizada, você ajuda os motores de busca a entender o conteúdo da
página e a melhorá -la nos resultados da pesquisa.
META TITLE TAG
A meta tag Title é um elemento HTML que define o título de uma página web. É considerada
uma das meta tags mais importantes para o SEO, pois o texto inserido na tag Title aparece
como o título da página nos resultados de pesquisa dos motores de busca. A tag Title
também é exibida na barra de título do navegador quando a página é aberta. Um título
relevante e envolvente pode ajudar a atrair mais cliques e melhorar a visibilidade nos
resultados de pesquisa. É importante que o título seja descritivo, contenha palavras-chave
relevantes e seja otimizado para o contexto da página.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
–OPÇÕES DE META TITLE TAG–
<title>"Titulo da sua página aqui"</title>
</head>
<body>

</body>
</html>
META DESCRIPTION
A meta tag Description é um elemento HTML que fornece uma breve descrição do conteúdo
de uma página web. Ela é usada pelos mecanismos de busca para exibir um resumo do
conteúdo nas páginas de resultados. A meta tag Description deve ser relevante para a
página, concisa e atrativa, fornecendo informações importantes para os usuários e
incentivando-os a clicar no link. É importante que a descrição seja única para cada página e
tenha um limite de caracteres recomendado de 150 a 160.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
OPÇÕES DE META DESCRIPTION
<meta name="description" content="Descrição do conteúdo da sua página aqui">
<title>O título da sua página aqui</title>
<style>/* Seu código CSS aqui */
</style>
</head>
<body>
</body>
</html>
META KEYWORDS
A meta tag Keywords é um elemento HTML que costumava ser amplamente usado para
indicar palavras-chave relevantes para o conteúdo de uma página web. No entanto, a maioria
dos motores de busca já não dá importância a essa meta tag, pois ela pode ser facilmente
manipulada para melhorar o posicionamento nos resultados de pesquisa. Portanto, não é
mais considerada relevante para o SEO (Search Engine Optimization). Em vez disso, os
motores de busca agora priorizam o conteúdo relevante e de qualidade da página para
determinar a sua classificação nos resultados de pesquisa.
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Principais keywords (palavras-chave) da sua

página aqui ”>
<title>Minha ONG</title>
<style>/* CSS para estilizar a página */
</style>
</head>
<body>
<h1>O título da sua página aqui!</h1>
<p>Texto</p>
<p>Texto </p>

</body>
</html>
META AUTHOR
O meta author é uma meta tag usada em HTML para informar o autor da página da web. Ele
fornece informações sobre quem criou ou contribuiu para o conteúdo da página. Essa meta
pode incluir o nome do autor, seu e-mail, uma URL de contato ou qualquer outra informação
relevante. O meta author não é exibido na página, mas ajuda a identificar a autoria da página
para os visitantes e também pode ser usado pelos motores de busca para atribuir crédito ao
autor. É uma prática recomendada incluir o meta author, especialmente em sites com vários
colaboradores ou em páginas com conteúdo autoral importante.
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Propago">
OU
<meta name="author" content="nome da organização">
</head>
<body>

</body>
</html>
META ROBOTS
A meta tag Robots é um elemento HTML que permite controlar como os robots dos motores
de busca interagem com uma determinada página. É usada para instruir os motores de busca
sobre o que deve ou não ser indexado, seguido e exibido nos resultados de pesquisa. A
meta tag Robots pode ter diferentes valores, como "index", que indica que a página deve ser
indexada, "follow", que indica que os links dessa página devem ser seguidos, "noindex", que
indica que a página não deve ser indexada, "nofollow", que indica que os links da página não
devem ser seguidos, entre outros. Esses valores podem ser usados em combinação para
definir as diretrizes adequadas para cada página. A meta tag Robots é uma ferramenta
importante para otimizar a visibilidade e a indexação de uma página nos motores de busca.
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="index,follow">
<meta name="google bot" content="index,follow">
<meta name="bing bot" content="index,follow">

<meta name="robots" content="noindex,nofollow">
<meta name="google bot" content="no index,nofollow">
<meta name="bing bot" content="no index,nofollow">

<meta name="robots" content="nolink">
<meta name="google bot" content="nolink">
<meta name="bing bot" content="nolink">
</head>
<body>
</body>
</html>
META GEOLOCALIZAÇÃO
A meta geolocalização é uma meta tag usada em HTML para especificar a localização
geográfica de uma página da web. Ela informa ao navegador a latitude e longitude exatas de
onde a página está sendo exibida. Isso pode ser usado por serviços baseados em
localização, como aplicativos de mapeamento, para fornecer informações relevantes e
personalizadas aos usuários com base em sua localização atual. A meta geográfica é útil para
empresas locais, sites de viagens e outras aplicações que desejam oferecer conteúdo ou
funcionalidades específicas para usuários em locais geográficos específicos. No entanto, é
importante respeitar a privacidade dos usuários e obter seu consentimento antes de utilizar a
meta geolocalização.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Descrição do me u website">
<meta name="keywords" content="palavra-chave 1, palavra-chave 2, palavra-chave 3">
<meta name="author" content="Seu Nome">
<meta name="location" content="Endereço da Organização">
<meta name="location" content="Latitude, Longitude">
<title>Me u Website</title>
<style>
body {text-align: center;}
</style>
</head>
<body>
<h1>Bem-vindo ao meu website</h1>
<p>Este é um exemplo de página que utiliza as MetaTags de localização.</p>

<p>A localização definida nas MetaTags é : <span id="location"></span></p>
<script>document.getElementById("location").inner HTML = document.get

ElementsByName("location")[0].content;</script>
</body>
</html>
Neste código HTML, são definidas as MetaTags de localização ("location") utilizando o atributo
`name="location"` e o atributo `content` especifica a localização desejada ("São Paulo, Brasil").
Em seguida, no JavaScript, o código `document.getElementById("location").inner HTML`
seleciona o elemento com o ID "location" e insere o valor do atributo `content` das Meta Tags
de localização nesse elemento, exibindo assim a localização na página.
META OPEN GRAFH
A meta Open Graph é uma meta tag usada em HTML que permite que os desenvolvedores
controlem como uma página ou site aparece quando é compartilhado em uma plataforma de
mídia social. Ela foi desenvolvida pelo Facebook e é amplamente utilizada em outras redes
sociais, como o Twitter e o LinkedIn. Com a meta Open Graph, é possível especificar o título,
descrição, imagem e outros detalhes que serão exibidos quando um link é compartilhado em
uma plataforma. Isso permite um maior controle sobre como o conteúdo é apresentado,
tornando-o mais atraente e relevante para os usuários. A meta Open Graph é uma maneira
eficaz de otimizar o compartilhamento de conteúdo nas redes sociais e aumentar a
visibilidade e o engajamento de um site ou página.
As meta tags do Open Graph são utilizadas para melhorar a forma como as páginas do seu
site são exibidas nas redes sociais, permitindo uma melhor apresentação dos links
compartilhados. Abaixo está um exemplo de código HTML/CSS que mostra como adicionar
as meta tags do Open Graph em uma página:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta property="og:title" content="Título da página aqui”>
<meta property="og:description" content="Decrição do Conteúdo da página">
<meta property="og:image" content="URL_da_Imagem">
<meta property="og:url" content="url da página">
<meta property="og:type" content="website">
<title>"Título"</title>
<style>
body {text-align: center; margin-top: 100px; font-family: Arial, sans-serif;}
h1, p {margin-bottom: 20px;}

</style>
</head>
<body>
<h1>Título da Página</h1>
<p>Descrição da Página</p>

</body>
</html>
Nesse exemplo, o código HTML inclui as seguintes meta tags do Open Graph:
- A tag òg:title` define o título da página que será exibido nas redes sociais.
- A tag òg:description` define a descrição da página que será exibida nas redes sociais.
- A tag òg:image` define a URL da imagem que será exibida como miniatura nas redes
sociais.
- A tag òg:url` define a URL da página que está sendo compartilhada.
- A tag òg:type` define o tipo de conteúdo da página, sendo `website` para páginas web
genéricas.
Você pode personalizar essas tags de acordo com as informações da sua própria página.
Lembre-se de substituir "URL da Imagem" e "URL da Página" pelos links relevantes.
No exemplo acima, também é adicionado algum estilo CSS simples para a página, apenas
para melhorar a aparência de localização nesse elemento, exibindo assim a localização na
página.
RESUMO IMPORTANTE
Portanto as Meta tag´s ficariam basicamente como a estrutura abaixo:


<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="robots" content="index,follow" />

<meta property="og:title" content="Título que aparece na hora de
compartilhar" />
<meta property="og:description" content="Descrição que aparece em baixo

do título" />
<meta property="og:site_name" content="Nome do site que a essa página

está relacionada" />
<meta property="og:url" content="https://doacao.dominiodaong.org.br/"

/>
<meta property="og:type" content="website" />
<meta property="og:image" content="URL para a Social Image" />
<meta property="og:image:type" content="MIME Type da Social Image" />

<meta property="og:image:alt" content="Texto alternativo, caso a imagem
não carregue" />
<meta property="og:image:width" content="largura da imagem" />
<meta property="og:image:height" content="altura da imagem" />


<meta property="og:locale" content="pt_BR" />


<meta property="og:locale:alternate" content="en_US" />


<meta property="og:locale:alternate" content="es_ES" />

<meta name="twitter:title" content="Título do card do link" />
<meta name="twitter:description" content="Descrição do card do

link" />
<meta name="twitter:card" content="informação de como o card será

exibido" />
<meta name="twitter:image" content="imagem a ser exibida no card"

/>
<meta name="twitter:image:alt" content="Texto alternativo caso a

imagem não carregue" />


<meta name="DC.title" content="Título que aparecerá do local geográfico
da ong" />

<meta name="IBCM" content="00.0000000, 00.0000000" />

<meta name="geo.position" content="00.0000000;00.0000000" />


<meta name="geo.region" content="BR-SP" />

<meta name="geo.placename" content="DEFAULT na cidade de X" />
<title>Título Da Página</title>
<meta name="description" content="Descrição da página que aparece

embaixo do título na SERP da Google ou qualquer outro mecanismo de
busca" />
<meta name="keywords" content="palavras-chave, que, estão,

relacionadas, com aquela página, separadas, por, vírgula" />
<link rel="canonical" href="https://doacao.dominiodaong.org.br/"

/>

Modelo - Meta Tags para SEO

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Modelo - Meta Tags para SEO

Enviado por

Direitos autorais:

Formatos disponíveis

INTRODUÇÃO

O QUE SÃO META TAGS?

O prefixo "meta" é frequentemente usado para se referir a informações sobre informações,

<meta name="viewport" content="width=device-width, initial-

–OPÇÕES DE META TITLE TAG–

<title>"Titulo da sua página aqui"</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

OPÇÕES DE META DESCRIPTION

<meta name="description" content="Descrição do conteúdo da sua página aqui">

<title>O título da sua página aqui</title>

<style>/* Seu código CSS aqui */

<body>

<meta name="keywords" content="Principais keywords (palavras-chave) da sua

<style>/* CSS para estilizar a página */

<h1>O título da sua página aqui!</h1>

<meta name="author" content="Propago">

<meta name="author" content="nome da organização">

<meta name="robots" content="index,follow">

<meta name="google bot" content="index,follow">

<meta name="bing bot" content="index,follow">

<meta name="robots" content="noindex,nofollow">

<meta name="google bot" content="no index,nofollow">

<meta name="bing bot" content="no index,nofollow">

<meta name="robots" content="nolink">

<meta name="google bot" content="nolink">

<meta name="bing bot" content="nolink">

<body>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Descrição do me u website">

<meta name="keywords" content="palavra-chave 1, palavra-chave 2, palavra-chave 3">

<meta name="author" content="Seu Nome">

<meta name="location" content="Endereço da Organização">

<meta name="location" content="Latitude, Longitude">

body {text-align: center;}

<h1>Bem-vindo ao meu website</h1>

<p>Este é um exemplo de página que utiliza as MetaTags de localização.</p>

<script>document.getElementById("location").inner HTML = document.get

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta property="og:title" content="Título da página aqui”>

<meta property="og:description" content="Decrição do Conteúdo da página">

<meta property="og:image" content="URL_da_Imagem">

<meta property="og:url" content="url da página">

<meta property="og:type" content="website">

body {text-align: center; margin-top: 100px; font-family: Arial, sans-serif;}

h1, p {margin-bottom: 20px;}

- A tag `og:url` define a URL da página que está sendo compartilhada.

Portanto as Meta tag´s ficariam basicamente como a estrutura abaixo:

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta property="og:description" content="Descrição que aparece em baixo

<meta property="og:site_name" content="Nome do site que a essa página

<meta property="og:url" content="https://doacao.dominiodaong.org.br/"

<meta property="og:type" content="website" />

<meta property="og:image" content="URL para a Social Image" />

<meta property="og:image:type" content="MIME Type da Social Image" />

<meta property="og:image:width" content="largura da imagem" />

<meta property="og:image:height" content="altura da imagem" />