A disciplina de "Search Engine Optimizations"(SEO) procupa-se em estruturar website, páginas e conteúdo de forma a que sejam mais facilmente descobertas e o seu valor acentuado aos olhos dos motores de pesquisa (tais como Google, Bing, Yahoo, etc.). Consequentemente, se as nossas páginas forem mais relevantes para os motores de pesquisa, os nossos utilizadores conseguem encontrá-las mais facilmente.

Um efeito secundário interessante de nos preocuparmos com questões de SEO é o facto de contribuir para a melhoria da acessibilidade do nosso site.

Nota: Esta página ainda está a ser activamente trabalhada e irá futuramente ter mais informação acerca desta temática.

Estratégia de conteúdo

Para resultados de SEO consistentes, é necessário, antes de considerar qualquer tag e optimização, qual é a estratégia de conteúdo que se pretende. Ou seja, quais são os termos relevantes que queremos ver associados com o site, que termos irão os utilizadores utilizar para chegar a conteúdo (nosso ou não) do tipo que oferecemos? Esses termos tornam-se relevantes para as descrições, meta keywords e outros conteúdos do site.

Informação genérica necessária:

• Nome do produto;
• Palavras chaves que queremos ver associadas ao produto;
• Descrição para o produto;
• Descrição para as várias secções do site.

Consideremos, por exemplo, um produto chamado "SAPO Fisco" com as palavras-chaves:

• "IRS", "preenchimento", "declaração", "ajuda"

Recursos

Ficheiros essenciais ou que ajudam os crawlers dos sistemas de pesquisa a recolherem o conteúdo certo.

Robots.txt

O ficheiro robots.txt permite dar indicações aos crawlers dos sistemas de pesquisa sobre que páginas não deverão recolher ou quais as condições para recolhê-las (e.g., limitar a certa altura do dia).

Tipicamente, pretende-se impedir o acesso dos crawlers:

• às páginas de pesquisa;
• ao login e signup;
• aos backoffices.

Sitemap.xml

O sitemap.xml consiste num ficheiro que lista as páginas existentes no site.

Não sendo mandatório, o site ajuda os crawlers do motor de pesquisa a encontrar todas as páginas.

É particularmente útil incluir este ficheiro no site quando:

• O site tem uma grande dimensão. Minimiza a hipótese do crawler não apanhar uma página nova ou que foi actualizada;
• O site é novo e tem poucos sites a fazer link para ele;
• As páginas não se referenciam entre si ou estão isoladas.

Metadados

Na concepção de páginas, vários campos e metadados precisam de ser preenchidos para aumentar a relevância das páginas. Esses metadados são declinados a partir do que foi definido na estratégia de conteúdos.

Títulos

De acordo com o tipo de página, o conteúdo e formato do título tem que ser ajustado para destacar a informação que for mais específica no contexto da página que está a ser vista.

O título da homepage tem que ser o nome do produto. Opcionalmente, poderá incluir informação extra de descrição de produto.

Títulos (exemplo):

• SAPO Fisco ou SAPO Fisco: ajuda nas declaração IRS

As páginas internas do site têm que apresentar um título que consiste na ordem da hierarquia. Ou seja, primeiro o nome da página, seguido da secções que se lhe antecedem e por fim o nome do site.

Categorias/artigos/etc.:

• estatudo de mecenato - benefícios sociais - SAPO Fisco

Description

O campo de "description" é usado para descrever a página que se está a apresentar. É importante notar que não se quer um descrição para todas as páginas de site mas sim uma que descreva cada página. Idealmente, deverá conter as palavras-chaves que se considerem relevantes para o contexto. É recomendado uma dimensão entre os 70 e 160 caracteres para este campo.

Exemplo de descrição para a homepage:

Gerir as finanças e preencher o IRS não tem que ser complicado. O SAPO Fisco dá-lhe ajuda na sua declaração de IRS.

Exemplo para uma descrição de uma página de artigo:

Na sua declaração pode incluir o seu contributo para mecenato social. A sua doação a entidades o desenvolvimento dão-lhe vantagens fiscais.

Open Graph - Facebook

O Facebook utiliza um conjunto de atributos, chamados "Open Graph", para definir metadados que utiliza para apresentar páginas partilhadas nas suas redes sociais. A informação pedida para o "Open Graph" são: título da página; descrição; URL. Caso seja uma página de artigo, poderá referir o nome do site (com og:site_name). Se a página tiver uma página que descreva o conteúdo, poderá ser referenciada com o atributo og:image (deverá ter pelo menos 1200×630 pixels).

É possível diferenciar as descrições apresentadas nas meta-tags de "Open Graph", mas é suficiente reaproveitar o que está a ser usado para os crawlers dos motores de pesquisa.

Mais informação disponível em Incluir as tags Open Graph.

