Chrome DevTools para SEO: Algumas maneiras de usar esses recursos dopara suas auditorias de SEO


22 de março de 2017

banner1

Embora muitos de nós na indústria pagam centenas ou mesmo milhares para software SEO que ajuda a automatizar e simplificar nosso trabalho todos os dias, já temos um dos conjuntos de ferramenta SEO grátis mais acessível no mercado com a DevTools do Google Chrome. Embutido no Google Chrome, este conjunto de web criação e ferramentas de depuração nos permite validar alguns aspectos mais fundamentais e crítica SEO de qualquer página.

Na maioria dos casos, usar DevTools é bastante simples. Mas existem alguns aplicativos muito úteis e não tão óbvios para análise SEO. Vamos passar por eles agora.

Comece a navegar para a página que você deseja investigar no Google Chrome e abrindo DevTools. Você pode fazer isso selecionando ferramentas mais > Developer Tools menu no canto superior direito da janela do seu navegador Google Chrome.

banner2

Google-chrome-devtools
Como alternativa, você pode usar os atalhos de teclado Ctrl + Shift + I (Windows) ou Cmd + Opt + I (Mac), ou você pode botão direito do mouse sobre o elemento de página que você gostaria de investigar e clique em “Verificar” no menu suspenso que aparece.

1. Verifique os principais elementos de conteúdo da sua página, inclusive aqueles prestados por JavaScript
Google agora é capaz de rastrear e índice de conteúdo baseado em JavaScript, mas ele sempre não fazê-lo na perfeição. Portanto, é uma obrigação para verificar os principais elementos de conteúdo de suas páginas — não apenas revisando seu HTML código-fonte, mas também, verificando seu DOM para ver como a informação vai ser realmente processado e identificado pelo Google.

Diretamente, você pode ver o DOM de qualquer página com DevTools no painel “Elementos”.

cromo-devtools-elementos-guia
Use isto para revisar o conteúdo de qualquer um dos elementos da página (como o título, descrição de meta ou texto da página) para verificar se as informações desejadas são mostradas em cada caso, para ter certeza que é acessível para o Google.

Por exemplo, na parte superior esquerda tela abaixo, podemos ver como o texto principal exibido (em vermelho) está incluído em um

. Mas isso na verdade é implementado com JavaScript, o código para o qual pode ser visto no superior direita tela abaixo, que mostra o código-fonte HTML da página.

Renderização de conteúdo JavaScript
[Clique para ampliar]
Ao identificar essas diferenças entre o conteúdo mostrado em ambos os casos, você pode então tomem as medidas adequadas para verificar o que está sendo indexado corretamente: revendo a versão em cache da página no Google, verificando se o texto é exibido em resultados do Google quando procurá-lo, usando o “buscar como Googlebot” no Console de busca do Google e assim por diante.
2. procure por CSS oculta conteúdo
É sabido que Google “descontos” conteúdo de texto que, embora incluído no código-fonte HTML da página, está oculta para o usuário por padrão com guias ou opções de menu que precisam ser “clicado” para visualizar ou expandi-las.

Entre as maneiras mais comuns de esconder o texto é usando CSS com a “exposição: nenhum” ou “visibilidade: oculto” Propriedades, então é recomendado para verificar se há todas as informações importantes em suas páginas do site que pode ser escondida através destes meios.

Você pode fazer isso com DevTools “Busca” da gaveta do Chrome, que pode ser acessada pressionando Ctrl + Shift + F (Windows) ou Cmd + Opt + F (Mac) quando DevTools está aberto. Esse recurso de pesquisa permitirá que olhe não só através do arquivo de página aberta em si, mas em todos os recursos utilizados, incluindo CSS e JavaScript.

Pesquisar estilos conteúdos ocultos

Aqui, você pode procurar as propriedades desejadas, nesse caso, “ocultas” ou “Exibir: nenhum” para identificar-se/onde elas existem dentro do código da página.

Clique em um resultado de pesquisa para exibir o código completo em redor da propriedade por que já pesquisou. Revisão do código para ver o texto que está sendo escondido; Se é importante conteúdo, verificar se está sendo descontado pelo Google e tomar as ações apropriadas.

3. Verifique se suas imagens descrições ALT
Além de verificar elementos de conteúdo de texto principal das suas páginas, você também pode verificar suas imagens ALT descrições no painel “Elementos”. Botão direito do mouse em qualquer imagem e selecione “Inspect”, conforme mostrado aqui:

Verificar imagens descrições ALT
[Clique para ampliar]
4. identificar a configuração não-indexação & canonização em páginas e recursos
Você também pode usar o DevTools do Google Chrome inspecionar configuração técnica das suas páginas. Por exemplo, você pode validar o meta robots e tags canônica configuração, que pode ser feita usando a gaveta de “Search” para procurar essas marcas específicas e rever como eles são implementados.

devtools-busca-canonical
Esta validação pode ser feita não só para a implementação dessas marcas na áreade HTML, mas também nos cabeçalhos HTTP, indo ao painel de “Rede” e selecionar a página desejada ou o recurso para verificar as informações de cabeçalho, incluindo a existência de um link rel = “canonical” em um arquivo de imagem, por exemplo, como mostrado abaixo.

devtools-rede-cabeçalhos
5. procure o status HTTP na configuração do cabeçalho
Ao verificar a configuração de cabeçalho das páginas e recursos usando o painel de “Rede”, você também pode verificar seu status HTTP e ver se há qualquer redirecionamentos, qual tipo de redirecionamentos são

  , , , ,

Categorias


  • Portfólio ( 1 )

  • AdSense ( 1 )

  • Jobs ( 2 )

  • WordPress ( 3 )

  • Segurança ( 3 )

  • Curiosidades ( 6 )

  • Redes Sociais ( 7 )

  • Marketing ( 8 )

  • SEO ( 10 )

  • Tags


  • AdSense ( 1 )

  • AMP ( 1 )

  • AMP para Adsense ( 1 )

  • Analytics ( 1 )

  • Anunciantes ( 1 )

  • Aquisição ( 1 )

  • Aquisição da Hootsuite ( 1 )

  • ArtDrone ( 1 )

  • Artigo em SEO ( 1 )

  • AT&T ( 1 )

  • Atualização do WordPress ( 1 )

  • Aula de SEO ( 1 )