Quer saber como solucionar problemas de SEO com o DevTools?
Se você é daqueles que não acompanha de perto o que os especialistas do Google ensinam ao longo do ano, está perdendo uma grande oportunidade de evoluir os seus conhecimentos sobre as ferramentas da empresa.
No seu canal do Youtube, o Google tem uma série de vídeos com dicas, insights e tutoriais, conhecida como Lightning Talks.
Em seu último vídeo sobre SEO, o especialista Martin Splitt, ensinou como usar o Google Chrome DevTools para solucionar problemas básicos sobre o tema.
Martin Splitt, é um dos desenvolvedores do Google, full stack developer, sabe programar em várias linguagens como: C/C++/C#, Java / Scala, PHP, Python, Javascript, HTML5 e CSS.
Seu conhecimento técnico e jeito fácil de explicar, tornam este vídeo essencial para desenvolvedores e especialistas em SEO que queiram aprimorar seus conhecimentos e melhorar seus projetos.
Como já assistimos o vídeo e fizemos nossas anotações por aqui, vamos apresentar os highlights mais importantes do vídeo, para ajudar vocês.
Use a inspeção de URL no Google Search Console
Use a inspeção de URL para investigar compatibilidade com dispositivos móveis no Google Search Console. Ao testar a sua URL, a ferramenta vai apresentar se a página está indexada, ou se tem algum tipo de problema, como elemento de HTML ausente na renderização.
Você também pode usar o Google Chrome DevTools para analisar possíveis problemas na responsividade.
Com ele, é possível testar os breakpoints de acordo com a resolução apresentada. Caso queira simular os diversos tipos de dispositivos, é possível. Os principais modelos do mercado estão na lista, como: Iphone, Ipad, Samsung Galaxy, Google Pixel dentre outros.
Você também pode visualizar de acordo com a rotação do dispositivo, selecionar o zoom na página ou determinar a sua própria resolução.
Usando a guia “Elementos” no DevTools
A guia Elementos no DevTools vai exibir todo HTML e CSS renderizado da página que está sendo visualizada no momento.
Essa é uma ferramenta valiosa para pesquisar algum tipo de conteúdo na página e determinar se ele está presente no DOM. Se o conteúdo estiver ausente no HTML renderizado, estará ausente no DOM.
Você também pode editar ou copiar o HTML para levar ou mudar na versão final do código, por exemplo. Se quiser entender sobre o CSS, pode inspecionar as tags HTML e ver cada estilo que foi aplicado.
Se quiser testar algum tipo de comportamento específico em um elemento, é possível testar o seu estado, forçando para hover, active, focus etc.
A guia “Rede” no DevTools
A guia Rede no DevTools permite que você veja o que está acontecendo entre o servidor e seu navegador. Ao recarregar a página, você poderá ver cada solicitação e resposta do servidor.
O diagrama em cascata mostrará quanto tempo é gasto para o carregamento completo daquela tela.
Você também pode inspecionar todas as solicitações e cabeçalhos de resposta, o que pode ajudá-lo a procurar cabeçalhos específicos, como o X-Robots.
Isso pode ajudar a determinar se o conteúdo ausente passou do servidor para o navegador.
Se o conteúdo só aparecer depois de rolar a página, você pode usar a guia Iniciador para ver a solicitação. Essas informações podem ser usadas para corrigir problemas ou otimização do site.
Definindo condições de rede
A guia Rede no DevTools possui outros recursos, como desabilitar o cache, definir a velocidade de transferência da rede e alterar o agente do usuário.
No entanto, é importante observar que definir o agente do usuário como Googlebot pode não gerar os resultados esperados.
O Googlebot também respeita o arquivo robots.txt, que seu navegador ignora, e alguns sites podem fazer pesquisas de IP para ver se a solicitação vem de um data center do Google.
Dica extra: A guia “Lighthouse”
O Lighthouse é uma das melhores guias do Devtools do Google Chrome. Com ele conseguimos testar e melhorar a qualidade das páginas da web. Você pode executá-lo em qualquer página, pública ou que exija autenticação.
Muito semelhante ao Google PageSpeed Insights, de forma rápida e simples, apresenta um relatório geral sobre o desempenho, acessibilidade, melhores práticas, SEO e muito mais.
Você pode determinar qual dispositivo quer fazer auditoria, se é desktop ou mobile, e quais relatórios gostaria de ver detalhadamente. Após a verificação, ele apresenta suas considerações e dicas de como resolver os problemas.
Assista o vídeo de Martin Splitt
É claro que vamos deixar o link do vídeo de Martin Split explicando sobre o devtools para SEO, na íntegra. Não deixe de fazer sua inscrição no canal Google Search Central.
O que é o DevTools?
Se você é iniciante e ainda não sabe o que é o DevTools, é um conjunto de ferramentas integradas aos navegadores, como Google Chrome, Mozilla Firefox e Microsoft Edge. Elas são projetadas para ajudar profissionais Web a diagnosticar e depurar problemas em seus sites, landing pages ou aplicativos web e a melhorar a experiência do usuário.
A ferramenta pode ser usada para várias tarefas como inspecionar e editar códigos HTML, CSS e JavaScript, analisar o desempenho de uma página, otimizar o carregamento, testar e depurar scripts em JavaScript, simular diferentes tipos de dispositivos e muito mais.
Para acessar, é só apertar o F12 no teclado ou clicar com o botão direito do mouse em uma página da web e selecionar a opção “Inspecionar elemento” no menu.
O DevTools é uma ferramenta muito útil para desenvolvedores, profissionais de marketing ou designers e é amplamente utilizado para otimizar e melhorar o desempenho das aplicações web (sites, landing pages ou apps).
Quais os benefícios do DevTools?
Se você está começando a mexer com desenvolvimento, SEO, Web Analytics e ainda tem dúvidas quanto aos benefícios do DevTools, vamos conhecer detalhadamente alguns dos seus recursos:
- Depuração de código: o DevTools permite que você inspecione o código HTML, CSS e JavaScript de uma página web em tempo real e depure os problemas facilmente. Você pode usar as ferramentas de depuração para visualizar os valores de variáveis, acompanhar o fluxo de execução do código, definir pontos de interrupção e mais.
- Otimização de desempenho: fornece diversas ferramentas para analisar o desempenho de uma página da web, como o tempo de carregamento, as solicitações de rede e o uso de recursos. Isso permite que você identifique gargalos de desempenho e otimize sua aplicação para carregar rapidamente.
- Testes de compatibilidade: com as ferramentas de emulação de dispositivos móveis, você pode testar facilmente a aparência e o comportamento do seu site em uma ampla variedade de dispositivos e tamanhos de tela, permitindo que você verifique a compatibilidade do site em diferentes plataformas e dispositivos.
- Aprendizado: é uma excelente fonte de conhecimento, pode ser usado para aprender como outros sites implementam recursos e funcionalidades, permitindo que você veja como outros desenvolvedores trabalham com HTML, CSS e JavaScript. Uma das formas de aprender, é observando como outros profissionais trabalham, e o DevTools te possibilita fazer isso.
- Produtividade: pode ajudar a aumentar a produtividade, permitindo que você faça o debug de aplicações web, sites, landing pages rapidamente, visualizando os resultados em tempo real, sem precisar alternar entre o editor de código e o navegador.
Para quem é o DevTools?
O DevTools é uma ferramenta essencial para desenvolvedores web de todos os níveis de habilidade, desde iniciantes até profissionais experientes. Mas também pode ser usada por profissionais de Web Analytics, Marketing, Designers, Gerentes de projeto ou qualquer pessoa que tenha contato ou saiba um pouco de desenvolvimento web.
Se no seu dia a dia for necessário inspecionar códigos HTML, CSS e JavaScript, para testar a aparência, o comportamento e identificar problemas de desempenho de sites, landing pages ou aplicações Web, em diferentes dispositivos e ambientes, o DevTools pode te ajudar no processo.
Portanto, o DevTools é uma ferramenta útil para qualquer pessoa envolvida no desenvolvimento de aplicativos web, independentemente do nível de experiência ou função no processo.
Conclusão
As ferramentas do desenvolvedor oferecem um poderoso conjunto de soluções para depuração de problemas de SEO.
Você pode usar a guia Elementos para inspecionar o DOM, a guia Rede para inspecionar solicitações e respostas de rede e definir as condições de rede, como armazenamento em cache e agente do usuário.
Pode diagnosticar e resolver rapidamente vários problemas de SEO, em conjunto com as ferramentas de teste no Google Search Console.
Gostou do conteúdo?
Comente e compartilhe em suas redes. Se quiser ter mais informações sobre o universo do Marketing, Marketing Digital, Publicidade, Growth e Tech, visite os outros artigos do nosso Blog.
