Quando construímos um site, todos nós queremos que ele seja reconhecido, esteja bem posicionado nos motores de pesquisa e existem formas de o fazer acontecer. Hoje falar-te-emos de como tirar partido de tags de HTML para SEO.

SEO é Search Engine Optimization, o que significa Otimização para o Motor de Pesquisa e, se nós tivermos um bom SEO, a nossa página aparecerá melhor posicionada nos resultados das pesquisas que fazemos.

As tags de HTML são partes do código da nossa página, invisíveis ao leitor comum, e visíveis apenas quando se consulta o código-fonte da página. Estas tags servem para dar informação aos motores de pesquisa acerca do conteúdo da nossa página.

E agora a questão é, como é que estas duas coisas se relacionam? Como é que as tags de HTML influenciam o SEO?

Para além de darem informação aos vários motores de pesquisa sobre o conteúdo da nossa página, também fazem com que tenhamos SERPs mais apelativos e informativos (Search Engine Results Page, ou Página de Resultados do Motor de Pesquisa, são cada um dos resultados que vemos nas páginas de resultados, como podem ver na imagem abaixo). Isto acaba por resultar numa melhor experiência do utilizador, pois os resultados de pesquisa que lhe são apresentados são mais aproximados daquilo que eles pretendem.

SERP

Vamos então fazer uma viagem pelas tags mais relevantes e, uma por uma, perceber a sua importância.

Uma nota extra para quem não é entendido nisto de HTML: as páginas estão sempre divididas em duas secções: Header e Body. A secção Header é onde colocamos toda a informação-base da página, já na secção Body, colocamos o conteúdo.

Podemos ver o HTML como uma casa que se começa a construir pelo telhado, ou seja, pelo Head.

 

Tag de título

A tag de título é, geralmente, a primeira coisa que o utilizador vê nas SERPs e nas janelas dos browsers, por isso, esta é considerada uma das mais importantes tags de HTML para SEO.

Apostar num bom título para a nossa página é imperativo, assim como incluir uma keyword para aumentarmos as nossas hipóteses contra a concorrência.

<head>
<title>5 Tendências de marketing digital para 2019 | Diamond By BOLD</title>
</head>

Dicas para tags de título:

Uma das formas de otimizar os nossos títulos é ao ter em conta o número de caracteres, que não deve ser superior a 60. Uma forma de reduzir o número de caracteres é utilizando símbolos como “&” e “/” para substituir algumas palavras.

Títulos grandes não são necessariamente títulos maus, mas é preferível que o nosso título não seja cortado pelo motor de pesquisa. De qualquer forma, devemos tentar sempre colocar a informação mais importante no início e evitar utilizar apenas letras maiúsculas.

Os nossos títulos devem ser únicos, caso contrário o Google irá pensar que a nossa página tem conteúdo duplicado de outra página e penalizar-nos-á por isso.

E o mais importante de tudo: escrever para o utilizador, sempre!

 

Tag de meta descrição

Esta tag é uma das mais importantes tags de HTML para SEO, quase tanto como a de título. Ela ajuda os motores de pesquisa e o utilizador a entenderem o assunto da página.

Nos motores de pesquisa, quando a nossa página é mostrada na pesquisa, a meta descrição insere-se no snippet da SERP, logo a seguir ao título e URL da página. Outro local onde a meta descrição aparece é nas partilhas em redes sociais, tal como o título, logo abaixo deste.

A meta descrição, quando bem escrita, pode aumentar a nossa taxa de cliques para a página. Mas atenção! Esta deve corresponder ao conteúdo da nossa página, caso contrário há uma grande possibilidade da taxa de rejeição também aumentar e isso não nos favorece em nada.

<head>
<meta name="description" content="O mundo está sempre a mudar. Já conheces as tendências de marketing digital para 2019? Fica já a saber quais são e como as utilizar na tua estratégia."/>
</head>

Dicas para tags de meta descrição:

Tal como o título, a meta descrição também tem um limite de caracteres, que foi aumentando ao longo dos últimos anos até chegar aos 375 caracteres. Ainda assim e apesar de não haver um número ideal de caracteres, o nosso conselho é apontarem para os 160.

Não nos podemos esquecer que muitos dos acessos à internet são feitos via dispositivos móveis e estes têm um ecrã mais pequeno (especialmente se for um smartphone).

Por uma questão de segurança, devemos manter sempre a informação mais importante no início!

As keywords pesquisadas pelo utilizador aparecem realçadas a negrito, por isso devemos otimizar a nossa descrição para as keywords que escolhemos.

