Utilizando o Console do navegador: dicas para analistas de SEO

A +A −

Neste artigo, vamos trazer um exemplo prática de como usar IA e códigos JavaScript para coletar todos os heading tags de uma página e exibi-los em um formato de lista, uma das ações estratégicas dentre as inúmeras possibilidades. Isso pode ser útil para profissionais de SEO que desejam analisar a estrutura de headings de uma página web em poucos cliques.

O que é e como funciona o console do navegador?

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 de 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.

Tela do Console acessado pelo navegador Google Chrome

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.

Essas técnicas são executadas dependendo do tipo de análise que você quer fazer. Com o avanço da Com inteligência artifical, as pessoas ganharam novas habilidades a nível de desenvolvimento, que antes estavam nas mãos dos programadores, e podem agora tirar insumo de infinitas possibilidades.

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 headings na página
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// Cria uma lista para armazenar os resultados
const headingList = [];

// Itera sobre cada heading encontrado e adiciona à lista
headings.forEach(heading => {
    headingList.push(`${heading.tagName.toLowerCase()}: ${heading.textContent.trim()}`);
});

// Exibe a lista de headings no console
console.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ágina
const images = document.querySelectorAll('img');

// Cria uma lista para armazenar os resultados
const missingAltImages = [];

// Itera sobre cada imagem encontrada
images.forEach(img => {
  // Verifica se a imagem não tem o atributo 'alt' ou se o valor está vazio
  if (!img.hasAttribute('alt') || img.getAttribute('alt').trim() === '') {
    // Adiciona a imagem e sua URL à lista
    missingAltImages.push({
      src: img.src,
      element: img
    });
  }
});

// Exibe a lista de imagens sem 'alt' no console
if (missingAltImages.length > 0) {
  console.log('Imagens sem atributo alt:');
  missingAltImages.forEach((img, index) => {
    console.log(`Imagem ${index + 1}: ${img.src}`);
    console.log('Elemento:', img.element);
  });
} else {
  console.log('Todas as imagens possuem o atributo alt.');
}

Insights finais

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.