Estratégias De SEO Técnico: Construir A Arquitetura Correta, Schema, Javascript, API’s.

No artigo anterior de SEO técnico parte 2 abordamos como fazer o rastramento quanto á disponibilidade de um site, vimos o erro 404, os servidores/CDN’s, os navegadores, diretivas dos Robots, redirecionamentos, códigos de status de respostas HTTP e como fazer a canonização de um site. Neste artigo vamos verificar como se faz a arquitetura de um site, assim como o Schema, o Javascript e as APIs.

• 4º passo da Estratégia: Construir a Arquitetura correta

• Schema

• JavaScript

• APIs

• Conclusão

4º Passo Da Estratégia: Construir A Arquitetura Correta

Grande parte do SEO técnico é mostrar ao Google/motores de busca, todos os caminhos incutidos dentro de um site, para que este entenda as hierarquias entre páginas e conexões entre links internos. Para isso o site precisa de uma boa arquitetura/estrutura, com lógica de hierarquização e categorização das páginas:

A formatação de URL’s amigaveis – não muito extensos e diretos ao assunto em questão;
Criação do Sitemap XML no site;
A linkagem interna entre URL’s – mostra ao Google quais são as páginas que têm mais autoridade no site;
Menus de Navegação;
Categorização.

Um código HTML bem organizado vai ajudar muito no processo de rastreamento, pois é através dele que os bots podem interpretar o conteúdo e entender a sua relevância. Um exemplo de uma boa estrutura são os “Breadcrumbs” – apresentam o caminho que o utilizador percorreu dentro do site (categorias e subcategories) para chegar até determinada página. Esta informação também pode ser utilizada para os motores de busca fazerem uma melhor leitura do seu site.

Outra regra para que o site tenha uma boa estrutura é, ter em mente de que o utilizador não deve dar mais do que 3 cliques até chegar ao conteúdo pretendido, neste caso, pode sempre melhorar o menu, colocando mais secções primárias neste, ou pode optar por ter 2 menus, desde que relevantes, por exemplo, para um E-commerce, que têm bastantes categorias, teria o menu principal e o secundário, com outras listagens mais detalhadas.

Outra possibilidade de melhoria da arquitetura do site é o rodapé, este é composto por diversos links, nele também têm de pensar qual será a estratégia de exposição deste, deve agrupar temas por categorias e reencaminhar o utilizador para as páginas mais importantes do site, assim como as redes sociais, que demonstram aos motores de busca, que o site está linkado a outras redes, e o mapa do sítio, diferente do Sitemap XML, este é apenas uma página em que contém todos os caminhos que o site fornece.

Outra técnica de estrutura de um site é colocar links no meio da homepage, por exemplo, se tiver noticias ou categorias, fazer menções às mesmas. Assim tanto o utilizador vai perceber logo, através de 1 único clique, que existe estas páginas em específico, como os motores de busca fazem a ligação instantânea de todo o site.

Utilize Twitter Cards no site, estes são protocolos que permitem anexar fotos, vídeos e outros mídias interativos a Tweets, direcionando tráfego para o seu site. Estes Twitters Cards podem ser integrados no site através de HTML, em cada página que queira adicionar. Existem os seguintes:

Cartão de resumo;
Cartão de aplicativo;
Cartão de geração de leads.

Cartão de resumo pode ser usado para posts, notícias, páginas de produto:

Cartão de aplicativo pode ser usado para promover aplicativos móveis no Twitter e aumentar as instalações, se o seu aplicativo não estiver disponível na loja de aplicativos, o Twitter não poderá obter essas informações, indique também a metatag twitter:app:country:

Cartões de geração de leads podem cobrar informações sobre clientes. Os utilizadores podem manifestar interesse sobre a sua empresa sem precisar de preencher um formulário ou sair da conta do Twitter. Para configurar este cartão de geração de leads gratuito, precisa de fazer login na sua conta do Twitter Ads. No wordpress pode adicionar estes cartões através do plugin “Yoast SEO”, “Cartões do Twitter JM“ ou “JetPack”.