Também a meta descrição deve ser única e pensada para o utilizador, caso contrário o Google irá assumir que a nossa página tem conteúdo duplicado, not cool.

Por fim, e nós até já fizemos um artigo acerca disto, o Schema.Org. Utilizando esta ferramenta, podemos tornar os snippets mais apelativos ao utilizador, podem dar uma vista de olhos!

 

Tags de Open Graphs

As tags de Open Graph são as tags de HTML para SEO que servem para alterar a forma como o conteúdo partilhado aparece ao utilizador.

Por exemplo: as partilhas em redes sociais mostram o título e a meta descrição, tal como nas SERPs. As tags OG servem para tornarmos o nosso título e meta descrição mais apelativos para redes sociais, porque cada meio tem as suas especificidades e, o que resulta para um utilizador clicar ao pesquisar algo no motor de pesquisa, pode não resultar ao deparar-se com esse mesmo conteúdo numa rede social.

No que é que isto se traduz? Aumento da taxa de cliques e, idealmente, do número de conversões também.

A estrutura de uma tag de OG é a seguinte:

Título: Deve ter entre 60 e 90 caracteres, e irá substituir a tag de título;

Tipo: Este serve para especificarmos o tipo de conteúdo que estamos a partilhar, se é um vídeo, imagem, artigo, ou até mesmo um website;

Descrição: Esta tag ocupa o lugar que a tag de meta descrição ocuparia nas partilhas em redes sociais e não deverá ultrapassar os 200 caracteres. Aqui, não há necessidade de otimizar para alguma keyword, pois esta descrição não aparece nas SERPs. Assim, temos uma liberdade maior para a tornar interessante para o utilizador;

Imagem: Não é novidade que as imagens tornam logo tudo mais apelativo para o utilizador e a que probabilidade deste clicar num link com imagem é maior. Deve-se apostar numa imagem marcante e até pode ter algum texto, mas num local pouco provável de acabar recortado quando é mostrada apenas em miniatura;

Cartões de Twitter: Os cartões de Twitter são tags de OG, mas especificamente pensadas para o Twitter. Funcionam como uma extensão aos caracteres permitidos por esta rede social e permitem-nos destacar-nos de outras publicações.

<head>
<meta property="og:type" content="article" />
<meta property="og:title" content="5 Tendências de marketing digital para 2019 | Diamond By BOLD" />
<meta property="og:description" content="O mundo está sempre a mudar. Já conheces as tendências de marketing digital para 2019? Fica já a saber quais são e como as utilizar na tua estratégia." />
<meta property="og:image" content="https://www.diamondbybold.com/wp-content/uploads/2019/03/Telemóvel-computador-e-bloco-de-notas.jpg" />
</head>
<head>
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="O mundo está sempre a mudar. Já conheces as tendências de marketing digital para 2019? Fica já a saber quais são e como as utilizar na tua estratégia." />
<meta name="twitter:title" content="5 Tendências de marketing digital para 2019 | Diamond By BOLD" />
<meta name="twitter:site" content="@diamondbybold" />
<meta name="twitter:image" content="https://www.diamondbybold.com/wp-content/uploads/2019/03/Telemóvel-computador-e-bloco-de-notas.jpg" />
<meta name="twitter:creator" content="@diamondbybold" />
</head>

 

Robots tag

A robots tag serve para informar o motor de pesquisa de páginas que não queremos que sejam indexadas, ou seja, não sejam mostradas nos resultados de pesquisa. Agora pensam….: “Ah, mas se não forem indexadas, não temos visitas nessas páginas, isso não é bom para o SEO!”. Pois, enganam-se.

Esta tag é utilizada para o caso de nós termos uma página com conteúdo “menos interessante” e que não queremos que seja indexada. Mas isto não quer dizer que nos vamos prejudicar: em princípio, se for uma página com informação pouco relevante para a maioria dos utilizadores como os “Termos e Condições”, não existirão pesquisas para essa página.

Casos bons de páginas a desindexar são páginas privadas, páginas com conteúdo duplicado, páginas spam auto-geradas pelo website (community profile pages, por exemplo). Uma thank-you page, que só deve ser encontrada depois dos utilizadores fazer uma ação específica.

Resumindo, não é uma das tags de HTML para SEO que promova a subida da vossa classificação, mas previne que esta desça. Conteúdo é rei, e se o utilizador entrar numa página sem conteúdo relevante para ele, o mais provável é abandonar a página, o que aumenta a nossa taxa de rejeição e piora a nossa classificação.

Uma nota final: se por acaso existirem pesquisas relacionadas com o conteúdo de alguma página que tencionamos desindexar, talvez seja uma boa oportunidade para otimizar essa página.

