SEO.png" class="attachment-large size-large wp-post-image" alt="7 maneiras de usar a ferramenta ‘inspecionar elemento’ para SEO" style="margin-bottom: 15px">O Inspecionar recurso no Chrome (também chamado de “inspecionar elemento”) permite verificar os bastidores de qualquer página ou site. Você pode usá-lo para diagnosticar problemas, testar alterações em seu site e até espionar seus concorrentes.
Clique com o botão direito em qualquer página e role para baixo até Inspecionar para ver o código com o qual o site foi construído.
Você verá a página na janela esquerda e diferentes abas à direita com todo o código do site. Você pode expandir e recolher elementos para navegar pelo código dessa página.
SEO.png" alt="Recurso de elemento de inspeção" class="wp-image-440110">De Elementos guia, você pode ver como seria a página se você editasse, removesse ou adicionasse elementos. Você também pode encontrar informações sobre como um site é configurado. As guias Console, Fontes, Rede e outras também podem ajudar em auditorias técnicas mais avançadas.
Conhecer HTML e CSS básicos ajuda, mas você pode responder a muitas perguntas básicas apenas a partir do Elementos guia se você souber que tipo de código procurar.
1. Que cor é essa?
Encontre o código hexadecimal exclusivo para qualquer cor na web usando Inspecionar.
- Clique com o botão direito no elemento que deseja ver.
- Role para baixo para encontrar a amostra de cores e o código hexadecimal.
- Clique na amostra para brincar com cores diferentes para esse elemento.
SEO.png" alt="Inspecione o elemento - encontre o código hexadecimal 1" class="wp-image-440111">
SEO.png" alt="Inspecione o elemento - encontre o código hexadecimal 2" class="wp-image-440112">Cada cor possui um código hexadecimal exclusivo ou uma combinação de código universal de 6 dígitos que representa a cor. Por exemplo, branco puro é #FFFFFF, preto puro é #000000 e verde menta é #98FF98.
Se você não encontrar a cor que procura, verifique se há alguma configuração de cor do elemento pai que possa substituir os elementos filhos.
Isso é útil para resolver questões como:
- Quais cores os usuários preferem? Posso encontrar uma cor nova para experimentar?
- Que cor meu concorrente está testando em sua frase de chamariz?
- As cores do meu site estão seguindo as diretrizes da marca?
- Essa combinação de cores segue as diretrizes de usabilidade?
2. Que fonte é essa?
As fontes serif estão na moda agora. Você pode encontrar novas fontes em qualquer site clicando com o botão direito no elemento e procurando o CSS da fonte.
- Clique com o botão direito na cópia.
- Na guia Estilos na parte inferior, procure a mesma tag.
- Role para baixo até as tags de fonte.
SEO.png" alt="Inspecionar elemento - encontrar tipo de fonte" class="wp-image-440113">Se você vir várias fontes listadas no código, essas são fontes de backup. A primeira fonte é a padrão, que aparecerá se o navegador do usuário tiver acesso a essa fonte. Se essa fonte não estiver disponível por algum motivo, o navegador voltará para a segunda fonte listada e assim por diante na lista.
Você também pode verificar o tamanho da fonte e a altura da linha.
SEO.png" alt="Inspecione o elemento - encontre o tamanho da fonte e a altura da linha" class="wp-image-440114">A escolha de um bom tamanho de fonte depende da fonte, altura da linha e negrito. Uma boa regra é buscar um mínimo de 14 pixels para o corpo do texto e 20 pixels para as fontes do cabeçalho.
- H1: 30-34 pixels
- H2: 28-30 pixels
- H3: 24-26 pixels
- H4: 20-22 pixels
- Corpo: 16-18 pixels
3. Essa mudança de conteúdo parecerá boa?
Use Inspecionar para ver como será uma mudança antes de ir ao ar. Isso é especialmente útil se você precisar fazer uma captura de tela para obter aprovação antes ou depois de publicar uma edição de página ou se quiser verificar primeiro como uma alteração ficará no desktop e no celular.
- Inspecione o elemento que você deseja alterar.
- Clique duas vezes na cópia que deseja editar.
- Edite a cópia.
- Clique fora do elemento.
- Faça ajustes até ficar satisfeito com isso.
SEO.png" alt="Inspecionar elemento - visualização da alteração de conteúdo 1" class="wp-image-440115">
SEO.png" alt="Inspecionar elemento - visualização da alteração de conteúdo 2" class="wp-image-440116">Se o elemento que você está editando tiver vários trechos de código dentro do elemento, como um link dentro de um parágrafo, você pode clicar com o botão direito na cópia e escolher Editar como HTML para editar toda a seleção.
SEO.png" alt="Inspecionar elemento - visualização da alteração de conteúdo 3" class="wp-image-440117">
SEO.png" alt="Inspecionar elemento - visualização da alteração de conteúdo 4" class="wp-image-440118">4. Que imagem é essa?
Encontre o link, o tamanho e o texto alternativo de uma imagem clicando com o botão direito para inspecionar qualquer imagem.
Responda a perguntas técnicas básicas sobre qualquer imagem:
- Minha imagem tem um bom texto alternativo?
- Essa imagem é uma duplicata?
- O tamanho da imagem é muito grande?
- O tamanho da imagem pode afetar a velocidade da página?
- Onde está a fonte da imagem original?
- Que tipo de imagem meu concorrente está usando?
SEO.png" alt="Inspecionar elemento - Verifique imagens" class="wp-image-440119">Isso funciona para qualquer tipo de imagem, incluindo ícones e imagens de fundo. Se você não encontrar a imagem desejada, procure frases no código como imagem, plano de fundo, src, img, jpg, png ou carrossel.
SEO.png" alt="Inspecionar elemento - Verifique as imagens 1" class="wp-image-440120">
SEO.png" alt="Inspecione o elemento - Verifique as imagens 2" class="wp-image-440121" style="width:840px;height:auto">5. Que tipo de link é esse?
Use Inspecionar para verificar se seus links estão configurados da maneira desejada, sem realmente clicar em nenhum link. Teste se os links estão definidos como nofollow ou follow e se eles abrem na mesma guia ou em uma guia diferente. Ou use Inspecionar para encontrar uma cadeia de redirecionamento ou 301.
- Clique com o botão direito em qualquer link.
- Encontre a tag .
- Verifique a qual URL o destino está vinculado.
- Procure uma tag como rel=“nofollow”, que diz ao Google para ignorar esse link para fins de classificação.
- Procure uma tag como target=“_blank”, que diz ao navegador para abrir o link em uma aba nova/em branco.
SEO.png" alt="Inspecionar elemento - encontrar link" class="wp-image-440122">Você também pode confirmar se obteve um novo backlink follow ou nofollow em outro site. Isso é útil se você deseja apenas verificar um link em vez de executar uma verificação em uma ferramenta de backlink como Ahrefs ou Semrush.
Se você verifica os links com frequência, também pode usar extensões do navegador para destacar automaticamente diferentes tipos de links, dependendo de suas tags.
6. Qual trecho do código está quebrado?
Solucione problemas com os elementos do seu site usando o Inspect. Depois de descobrir qual parte do código está causando o problema, você poderá resolvê-lo.
Se você precisar trabalhar com seus desenvolvedores ou equipe técnica para corrigir o problema, será mais fácil destacar exatamente o que você precisa no código.
- Clique com o botão direito em qualquer lugar do elemento.
- No Elementos barra lateral, passe o mouse sobre cada elemento HTML para encontrar o que deseja.
- Use as setas para expandir as seções e ver os elementos de código filho.
- O elemento ao qual o código corresponde ficará destacado em seu site na janela esquerda. Continue pairando e expandindo até encontrá-lo.
SEO.png" alt="Inspecionar elemento - Verificando código" class="wp-image-440123">
SEO.png" alt="Inspecionar elemento - Verificando o código 1" class="wp-image-440124">7. Que tipo de esquema é esse?
A maioria dos sites permite que você verifique o esquema do site usando o Schema Validator. No entanto, alguns sites impedem que o bot Schema Validator use a opção Buscar URL diretamente.
Você ainda pode verificar o esquema do site de seus concorrentes com esta ferramenta ou diretamente no código.
- Vá para a página que deseja verificar.
- Clique com o botão direito em qualquer lugar da página e clique Ver fonte da página.
- Selecione todo o código da página (Ctrl+A e Ctrl+C).
- Acesse https://validator.schema.org/.
- Clique Fragmento de código.
- Cole todo o código (Ctrl+V).
- Clique Teste de corrida.
- Você verá todos os elementos de esquema detectados para essa página.
SEO.png" alt="Validador de esquema" class="wp-image-440125">
SEO.png" alt="Entidades validadoras de esquema" class="wp-image-440126">Se a ferramenta validadora parecer incorreta ou sinalizar esquema quebrado, você poderá verificar qualquer código semelhante a esquema diretamente na marcação. Isso é útil se você estiver tentando solucionar problemas de campos de esquema ou descobrir por que seu esquema não está aparecendo no SERP.
- Clique com o botão direito em qualquer lugar da página.
- Expanda as seções na tag Elements até encontrar as tags schema.org. O esquema geralmente está contido em algum lugar da tag.
- Se não estiver organizado de forma limpa, clique com o botão direito e edite como HTML, depois copie o bloco inteiro em um programa Bloco de Notas.
- Se você ainda não vê, clique com o botão direito na página para Ver fonte da páginae pesquise “esquema” no código da página (Ctrl+F).
SEO.png" alt="Inspecionar elemento - validação de esquema" class="wp-image-440127">
