Usando Chrome DevTools para solução de problemas - Semalt Prompts



Chrome DevTools não é algo estranho para a maioria dos profissionais de SEO. Para os clientes, por outro lado, pode ser uma daquelas coisas que você ainda precisa aprender. Bem, na Semalt, parte do nosso processo de atendimento às necessidades de SEO de nossos clientes depende da nossa forma de educar você sobre os aspectos necessários das necessidades do seu site.

As ferramentas de desenvolvimento do Chrome para SEO são importantes, pois as usamos na solução de problemas. Para facilitar a comunicação entre a Semalt e nossos clientes, gostaríamos de mostrar como usamos esta ferramenta para corrigir problemas de SEO em seu site.

Com o Chrome Dev Tools, podemos localizar problemas subjacentes de SEO, que vão desde a rastreabilidade de um site até seu desempenho. Neste artigo, iremos destacar três maneiras como usamos essas ferramentas para servir melhor nossos clientes.

O que é o Chrome DevTools?

DevTools ou Chrome DevTools completo é um conjunto de ferramentas de ajuda ao desenvolvedor da web que são construídas diretamente no navegador Chrome. Usamos essas ferramentas para editar páginas em tempo real e diagnosticar problemas imediatamente. Isso nos ajuda a construir sites melhores para nossos clientes, mas podemos fazer isso mais rápido e garantir que sejam perfeitos.

Todos podemos concordar em grande medida que o Google Chrome é um dos kits de ferramentas mais importantes no arsenal de qualquer profissional de SEO. Independentemente do software de SEO que você usa para automatizar auditorias ou diagnosticar problemas de SEO em escala, o Chrome DevTools continua sendo um must-have. Graças à sua capacidade de fornecer meios cruciais para verificar problemas de SEO em tempo real, muitos profissionais de SEO, incluindo o Semalt, o têm usado repetidamente.

Poderíamos passar mais tempo discutindo as muitas maneiras pelas quais o Chrome DevTools pode ajudar profissionais e desenvolvedores da web, mas nossa atenção está em algo um pouco mais específico. Aqui, queremos compartilhar com você alguns casos diferentes em que contamos com o Chrome DevTools para descobrir e retificar um problema.

Aqui estão três situações em que ter Chrome DevTools não seria uma má ideia:

Configuração do Chrome DevTools para solução de problemas

Provavelmente, você nunca tentou usar o Chrome DevTools. Bem, acessá-lo é tão simples quanto clicar em um site na SERP e clicar em um botão de inspeção. Como profissionais de SEO, temos que ser mais cuidadosos do que isso, mas você tem uma ideia de como isso é usado. Na Semalt, usamos tanto o plano Element, que nos permite observar o DOM, quanto o CSS, que habilita algumas outras ferramentas diferentes na gaveta do console.

Estaremos apresentando um processo passo a passo de como essa ferramenta é usada na solução de problemas de SEO.

Para começar, você deve clicar com o botão direito e selecionar inspecionar. Por padrão, você verá o painel do elemento aparecer, e isso dá uma ideia do DOM e da natureza da folha de estilo usada na construção da página.

Ter essa visão nos oferece muitas coisas em que mergulhar; no entanto, habilitamos a gaveta do console para aproveitar ao máximo o kit de ferramentas.

Clique nos pontos que aparecem ao lado do ícone de configurações e role para baixo até encontrar a opção Mostrar gaveta do console. Alternativamente, simplesmente clicamos na tecla Escape.

Com o console e o painel de elemento habilitados, os usuários podem ter uma ideia do código que foi renderizado no DOM. Os usuários também verão as folhas de estilo que foram usadas para pintar o código no navegador. Bem como várias outras ferramentas que você tem acesso a partir da gaveta do console.

Para os novatos, a gaveta do console pode não mostrar o console em si, mas depois de usar o Chrome DevTools por um tempo, a gaveta do console começa a mostrar o próprio console. O painel do console permite que você visualize as mensagens registradas e também execute o javascript. Não mergulharíamos nisso hoje.

Em vez disso, aqui estão três ferramentas adicionais que analisaremos:
Para encontrar essas ferramentas, selecione mais ferramentas e selecione cada um desses três itens para que apareçam como guias na gaveta do console. Depois de habilitar esses três painéis, podemos começar a solução de problemas.

Alternando o agente do usuário em DevTools

Trocar User-Agent é uma das formas mais negligenciadas de usar DevTools. Este é um teste simples que nos ajudou a descobrir vários problemas diferentes, pois fornece insights sobre como o Googlebot está vendo e processando os recursos de informação em um site.

