Utilizando o Console do navegador: dicas para analistas de SEO

O Console do Navegador é um recurso poderoso disponível nas ferramentas de desenvolvimento dos navegadores modernos, como Google Chrome, Mozilla Firefox e Microsoft Edge e permite que os desenvolvedores interajam diretamente com as páginas web, execute comandos JavaScript, depure código e visualize mensagens e erros em tempo real.

Quem trabalha com infra, back-end, front-end SEO ou mesmo com taguemento de páginas, data layers, precisa saber usar o Console dos navegadores. Basicamente, o Console é útil para diversos propósitos:

• Depuração de código: identifique e corrija erros no código JavaScript.
• Teste de scripts: experimente pequenos trechos de código para verificar seu comportamento.
• Inspeção de elementos: examine e modifique o conteúdo e atributos dos elementos da página.
• Interagir com elementos: aqui é o ponto chave de usa-lo ao seu favor, você pode manipular elementos para concretizar desejos diversos.

Neste artigo, vamos trazer um exemplo prática de como usar JavaScript para coletar todos os heading tags de uma página e exibi-los em um formato de lista. Isso pode ser útil para profissionais de SEO que desejam analisar a estrutura de headings de uma página web em poucos cliques.

Vale lembrar que esse é apenas um conteúdo introdutório ao tema, de um exemplo básico para evidenciar o quão poderoso o recurso pode ser:

Abrindo o Console do navegador

Para usar o Console do Navegador, siga estes passos:

• Google Chrome: Pressione Ctrl + Shift + I (Windows) ou Cmd + Option + I (Mac) e selecione a aba “Console”.
• Mozilla Firefox: Pressione Ctrl + Shift + K (Windows) ou Cmd + Option + K (Mac).
• Microsoft Edge: Pressione F12 e clique na aba “Console”.

Script para coletar as headings

Com o Console aberto, você pode usar o seguinte script para coletar todos os heading tags da página e exibi-los em formato de lista:

/ Seleciona todos os heading tags (h1, h2, h3, h4, h5, h6) da páginanconst headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');nn// Cria uma lista para armazenar os resultadosnconst headingList = [];nn// Itera sobre cada heading encontrado e adiciona à listanheadings.forEach(heading =u003e {n  headingList.push(`${heading.tagName.toLowerCase()}: ${heading.textContent.trim()}`);n});nn// Exibe a lista de headings no consolenconsole.log(headingList.join('n'));

Este script faz o seguinte:

1. Seleciona todos os elementos de heading (h1 a h6) da página.
2. Armazena os headings em uma lista formatada como tag: texto.
3. Exibe a lista formatada no Console.

Testando o script

Para testar o script:

1. Abra a página web que você deseja analisar.
2. Acesse o Console do Navegador conforme descrito anteriormente.
3. Cole o script no Console e pressione Enter.
4. Você verá uma lista de todos os heading tags da página exibida no Console.

Como o ChatGPT pode te ajudar a ter ideias de usar o Console?

Se você precisa de ajuda para criar códigos personalizados ou deseja automatizar a coleta de informações específicas de páginas web, o ChatGPT pode e deve te ajudar, pois afinal, ele deve ser seu maior parceiro como analista de SEO.

Você pode instruir o ChatGPT sobre o que precisa, e ele pode gerar scripts JavaScript ou fornecer orientações para atender às suas necessidades. Por exemplo, você pode pedir ao ChatGPT para criar um script que extrai dados específicos, que identifica imagens sem alt, que pede insights do código HTML na questão semântica, ajuda com dados estruturados, enfim, é o seu assistente virtual mais TOP daqui para frente.

Código para pegar as imagens sem ALT e fazer uma lista no console

// Seleciona todas as imagens na páginanconst images = document.querySelectorAll('img');nn// Cria uma lista para armazenar os resultadosnconst missingAltImages = [];nn// Itera sobre cada imagem encontradanimages.forEach(img =u003e {n  // Verifica se a imagem não tem o atributo 'alt' ou se o valor está vazion  if (!img.hasAttribute('alt') || img.getAttribute('alt').trim() === '') {n    // Adiciona a imagem e sua URL à listan    missingAltImages.push({n      src: img.src,n      element: imgn    });n  }n});nn// Exibe a lista de imagens sem 'alt' no consolenif (missingAltImages.length u003e 0) {n  console.log('Imagens sem atributo alt:');n  missingAltImages.forEach((img, index) =u003e {n    console.log(`Imagem ${index + 1}: ${img.src}`);n    console.log('Elemento:', img.element);n  });n} else {n  console.log('Todas as imagens possuem o atributo alt.');n}

O Console do Navegador pode coletar e exibir todos os heading tags de uma página web e fazer outras zilhões de ações que antes eram obscuras e só desenvolvedores podiam ajudar. Com a inteligência artifical, você pode aprimorar ainda mais suas habilidades e criar soluções personalizadas para suas necessidades de desenvolvimento e SEO.

Se você está em busca de um parceiro renomado no mundo do SEO, a Pink and Brain pode te ajudar. Somos ratos quando o assunto é SEO e desenvolvimento web.