Procurando uma maneira simples de visualizar o código-fonte da página?
Quando comecei a criar sites WordPress, não sabia por que a visualização do código-fonte da página era importante ou como era fácil fazê-la. Como muitos proprietários de sites, eu ouvia outros desenvolvedores falarem sobre a verificação do código-fonte da página, mas achava que isso era algo com que somente os programadores avançados precisavam se preocupar.
Depois de gerenciar vários sites WordPress e ajudar os clientes a melhorar seu SEO, descobri que a visualização da origem da página é, na verdade, uma ferramenta simples, mas poderosa. Ela me ajuda a identificar problemas técnicos de SEO, verificar se minhas metatags 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 lido um 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 aprender.
Qualquer pessoa pode acessar o código de uma página da Web usando o método de visualização do código-fonte da página . E há alguns bons motivos pelos quais isso pode ser útil em SEO.
Neste guia, mostrarei exatamente como visualizar o código-fonte de qualquer página da Web - e é muito fácil!
Neste artigo
- O que é o código-fonte de uma página da Web?
- Como visualizar o código-fonte da página no Google Chrome
- Como usar quebra de linha e código de pesquisa
- Como usar as ferramentas de desenvolvedor do Chrome para visualizar o código-fonte da página
- Usos comuns para exibir código-fonte da página
- Otimize as metatags com o All in One SEO (AIOSEO)
O que é o código-fonte de uma página da Web?
As páginas da Web são arquivos de código. E os 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,
- O HTML fornece formatação, como títulos e parágrafos.
- O CSS fornece o estilo, incluindo cores e layout.
- O 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. Os profissionais de marketing e os desenvolvedores da Web estão entre os que usam "view page source".
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 para a maioria dos outros navegadores, incluindo o Apple Safari e o Brave.
Há várias maneiras de visualizar o código de uma página da Web no Chrome. Aqui estão três listadas com o método mais rápido primeiro.
Método 1: Atalho de teclado
- Mac: ⌘ + opção + u
- Windows/Linux: Ctrl + U
Método 2: Clique com o botão direito do mouse e selecione
- Clique com o botão direito do mouse em uma página da Web. (Em um Macbook, pressione o touchpad com os dois dedos).
- Selecione Exibir código-fonte da página na janela pop-up exibida.
Método 3: Menu de aplicativos da Apple
- Com o Chrome aberto, navegue até o Apple App Menu e selecione View. No menu suspenso, selecione Desenvolvedor " Exibir código-fonte
Usar quebra de linha e código de pesquisa
Quando a página de código for aberta em uma nova guia, marque a caixa "line wrap"(quebra de linha) no canto superior esquerdo. Isso garantirá que você não precise rolar horizontalmente para visualizar o código.
Use ⌘ + f para abrir uma caixa de pesquisa para o código.
Como usar as ferramentas de 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 em qualquer página da Web para obter informações mais detalhadas sobre o código. Web designers e desenvolvedores usam essas ferramentas.
Para acessar o Chrome Developer Tools, use o Chrome para navegar até uma página da Web.
Em seguida, use o atalho de teclado apropriado:
- Mac: ⌘ + opção + i
- Windows/Linux: F12 ou Control + Shift + I
Isso abrirá uma nova janela na mesma guia do navegador, revelando o código por trás da página.
Essa visualização exibe ouvintes de eventos CSS e JavaScript, entre outras coisas.
Dica: Todos os principais navegadores da Web, incluindo o Mozilla Firefox e o Microsoft Edge, oferecem uma janela de "ferramentas de desenvolvimento", e o mesmo atalho do Chrome funciona para eles.
Usos comuns para exibir código-fonte da página
Há dois motivos comuns pelos quais os não desenvolvedores querem ver o código-fonte de uma página.
Uma delas é verificar os backlinks do guest post. E a outra é uma curiosidade: ver como são as meta tags em HTML.
Uso 1: verificar os backlinks do guest post
Backlinks, links de outros sites para o seu, são um fator de classificação.
Uma maneira comum de os sites obterem backlinks é escrever guest posts para outros sites em troca de um link.
Essa estratégia de backlinks ajuda as pessoas a aumentar sua presença on-line e a comunicar sua experiência.
No entanto, é importante verificar o código de cada link que você recebe. Por quê? Às vezes, o proprietário de um site adiciona acidentalmente um atributo de link, como "sponsored" (patrocinado) ou "nofollow" (não seguido), o que anula 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 se há atributos de link no HTML: Método 1
- Navegue até a página que está vinculada à sua.
- Clique com o botão direito do mouse em qualquer área da página.
- Selecione "Exibir 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 se o link ao redor tem atributos de link nofollow, patrocinado ou UGC.
Como exemplo, usaremos um artigo do ReadWrite.com.
Ao rolar até o final do artigo, vemos que a biografia do autor convidado inclui um link para seu site, Ditto Transcripts.
Clique com o botão direito do mouse em qualquer lugar da página e selecione Exibir código-fonte da página.
Isso abrirá o código HTML da página em uma nova guia. (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 qualquer atributo nofollow, patrocinado ou UGC no código do link.
Como verificar se há atributos de link no HTML: Método 2
Você também pode acessar o código do link usando as Ferramentas do desenvolvedor do Chrome. No entanto, lembre-se de que essa ferramenta exibe um código mais detalhado, o que pode ser confuso para iniciantes.
Veja como verificar um link usando as ferramentas de desenvolvimento do Chrome.
- Navegue até a página que está vinculada à sua.
- Clique com o botão direito do mouse no backlink.
- Selecione Inspecionar na pequena janela 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, clique com o botão direito do mouse sobre ele e selecione "Inspect" (Inspecionar) na janela pop-up.
A seleção de "Inspecionar" fará com que as Ferramentas do desenvolvedor do Chrome sejam abertas. O link será destacado em azul.
Vamos dar um zoom na parte destacada.
Embora esse código de link possa conter coisas que você não entende, você pode ver que não há nenhuma tag nofollow, patrocinada ou UGC nele.
Uso 2: Veja como são as metatags
O segundo motivo pelo qual as pessoas que não são desenvolvedoras podem usar o view page source é a curiosidade de ver como as metatags se parecem no código.
Você já deve ter ouvido falar que as tags de título e as meta descrições são importantes para o SEO.
E os plug-ins, como o All in One SEO (AIOSEO), facilitam a edição e a otimização desses recursos.
Mas você deve estar se perguntando como são essas duas meta tags no código-fonte.
Para descobrir,
- Navegue até uma página.
- Vá para Exibir código-fonte da página.
- Marque a caixa "line wrap" (quebra de linha) no canto superior esquerdo.
- Use ⌘ + f to search for <title or <meta name=”description”.
Aqui está um exemplo de uma tag de título.
E aqui está a meta descrição do mesmo artigo.
Otimize as metatags com o All in One SEO (AIOSEO)
A otimização dessas metatags é fácil com o plug-in All in One SEO (AIOSEO) para WordPress.
E você não precisará visualizar a fonte da página para verificar as meta tags.
Esse plug-in consagrado tem milhares de avaliações de 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 fazer o download do All in One SEO aqui.
Você verá uma prévia do seu título e da meta descrição nos resultados da Pesquisa Google.
E você obtém maneiras fáceis de otimizar essas tags, como manter a meta descrição dentro de um tamanho definido.
Além disso, o All in One SEO fornece recomendações para aprimorar o SEO de suas páginas da Web individuais.
Outros benefícios incluem
- Configuração fácil para SEO local (para pequenas empresas).
- Recomendações sobre o uso de palavras-chave de foco.
- Transforme suas páginas em rich snippets com apenas alguns cliques em um botão.
Perguntas e respostas em Exibir origem da página
Como faço para visualizar 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 do mouse na página e selecione Show Page Source. Ou, no menu do navegador, selecione Desenvolver " Mostrar código-fonte da página.
Usar Option + Command (⌘) + U abrirá a janela Developer Tools.
Como faço para localizar o código HTML e CSS de um site?
Há várias maneiras de encontrar o código HTML e CSS de um site. Para localizar o HTML, você pode usar vários métodos de visualização da fonte da página descritos aqui.
Para ver o código HTML e CSS, você pode usar o recurso Developer Tools em seu navegador da Web.
Você também pode encontrar o(s) arquivo(s) de código CSS clicável(eis) de um site no elemento head do HTML.
O que vem a seguir?
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.
Talvez você também queira saber mais sobre a função dos backlinks no SEO e obter insights sobre links pagos e link building. E não se esqueça de capturar esses leads.
Se você achou este artigo útil, inscreva-se em nosso canal do YouTube para receber tutoriais sobre SEO. Você também pode nos seguir no Twitter, LinkedIn ou Facebook para ficar por dentro das novidades.
Quer experimentar o AIOSEO gratuitamente?
Digite o URL do seu site WordPress para instalar o AIOSEO Lite.
Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.