Para nossa equipe de profissionais de SEO investigativos, o DevTools é usado como uma lupa digna e confiável, permitindo-nos ampliar os problemas em um site não apenas para evitar que esses problemas se desenvolvam, mas também para descobrir as causas básicas de tais problemas.

Como você pode alternar seu agente de usuário no Chrome DevTools?

Ao alternar seu agente de usuário no Chrome, você precisará usar a guia de condições de rede na gaveta do console. Para fazer isso, você desmarca selecionar automaticamente, o que permite que você visualize o conteúdo usando o smartphone Googlebot, Bingbot ou vários outros agentes de usuário para ver como seu conteúdo é entregue.

Se o Google não mostrar a tag de título ou meta descrição atualizada no SERP, sem dúvida o proprietário de tal site ficará preocupado. Entender por que o Google optou por usar uma tag de título completamente diferente ou não atualizou a tag é importante para garantir que as alterações feitas sejam implementadas.

Usando Chrom DevTool para um caso de site alternativo móvel

Em um caso semelhante, depois de mudar o agente do usuário para o smartphone Googlebot, descobrimos que o site ainda estava servindo um site móvel alternativo para o Googlebot. Mas, como o Google já havia mudado para a indexação que prioriza o celular, ele processou e indexou as mudanças no site para celular, mas não conseguiu capturar as atualizações feitas na versão desktop do Domínio.

Você pode presumir que os sites para celular são uma relíquia, mas de fato ainda existem.

Usando Chrome DevTools para detectar a proteção de servidor com excesso de zelo

Existem muitas pessoas com intenções maliciosas na web. Muitos hackers e mal-intencionados tentam usar o Google contra sites na internet. Por esse motivo, alguns CDNs de pilhas de servidor e outros provedores de hospedagem podem oferecer determinados recursos integrados que impedem as falsificações do Googlebot quando sua intenção real é impedir que rastreadores de spam obtenham acesso ao site. Em um esforço excessivo, esses sites podem acabar impedindo o Googlebot de obter acesso ao site. Às vezes, os usuários veem mensagens que indicam "Solicitação não autorizada bloqueada".

Se encontrarmos essas mensagens no SERP do Google, saberemos imediatamente que uma falta está ocorrendo, embora o navegador carregue o conteúdo sem problemas.

Ao usar o recurso de troca de User-Agent, podemos ver que o site está veiculando essa mensagem assim que configuramos o User-Agent para Googlebot Smartphone.

Diagnosticando os principais sinais vitais da Web em DevTools

A guia de desempenho é um dos recursos mais importantes das DevTools. Ele serve como um ótimo portal para solucionar problemas que influenciam a velocidade da página e o desempenho. Em uma nota geral, DevTools pode oferecer algumas informações acionáveis ​​quando se trata de vitais essenciais da web.

As métricas que formam o Core Web Vitals do Google fazem parte da velocidade da página e dos relatórios de desempenho há algum tempo. É muito importante que os profissionais de SEO estejam familiarizados com a maneira de dissecar essas questões. Como webmasters, ficamos mais conscientes da importância dos elementos vitais da web para a eficiência da pesquisa.

Ao usar a guia de desempenho no DevTools, damos um passo mais perto de nos tornarmos melhores no entendimento de importantes métricas da web.

Verifique novamente seus cabeçalhos HTTP e revise o código não utilizado

Você já ouviu falar sobre soft 404s em suas auditorias de SEO? Bem, soft 404s são quando o navegador pode mostrar uma página 404, mas eles retornam um código de resposta 200 OK.
Em alguns casos, o conteúdo pode carregar exatamente como esperado no navegador; no entanto, o código de resposta HTTP pode mostrar um erro 404 ou 302. Também pode ser geralmente incorreto ou não o que você esperava. De qualquer forma, é útil ver o código de resposta HTTP para cada página e recurso.

Embora haja uma série de extensões incríveis do Chrome que fornecem informações valiosas sobre os códigos de resposta, o DevTools pode permitir que você verifique essas informações diretamente.

Neste ponto, DevTools mostra todos os recursos individuais sendo chamados para compilar a página. Isso inclui os códigos de status correspondentes e a visualização em cascata.

Conclusão

Com o Chrome DevTools, você pode encontrar e resolver os problemas subjacentes que impedem o seu site de atingir seu verdadeiro potencial. DevTools são especificamente úteis em suas auditorias técnicas. Além disso, você também desfruta de velocidade ao usar DevTools. Sem sair de nossos navegadores, nossa equipe da Semalt pode se sentir capacitada para detectar problemas de verificação, desde o rastreamento de um site até o seu desempenho.

Semalt está aqui para ajudá-lo a trazer o melhor do seu site, e esperamos que você entre em contato com nossa equipe. Estamos ansiosos para ouvir de você.


mass gmail