Nesse artigo vamos explicar a importância de ter um sumário ou índice em todos os seus artigos e posts de seu website. Vamos explicar também como você pode criar seu sumário no próprio WordPress ou em HTML. Vamos começar com um sumário:
Exatamente assim que faço os sumários dos meus artigos no WordPress. Manualmente e sem Plugins, posso usar as palavras e IDs que eu quiser. Tudo isso nos artigos que eu desejar, sem pesar o WordPress com trocentos plugins.
O que é um índice ou sumário?
No artigo ou post, trata-se de links âncoras internos que redirecionam o leitor diretamente para um subtítulo (geralmente H2) de seu post. Isso pode fazer com que ele não perca muito tempo lendo artigos de 2.000 palavras ou que tenha vários assuntos diferentes em um único post.
Se tratando da palavra em geral, índice é uma lista de palavras que pode ser organizado por ordem alfabética, sistemática, cronológica, numérica ou alfanumérica.
Um índice é o mesmo que indicador, sinal ou sintoma, um fator de referência que serve para comparar, explicar determinada situação ou condições, indicando também as suas respectivas páginas de um livro ou uma lista de coisas.
O sumário é uma lista que tem no início do artigo, [monografia, livro etc.] com todos os capítulos da obra. Sumário é a enumeração das principais divisões, seções de outros documento, na ordem em que a matéria se sucede, sendo então um resumo rápido, simples, sintético e conciso.
Traduzindo, ambos são a mesma coisa, mas eu prefiro pessoalmente chamar de sumário. Algumas pessoas provavelmente buscaram por índices no WordPress, outros buscaram por sumário e alguns até por links âncora.
O principal motivo de eu usar as duas expressões nesse artigo, é exatamente para melhorar a posição e ranqueamento no Google e conseguir alcançar mais pessoas. Na verdade, esse é um objetivo de usarmos sumários e índices nos artigos.
A Importância de links âncoras e um índice
Os links âncoras são qualquer link que direciona para um trecho da sua página ou até mesmo para outra página do site. Eles são de grande importância e não devem ser ignorados de forma alguma, caso queira se destacar entra a concorrência.
Os sumários e índices são bastante importantes em um artigo ou post. Isso acontece porque os links âncoras facilitam o ranqueamento de seu artigo e ainda possibilita que ele apareça com mais frequências em palavras chaves alternativas.
Dessa forma, sempre adicione um sumário no seu artigo a fim de melhorar o SEO. Eu faço isso manualmente, muitos utilizam plugins, mas acredito que manualmente me permite uma personalização melhor das IDs dos links âncoras.
Como deve ser um Índice com Links âncoras?
Os índices precisam ser listados em um bloco que se destaca, com uma cor de fundo diferente e com um título em negrito (eu uso o bloco Pré-formatado). A lista do sumário pode ser ordenada com um traço [-] seguido do tema que vai ter o link âncora.
Você pode ou não fazer a lista de assuntos do sumário com as mesmas palavras do subtítulo. Eu as vezes prefiro variar um pouco no índice e no subtítulo H2. Tento variar com palavras diferentes para o texto ter mais chances de ser encontrado no Google.
As âncoras são links que começam com [#] que índica que o caminho está dentro da própria página. Alguns possuem a mania de colocar o links âncoras aleatórias com números ou palavras nada haver com o assunto do subtítulo.
Devemos lembrar que mesmo se tratando de uma âncora [#exemplo], é importante que ela contenha palavras chaves para se posicionar melhor no google e outros buscadores. Por isso nunca use números ou coisas aleatórias nas suas âncoras.
Já percebeu que sempre nos ícones um link é representado por uma corrente? Já a âncora é representado literalmente por uma âncora? Traduzindo de forma simples, âncora é o final da corrente ou o destino final do link que está estabelecido em algum lugar.
Quais os problemas de fazer um índice no seu artigo?
Apesar de ser muito vantajoso para o SEO e Rankeamento de seu site, um índice pode fazer com que o leitor pule diretamente para parte desejada, ficando menos tempo em seu site e vendo menos anúncios. Pode ou não afetar sua taxa de rejeição e CPC.
Índices em artigos e posts com poucas palavras também podem parecer estranho. Eu costumo usar índices com links âncoras em artigos com mais de 800 palavras e mais de 3 subtítulos H2.
Caso faça isso manualmente, as IDs geradas automaticamente não passa a mesma autoridade que uma ID feita manualmente. Fazer manualmente permite que você adicione âncoras personalizadas e diminui a chance do google considerar como algo ruim.
Como fazer um índice em HTML
Antes da nova versão do WordPress com editor Gutenberg, precisávamos usar manualmente o código HTML para fazer o sumário com links âncoras. Hoje em dia isso se tornou mais fácil graças ao novo editor Gutenberg.
Mesmo assim vou explicar detalhadamente como funciona os links âncoras em HTML. Além do sumário, você precisa manualmente adicionar o [ID] onde os links âncoras irão leva-lo. Geralmente esse ID é colocado em cabeçalhos (H2, H3 e H4).
Primeiramente no sumário ou índice, o código HTML vai está da seguinte forma:
<strong>Sumário do Artigo</strong> <a href=”#nome_da_ancora”>- Título da âncora</a> <a href=”#nome_da_ancora2”>- Título da âncora 2</a> <a href=”#nome_da_ancora3”>- Título da âncora 2</a>
O resultado na visualização do HTML será algo assim:
Esse é um sumário feito em HTML. Perceba que você utiliza a mesma tag de links <a>, mas ao invés do link você adiciona um href=#blabla onde a hashtag [#] índica que o link está na mesma página e trata-se de um ID.
Colocado a hashtag, você deve adicionar o caminho ao seu subtítulo H2 ou outro local que deseja que o sumário te leve. Geralmente o resultado em HTML fica da seguinte forma:
<h2 id=nome_da_ancora>
Como fazer Sumários para WordPress sem Plugin
O ID não precisa de hashtag. No editor do WordPress você pode adicionar o ID sem usar aspas entre a palavra-chave. Ele corrige esse problema automaticamente, acredito que a maioria dos leitores e editores de HTML conseguem entender ser usar as aspas.
Agora como você sabe o funcionamento do sumário, sugiro fazer algo melhor no novo editor Gutenberg. Depois de ter escrito todos os artigos com todos os cabeçalhos H2, você pode simplesmente clicar no botão informações e copiar todo sumário que aparece lá embaixo da Visão geral do documento.
Esse sumário já vai até estar com as hashtags e IDs internas do editor Gutenberg. Você pode simplesmente copiar e colar tudo dentro de uma caixa pré-formatada do WordPress que tem um fundo cinza, apagar os H2 que veem junto com a colagem, e finalizar adicionando um traço [-].
Basta então editar os links do sumário e colocar suas hashtags personalizadas, até ficar como no exemplo que deixamos acima. Depois de fazer isso, basta andar pelo artigo através dos cabeçalhos H2, seleciona-los e então ir nas opções do bloco.
Nas opções de blocos do H2 e outros cabeçalhos, você encontra na aba Avançada a opção Âncora de HTML. Basta colocar o ID que você adicionou no sumário neste campo, sem usar a hashtag [#]. O WordPress vai adicionar automaticamente sem a necessidade de editar HTML.
Table of Content – Plugin para fazer Sumários no WordPress
Ao longo do artigo eu falei sobre fazer sumários de forma manual e minha grande recusa para usar plugins a fim de manter o hyperlink mais limpo. Infelizmente acabei mudando de ideia e para evitar trabalhos e tempos perdidos acabei aderindo a um plugin.
Atualmente uso o plugin LuckyWP Table of Contents e configuro de uma forma que deixa o link ancora minúsculo, sem acentuação e igual ao título H2 e H3. Não tenho muito a falar sobre o plugin, se estava procurando algum, esse considero o melhor.
Âncoras em sumários gigantes usando Editor de Texto
Existem editores de textos que possuem ferramentas de substituições com variáveis que podem permitir que você adicione automaticamente hashtags e IDs aos sumários de artigos do WordPress ou outros textos que estejam em HTML.
Como eu tenho MacOS, utilizo o editor de textos CODA 2. Foi o único que encontrei e permite adicionar facilmente os IDs aos cabeçalhos sem ter que ficar indo e voltando do começo e do fim do artigo. Acredito que o Dreamweaver também tenha ótimas opções de localização e substituição de texto.
Com um programa de editor de textos que suporta variáveis na localização e substituição, adicione o seguinte para localizar e substituir. As variáveis vão estar entre [].
<a href=”#[1]”>- [2]</a>[3]<h2>
A primeira variável vai localizar e memorizar o ID do sumário. A segunda variável vai igualar o restante da linha dentro do sumário, a terceira variável vai levar o restante do artigo até o cabeçalho que ainda não foi adicionado uma ID. Substitua por:
<a lol href=”#[1]”>- [2]</a>[3]<h2 id=[1]>
As vezes seu localizador pode conflitar com algum espaço ou símbolo, mas geralmente ele vai substituir apenas uma vez. Você tem que clicar várias vezes no substituir para ele fazer isso com todos os cabeçalhos do artigo.
É importante fazer isso com apenas artigos de cabeçalhos de um tipo como <H2>, você também não pode ter adicionado nenhuma tag entre os cabeçalhos H2 do código do artigo. Caso algo esteja errado, o editor vai atribuir as variáveis erradas cada vez que você substituir.
A substituição vai pegar as informações do primeiro sumário. O lol no texto serve para evitar que a substituição repita o processo na mesma linha da lista (não esqueça de deleta-lo depois). Na repetição do processo ele vai pular o <H2> com ID e vai direto para o cabeçalho correto.
Pode parecer um pouco confuso, acho que tudo isso poderia ser melhor explicado em vídeo. De qualquer forma, use um pouco a cabeça, agilize seu trabalho e coloque índices em todos seus artigos para se destacar da concorrência e melhorar seu SEO.
Eu também fiz uma vídeo aula bem longa falando sobre como eu escrevo meus artigos. Você pode assisti-lo abaixo: