Como Colocar um Índice em um Post do Blogger (Passo a Passo Completo)

 

Ter um índice no seu post do Blogger deixa o conteúdo muito mais organizado e fácil de navegar. Além de melhorar a experiência do leitor, o índice também ajuda no SEO, porque o Google reconhece a estrutura do texto e pode exibir links de seção direto na busca. Se você quer deixar seus posts mais profissionais, este tutorial é pra você.

O que é um índice e por que usar

O índice (ou sumário) é aquela listinha no início do post que mostra os principais tópicos do conteúdo e permite que o leitor vá direto para a parte que mais interessa.
Por exemplo: se você escreve um tutorial longo, o índice facilita o acesso rápido às partes específicas, sem precisar rolar tudo.

Passo 1 – Use títulos e subtítulos corretamente

Antes de criar o índice, é essencial organizar o texto usando as tags de título do Blogger:

• Título principal: use o Título (H1) apenas uma vez — ele é o nome do post.
• Subtítulos: use Subtítulo (H2) para os tópicos principais.
• Subtítulos menores: use Subtítulo secundário (H3) para subtópicos dentro de cada seção.

Exemplo:

<h2>Como criar uma conta no Blogger</h2>

<h3>Passo 1: Acesse o site</h3>

<h3>Passo 2: Faça login</h3>

<h2>Como personalizar o tema</h2>

Passo 2 – Ative o modo HTML do seu post

1. Abra o post no painel do Blogger:
2. Clique em Editar no post desejado.
3. No editor, vá até a aba HTML (fica no canto superior esquerdo).

Agora você verá o código do seu texto.

Passo 3 – Adicione o código do índice

Copie este código abaixo e cole no início do seu post, onde você quer que o índice apareça:

<div id="indice">

  <b>Índice:</b>

  <ul id="toc"></ul>

</div>

<script>

document.addEventListener("DOMContentLoaded", function() {

  var toc = document.getElementById("toc");

  var headers = document.querySelectorAll("h2, h3");

  var currentH2;

  headers.forEach(function(header) {

    var id = header.innerText.toLowerCase().replace(/\s+/g, "-");

    header.setAttribute("id", id);

    if (header.tagName === "H2") {

      currentH2 = document.createElement("li");

      var link = document.createElement("a");

      link.href = "#" + id;

      link.innerText = header.innerText;

      currentH2.appendChild(link);

      toc.appendChild(currentH2);

    } else if (header.tagName === "H3" && currentH2) {

      if (!currentH2.querySelector("ul")) {

        var sublist = document.createElement("ul");

        currentH2.appendChild(sublist);

      }

      var subitem = document.createElement("li");

      var sublink = document.createElement("a");

      sublink.href = "#" + id;

      sublink.innerText = header.innerText;

      subitem.appendChild(sublink);

      currentH2.querySelector("ul").appendChild(subitem);

    }

  });

});

</script>

Dica extra

Sempre revise seus títulos antes de publicar. O índice automático depende deles.
E lembre-se: quanto mais organizado o conteúdo, melhor é a experiência do leitor e o desempenho do post no Google.

Colocar um índice no post do Blogger é uma das formas mais simples de deixar seu conteúdo mais profissional e otimizado. Com apenas um código básico, você melhora a navegação e ainda conquista mais pontos de SEO.

Se tiver mais alguma dúvida, deixe seu comentário aqui embaixo que responderei assim que possível