A pesquisa facetada refere-se à lupa de pesquisa, esta pesquisa dá a possibilidade ao utilizador de pesquisar por produtos específicos, utilizando palavras-chave. Esta pesquisa multifacetada pode ser também através de filtros, um Marketplace, por exemplo, como a amazon, utiliza bastante esta técnica, filtrar os produtos por categorias. A pesquisa facetada proporciona ao utilizador a facilidade de procura do produto que já têm em mente.

Outro método a ter em conta são as paginações, isto é, normalmente existe muito conteúdo para determinado tema, convém que o utilizador não tenha de fazer muito scroll nas páginas, pois o mesmo vai dispersar a sua atenção e sairá daquela página. A melhor prática para esta situação é dividir a página ao meio, assim terá 3, 4 ou 5 páginas a falar do mesmo tema. No wordpress, por padrão, mostra sempre 10 artigos por página, mas pode editar para ficar com menos ou mais:

Mas o wordpress também têm outra coisa boa, pode editar o artigo em si e dividi-lo a meio, para isso basta colocar um código HTML na edição do artigo:

<!–nextpage–>

Outra coisa que o wordpress têm de bom são os plugins para fazer estas páginações, como o “WP-PageNavi”, “WP-Paginate“ ou o “Pagination by BestWebSoft”.

Adicione também o protocolo Open Graph, é utilizado para facilitar a transmissão de dados entre os sites e as Redes Sociais. Ele consiste em tags implementadas para indicar características da partilha de conteúdos. Para transformar as suas páginas da Web em objetos de gráfico, precisa adicionar metadados básicos à sua página, as <meta> tags na <head> da página web:

og:title- O título do seu objeto;
og:type- O tipo do seu objeto. Dependendo do tipo especificado, outras propriedades também podem ser necessárias.
og:image- Um URL de imagem que deve representar o seu objeto dentro do gráfico.
og:url- O URL canônico do seu objeto que será usado como ID permanente no gráfico.

<html prefix=”og:https://ogp.me/ns#”> <head> <title>Título</title> <meta property=”og:title” content=”título” /> <meta property=”og:type”content=”video.movie” /> <meta property=”og:url”content=“https://www.imdb.com/title/tt0117500/” /> <meta property=”og:image” content=”https://ia.media-imdb.com/images/rock.jpg” /> … </head> … </html>

Fazer a arquitetura do site é importante, mas requer tempo e conhecimentos de UX, os parâmetros mais importantes a ter em conta são:

Menor número de cliques;
Conteúdo agrupado por tópicos;
Destacar o conteúdo mais importante;
Organize os links internos de forma a ficarem interligados por todas as páginas do site;
Evitar a Canibalização de Palavras-chave (A canibalização de keywords ocorre quando páginas de um mesmo blog têm como foco o mesmo termo de pesquisa. Ou seja, a empresa concorre consigo mesma).

O Google fornece uma ferramenta de assistente de dados estruturados para ajudar este processo. Outra ferramenta que ajuda na visualização de toda a estrutura interna e da profundidade das páginas do seu site é a “Screaming Frog”.

Schema

A Notação Schema é um código HTML colocado nas páginas do site que ajuda os motores de busca a entenderem melhor o seu conteúdo. Schema é um vocabulário de dados estruturados que define entidades, ações e relacionamentos na Internet. Esse vocabulário possibilita que os mecanismos de busca compreendam os significados por detrás dos assuntos na web e, por sua vez, proporcionem uma melhor experiência para o utilizador. O Google tem uma galeria de pesquisa que mostra os vários recursos de pesquisa e o Schema necessário para que o seu website se qualifique: https://schema.org/docs/gs.html.

As marcações de Schema são normalmente usadas para indicar:

– Artigos,

– Eventos,

– Produtos,

– Pessoas,

– Organizações,

– Negócios Locais,

– Avaliações e comentários,

– Receitas,

– Condições médicas.

Javascript

