Procurando uma maneira simples de visualizar o código-fonte da página?
Quando comecei a criar sites WordPress, eu não sabia por que visualizar o código-fonte da página era importante ou quão fácil era fazê-lo. Como muitos proprietários de sites, eu ouvia outros desenvolvedores falando sobre verificar o código-fonte da página, mas achava que era algo com que apenas programadores avançados precisavam se preocupar.
Depois de gerenciar vários sites WordPress e ajudar clientes a melhorar seu SEO, descobri que visualizar o código-fonte da página é, na verdade, uma ferramenta simples, mas poderosa. Ela me ajuda a identificar problemas técnicos de SEO, verificar se minhas meta tags estão funcionando corretamente e até mesmo aprender com sites de concorrentes bem-sucedidos – tudo isso sem precisar ser um especialista em codificação.
Também compartilharei maneiras práticas de usar esse conhecimento para melhorar o SEO do seu site, mesmo que você nunca tenha olhado para o código HTML antes. Confie em mim, se eu pude aprender isso, você também pode. E vale a pena os poucos minutos que leva para dominar.
Qualquer pessoa pode acessar o código de uma página da web usando o método de visualizar o código-fonte da página. E existem boas razões pelas quais isso pode ser útil em SEO.
Neste guia, mostrarei exatamente como visualizar o código-fonte de qualquer página da web – e é super fácil!
Neste Artigo
O que é o Código-Fonte de uma Página da Web?
Páginas da web são arquivos de código. E sites são coleções de arquivos de código organizados em pastas.
Esse código fornece o formato, o estilo e a interatividade da página.
Por exemplo,
- HTML fornece formatação como títulos e parágrafos.
- CSS fornece estilo, incluindo cores e layout.
- JavaScript fornece elementos interativos como pop-ups.
Os navegadores carregam e interpretam instantaneamente esses arquivos de código, renderizando uma página da web visível.
Qualquer pessoa pode visualizar o código-fonte de um site. Profissionais de marketing e desenvolvedores web estão entre aqueles que usam o “visualizar o código-fonte da página”.
Você também pode usá-lo para algumas verificações simples de SEO.
Como Visualizar o Código-Fonte da Página no Google Chrome
Usaremos o Google Chrome como exemplo, pois ele tem a maior participação de mercado entre todos os navegadores. E os atalhos de teclado que compartilharemos para o Chrome também funcionam na maioria dos outros navegadores, incluindo Apple Safari e Brave.
Existem várias maneiras de visualizar o código de uma página da web no Chrome. Aqui estão 3 listadas com o método mais rápido primeiro.
Método 1: Atalho de teclado
- Mac: ⌘ + option + u
- Windows/Linux: Ctrl + U
Método 2: Clique com o botão direito, Selecionar
- Clique com o botão direito em uma página da web. (Em um Macbook, pressione o touchpad com os dois dedos.)
- Selecione Visualizar Código-Fonte da Página na janela pop-up que aparece.
Método 3: Menu do Aplicativo Apple
- Com o Chrome aberto, navegue até o Menu do Aplicativo Apple e selecione Visualizar. Nesse menu suspenso, selecione Desenvolvedor»Visualizar Fonte
Usar Quebra de Linha e Pesquisar Código
Quando a página de código abrir em uma nova aba, marque a caixa "quebra de linha" no canto superior esquerdo. Isso garantirá que você não precise rolar horizontalmente para ver o código.
Use ⌘ + f para abrir uma caixa de pesquisa para o código.
Como Usar as Ferramentas do Desenvolvedor do Chrome para Visualizar o Código-Fonte da Página
Além de ver uma única página de código-fonte, você pode acessar as ferramentas de desenvolvedor do Chrome de qualquer página da web para obter informações de código mais detalhadas. Designers e desenvolvedores web usam essas ferramentas.
Para acessar as Ferramentas de Desenvolvedor do Chrome, use o Chrome para navegar até uma página da web.
Em seguida, use o atalho de teclado apropriado:
- Mac: ⌘ + option + i
- Windows/Linux: F12 ou Control + Shift + I
Isso abrirá uma nova janela na mesma aba do navegador, revelando o código por trás da página.
Esta visualização exibe CSS e listeners de eventos JavaScript, entre outras coisas.
Dica: Todos os principais navegadores da web, incluindo Mozilla Firefox e Microsoft Edge, oferecem uma janela "ferramentas de desenvolvedor", e o mesmo atalho do Chrome funciona para eles.
Usos Comuns para Visualizar Código-Fonte da Página
Existem 2 razões comuns pelas quais não desenvolvedores querem ver o código-fonte de uma página.
Uma é verificar backlinks de guest posts. E a outra é curiosidade: ver como são as meta tags em HTML.
Uso 1: Verificar Backlinks de Guest Posts
Backlinks, links de outros sites para o seu, são um fator de ranqueamento.
Uma maneira comum de sites obterem backlinks é escrevendo guest posts para outros sites em troca de um link.
Essa estratégia de backlink ajuda os indivíduos a elevar sua presença online e comunicar expertise.
É importante verificar o código de cada link que você recebe, no entanto. Por quê? Às vezes, o proprietário de um site adicionará acidentalmente um atributo de link, como "sponsored" ou "nofollow", que anulará qualquer valor de SEO.
Esses atributos de link, também chamados de tags, só podem ser vistos no código-fonte da página.
Como Verificar Atributos de Link no HTML: Método 1
- Navegue até a página que está vinculada à sua.
- Clique com o botão direito em qualquer área da página.
- Selecione "Visualizar Código-Fonte da Página".
O código HTML da página será aberto em uma nova janela.
Pesquise o texto âncora e verifique o link circundante para nofollow, sponsored ou atributos de link UGC.
Como exemplo, usaremos um artigo do ReadWrite.com.
Ao rolar até o final deste artigo, vemos que a biografia do autor convidado inclui um link de volta para o site dele, Ditto Transcripts.
Clique com o botão direito em qualquer lugar da página e selecione Visualizar Código-Fonte.
Isso abrirá o código HTML da página em uma nova aba. (Lembre-se de marcar a caixa “quebra de linha”.)
Agora, você pode pesquisar na página por “Ditto Transcripts”. É isso que vemos.
O link é um link “dofollow”, que é ideal para SEO. Observe a ausência de quaisquer atributos nofollow, sponsored ou UGC no código do link.
Como Verificar o HTML de Atributos de Link: Método 2
Você também pode acessar o código do link usando as Ferramentas do Desenvolvedor do Chrome. No entanto, esteja ciente de que essa ferramenta exibe um código mais detalhado, o que pode confundir iniciantes.
Veja como verificar um link usando as Ferramentas do Desenvolvedor do Chrome.
- Navegue até a página que está vinculada à sua.
- Clique com o botão direito no backlink.
- Selecione Inspecionar no pequeno menu pop-up que aparece.
Isso abrirá as Ferramentas do Desenvolvedor do Chrome.
Convenientemente, essa ação destacará o link (em azul), para que você saiba exatamente onde procurar.
Aqui usaremos o mesmo ReadWrite.com como nosso exemplo.
Para visualizar o código do link, clicaremos com o botão direito sobre ele e selecionaremos “Inspecionar” no menu pop-up.
Selecionar “Inspecionar” fará com que as Ferramentas do Desenvolvedor do Chrome sejam abertas. O link será destacado em azul.
Vamos dar um zoom nessa parte destacada.
Embora este código de link possa conter coisas que você não entende, você pode ver que não há uma tag nofollow, sponsored ou UGC ali.
Uso 2: Ver Como São as Meta Tags
A segunda razão pela qual não desenvolvedores podem usar a visualização do código fonte da página é que eles estão curiosos para ver como as meta tags aparecem no código.
Você pode ter ouvido que as title tags e meta descriptions são importantes para SEO.
E plugins, como All in One SEO (AIOSEO), facilitam a edição e otimização delas.
Mas você pode se perguntar como essas 2 meta tags aparecem no código fonte.
Para descobrir,
- Navegue até uma página.
- Vá para Ver Código Fonte da Página.
- Marque a caixa “quebra de linha” no canto superior esquerdo.
- Use ⌘ + f para pesquisar por <title ou <meta name=”description”.
Aqui está um exemplo de title tag.
E aqui está a meta description para o mesmo artigo.
Otimize Meta Tags com All in One SEO (AIOSEO)
A otimização dessas meta tags é fácil com o plugin All in One SEO (AIOSEO) para WordPress.
E você não precisará visualizar o código fonte da página para verificar as meta tags.
Este plugin estabelecido tem milhares de avaliações 5 estrelas no WordPress.org e mais de 3 milhões de usuários.
Embora seja fácil para iniciantes usar o AIOSEO, ele oferece resultados profissionais.
Você pode baixar o All in One SEO aqui.
Você verá uma prévia do seu título e meta descrição nos resultados da Pesquisa Google.
E você obtém maneiras fáceis de otimizar essas tags, como manter sua meta descrição dentro de um determinado comprimento.
Além disso, o All in One SEO fornece recomendações para melhorar o SEO de suas páginas individuais da web.
Outros benefícios incluem
- Configuração fácil para SEO local (para pequenas empresas).
- Recomendações sobre o uso de palavra-chave em foco.
- Transforme suas páginas em rich snippets com alguns cliques.
Perguntas e Respostas sobre Visualizar Código Fonte da Página
Como visualizo o código fonte da página no Safari?
Para visualizar o código fonte da página no Safari, clique com o botão direito na página e escolha Mostrar Código Fonte da Página. Ou, no menu do navegador, selecione Desenvolver » Mostrar Código Fonte da Página.
Usar Option + Command (⌘) + U abrirá a janela de Ferramentas do Desenvolvedor.
Como encontro o código HTML e CSS de um site?
Existem várias maneiras de encontrar o código HTML e CSS de um site. Para encontrar o HTML, você pode usar vários métodos de visualização do código fonte da página descritos aqui.
Para ver o código HTML e CSS, você pode usar o recurso Ferramentas do Desenvolvedor em seu navegador da web.
Você também pode encontrar o(s) arquivo(s) de código CSS clicável(is) para um site no elemento head do HTML.
Próximos Passos?
Esperamos que este artigo tenha ajudado você a entender como visualizar o código fonte de uma página e por que as pessoas o utilizam.
Você também pode querer aprender mais sobre o papel dos backlinks em SEO e obter insights sobre links pagos e construção de links. E não se esqueça de capturar esses leads.
Se você achou este artigo útil, por favor, inscreva-se em nosso canal do YouTube para tutoriais de SEO. Você também pode nos seguir no Twitter, LinkedIn ou Facebook para ficar por dentro.
Quer Experimentar o AIOSEO Gratuitamente?
Digite o URL do seu site WordPress para instalar o AIOSEO Lite.
Aviso: Nosso conteúdo é apoiado pelo leitor. Isso significa que se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.