Tipos de robots tags:

Noindex – previne a indexação da nossa página;

Nofollow – previne o rastreio dos links que temos na nossa página;

Noarchive – utiliza-se quando não queremos que apareça alguma cópia em cache da nossa página nos resultados de pesquisa;

Nosnippet – se não quisermos que a descrição da nossa página apareça, esta tag é a que devemos usar;

None – esta agrega o “noindex” e o “nofollow”.

Atenção, há sempre a possibilidade de o motor de pesquisa ignorar as nossas robots tags e isso é algo que não podemos controlar de forma nenhuma.

<head>
<meta name=“robots" content=“noindex" />
<meta name=“robots" content=“nofollow" />
<meta name=“robots" content=“noarchive" />
<meta name=“robots" content=“nosnippet" />
<meta name=“robots" content=“none" />
</head>

 

Canonical tag

Sim, nós dissemos que não devemos ter conteúdo duplicado. Mas por vezes é impossível não ter duas páginas com conteúdo idêntico. Aí entra a tag canónica. Esta tag tem a função de informar o motor de pesquisa sobre qual é a página mais importante.

Isto é bom para o SEO porque informa que as páginas são apenas parecidas e não iguais, logo, não somos penalizados. E, mais importante, evita que uma página com menor importância seja valorizada em detrimento de outra mais relevante.

<head>
<link rel="canonical" href="https://www.diamondbybold.com/5-tendencias-de-marketing-digital-para-2019/" />
</head>

Dicas para Canonical tags:

Avaliem bem qual a página onde inserem esta tag. Deve ter-se em conta o volume de pesquisas, a pertinência das páginas e, caso já existam dados suficientes, escolher como principal aquela que tiver uma melhor classificação.

 

Tag de cabeçalho

As tags de cabeçalho são os micro-títulos que constam na nossa página. Eles têm 6 níveis, e devem ser utilizados consoante a importância do assunto de cada uma das partes do conteúdo da página.

Estes micro-títulos promovem que as páginas tenham uma leitura mais fácil, tanto para o utilizador como para os motores de pesquisa.

<body>
<h1>5 Tendências de marketing digital para 2019</h1>
<h2>Inteligência Artificial e Machine learning</h2>
</body>

Dicas para tags de cabeçalho:

Ao contrário do que muitos dizem, já não é assim tão mandatório utilizar apenas uma tag de nível 1 (h1). No entanto, também não devemos exagerar no seu uso.

Devemos também otimizar os nossos micro-títulos para a keyword que queremos otimizar, principalmente os micro-títulos h1.

 

Atributo de texto alternativo

Esta não é uma tag de HTML para SEO, é um atributo, pois insere-se dentro da tag de imagem. O atributo de texto alternativo serve para descrevermos as imagens da nossa página. Esta tag é importante para o motor de pesquisa perceber o que contêm as nossas imagens.

Assim, lê o texto alternativo e já sabe de que se trata. Pode ser tão simples como “mulher a beber café de uma chávena com flores” ou “infografia sobre o consumo de pão na Europa”.

O browser pode não carregar as nossas imagens e, por isso, utilizamos o “alt-text”. Ao colocar alt texts nas nossas imagens, o utilizador pode saber o que estaria naquele espaço, caso a imagem tivesse sido corretamente carregada.

O texto alternativo desempenha um papel importante na otimização de imagens. Ele torna-as acessíveis tanto aos motores de pesquisa (informando o que uma determinada imagem significa) como às pessoas (exibindo um texto alternativo no caso de uma determinada imagem não poder ser carregada).

<head>
<img width="300" height="199" src="https://www.diamondbybold.com/wp-content/uploads/2019/03/Telemóvel-computador-e-bloco-de-notas-300x199.jpg" class="attachment-diamond-post size-diamond-post wp-post-image" alt="Telemóvel, computador e bloco de notas" />
<img class="size-full wp-image-1550" src="https://www.diamondbybold.com/wp-content/uploads/2019/03/voice-search-survey_D2_p2_dec17.png" alt="Estudo de pesquisa por voz" width="1000" height="437" />
</head>

Dicas para atributos de texto alternativo:

Caracteres, de novo. Estas descrições não devem ultrapassar os 125 caracteres, caso contrário, serão cortadas.

Nunca deixar a descrição da imagem vazia, esse é dos erros mais comuns e influencia a nossa classificação.

Utilizar keywords nas descrições. Não em exagero, mas as imagens que acrescentam valor ao texto da nossa página devem ser otimizadas!