Cada vez mais sites utilizam o JavaScript na construção destes, pois este fornece conteúdos dinâmicos dentro das páginas web e além disso é uma linguagem muito versátil. Um SEO precisa de estar atento ao site que utiliza JavaScript pois pode impactar ou causar alguma anomalia quando os motores de busca estão a rastrear o site, porque o Google, apesar de nos dias de hoje, conseguir ler esta linguagem, ainda têm algumas falhas/más interpretações. Para saber se um site utiliza Javascript, apenas tem de se identificar esta tag no código HTML: <script> .

O SEO têm de estar atento a esta tag nos Title, Description, Canonical, entre outras, têm de se certificar que o arquivo está a responder rápidamente , para que essas informações sejam entregues ao crawler (motores de busca) de forma intantânea, se não corre o risco de ficar sem essas informações exibidas. Sites Javascript são alimentados com conteúdos externos, que respondem de acordo com os acessos ao site. Por isso, é importante que esse tempo de resposta seja o menor possível, não passando dos 5 segundos. Para saber mais sobre o Javascript poderá aceder a estas páginas: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics | https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript.

No wordpress pode adicionar Javascript ao código desta maneira: adicione um script em páginas selecionadas usando um plugin como o “WPCode” (pequenos pedaços de código, como scripts); adicione o script numa página específica ou em várias páginas utilizando o functions.php; ou adicione um arquivo Javascript ao cabeçalho do seu tema. Pode conhecer e perceber mais sobre Javascript em wordpress acedendo a esta página: https://www.collectiveray.com/pt/adicionar-javascript-ao-wordpress .

Nalguns casos de aplicações NodeJS ou outras com layouts complexos que dependem de javascript, pode acontecer que alguns conteúdos não sejam exibidos. Um dos métodos utilizados para evitar isso é a pré-renderização (pré-render), que identifica o tipo de acesso ao seu site e, quando identifica que é um utilizador, entrega o arquivo para renderização pelo lado do cliente (client-side rendering), quando for identificado que é um crawler, como o Googlebot, o site será renderizado dentro do servidor (server-side rendering). Existem diversas soluções de pré-render, dependendo da tecnologia/framework que se está a utilizar. Quem utiliza AngularJS pode usar o prerender.io. Para quem usa React, um dos indicados é o react-snap.

Ferramentas que podem ajudar a verificar como está o JavaScript no site são o “GTmetrix”. No “Google Search Console” faça testar como o Google, escolha o bot desktop e mobile, de seguida entre o “Buscar” e “Buscar e Renderizar”. “Merkle SEO” têm uma gama de ferramentas muito versáteis para verificar/testar o site como se estivesse pelo lado motores de busca.

APIs

Uma API de SEO é uma Interface de Programação de Aplicativos que permite aos desenvolvedores adicionar recursos de SEO aos aplicativos. Muitas vezes, para utilizar uma API, irá precisar de uma chave de API. Após adquirir a sua API key, pode utilizá-la para interagir manualmente com a API, por meio de clientes HTTP online, como o Postman ou o Runscope ou fazê-lo pela sua linha de comandos, por exemplo, para poder utilizar a API do Pagespeed Insights, terá de aceder a este site que fornece a informação de como proceder: https://developers.google.com/speed/docs/insights/v5/get-started.

Existem diversas APIs para diversos temas de SEO, o processo é o mesmo para todas as outras:

Conclusão

SEO técnico é muito extenso e precisa de ser estudado regularmente, muitas regulamentações ou updates estão a ser implementados todos os dias, o SEO profissional deve estar atento as novas possibilidades neste nicho de mercado e atualizar-se constantemente. Neste artigo parte 3 vimos parte da construção da arquitetura correta de um site, no artigo parte 4 iremos analisar Conteúdos Duplicados, Hreflangs, Mobile, AMP, APPS Progressivas, a segurança e a velocidade de um site.

Atualmente, muitas empresas precisam de resultados imediatos, mas a verdade é que não podem dar-se ao luxo de implementar SEO internamente enquanto alavancam com a prioridade do foco do seu negócio. Se ainda não consegue dar conta destas etapas ou não tiver tempo para as colocar em prática, a Bringlink SEO garante que tenha a visibilidade e o crescimento da marca que merece.

Fale connosco, envie email para a bringlinkseo@gmail.com.