Twitter Card

Da mesma forma que é possível partilhar páginas e enriquecer a informação apresentada no Facebook, é possível definir meta-tags para formatar os resultados no Twitter. É denominado de "Twitter Card".

Para um "Twitter card"(twitter:card) do tipo sumário ("summary") é preciso apresentar:

• A indicação do tipo: twitter:card;
• O título: twitter:title;
• A descrição: twitter:description;
• O endereço da página: twitter:url;

Opcionalmente, pode ser definido:

• Uma imagem para o tweet: twitter:image. Deverá ter no mínimo uma dimensão de 120×120px;
• O nome da conta de twitter associada ao site: twitter:site.

Existem mais tipos de "Twitter card" que poderão ser opcionalmente usados: "summary_large_image", "photo", "gallery", "product", "app" ou "player".

Mais informação disponível em: Twitter Cards - Getting Started Guide

Hierarquia de informação

A hierarquia de um site, para as diversas páginas existentes, é importante não só para um bom posicionamento em motores de pesquisa, mas também tem impacto em utilizadores com necessidades especiais (e.g., invisuais).

Como tal, é importante que o elemento <h1> corresponde ao título da página e não ao nome do site (excepto para o caso da homepage), e que não exista saltos entre a hierarquia de cabeçalhos.

A página "Apresentar os conteúdos seguindo uma hierarquia" detalha os cuidados a ter.

Código HTML sem erros

Apesar de inexistência de erros no HTML das páginas não garantir um impacto positivo no SEO das páginas, erros nas páginas podem levar a que os motores de pesquisa não percebam ou interpretem mal a informação contida nas páginas. Como tal, os erros de html tem um impacto negativo na visibilidade que as páginas têm para os motores de pesquisa.

Como tal, verificar sempre o HTML no Validador da W3C.

Atributo ALT nas imagens

O atributo alt nas imagens é mandatório e ajuda os motores de pesquisa a perceber o que está representado na imagem. Infelizmente, a informação muitas vezes mal preenchida.

Caso a imagem seja usada por fins decorativos, o atributo alto deverá estar vazio(alt=""). Caso contrário, a imagem terá que descrever o que está a ser mostrado na imagem.

Para mais informação consultar como Fornecer alternativas textuais aos elementos não-textuais.

Indicar o idioma da página

Não é fácil identificar automaticamente o idioma na qual as páginas estão escritas daí que as os motores de pesquisa necessitam que lhes seja indicado o idioma no qual a página está escrita.

A identificação do idioma é feita no atributo 'lang' de elemento <html> da seguinte forma:

<!doctype html>
<html lang="pt">
  <!-- Documento escrito em português -->
  …

Este atributo aceita quer códigos de idiomas(pt para português, en para inglês, ...) quer idioma por região (pt-PT, português de Portugal; pt-BR, português do Brasil).

No caso de existir pedaços de texto que estou num idioma diferente do que está especificado pela página, é igualmente possível utilizadar o atributo lang. Por exemplo, se quiser indicar uma expressão francesa numa página em português, poderia marcar da seguinte forma:

<!doctype html>
<html lang="pt">
  <!-- Documento escrito em português -->
  …
<body>
  …
  <p>Em francês, <em>por favor</em> é dito <em lang="fr">s'il vous plaît</em>.</p>
  …

Os valores aceites para os idioma estão definidos nas especificações RFC bcp47, ISO 639-1 e ISO 3166-1 alpha-2.

Indicar conteúdo traduzido

Caso o site tenha páginas que apresente o mesmo conteúdo diferentes locais, quer adaptando o idioma quer adaptando a informação lá contida(moeda, horários, ...), é necessário identificar as versões localizadas de forma a que os motores de pesquisa possam fornecer a versão mais relevante aos utilizadores.

Para indicar a existência de versões alternativas, é necesário incluir dentro do elemento <head> um elemento <link> com os atributos 'rel="alternate"' e 'hreflang="[idioma]".

<html lang="pt">
<head>
  …
  <link rel="alternate" hreflang="en" href="http://ux.sapo.pt/en/" />
  …
</head>
…

Todas as versões, se forem conteúdo canónico, deverão apontar para as versões alternativas, e não somente a versão que consideramos como a principal. Ou seja, na página de destino do exemplo anterior, o cabeçalho html deverá conter a seguinte informação:

<html lang="pt">
<head>
  …
  <link rel="alternate" hreflang="pt" href="http://ux.sapo.pt/" />
  …
</head>
…

Como nota final, só os conteúdos canónicos é que deverão incluir a informação de conteúdos alternativos. Às páginas não-canónicas só lhes é exigido que apontem para as páginas canónicas.

Saber mais

• Uso de hreflang para definir os URLs de idioma e região

Referências

• Search Engine Optimization Starter Guide - Google