Alejandro Rioja.
Scripts

Guia rápido sobre como aceder ao código fonte de um website

Alejandro Rioja
Alejandro Rioja
9 min de leitura
TL;DR

Abra o HTML em bruto de qualquer página com Ctrl/Cmd+U ou o prefixo view-source: na barra de endereços. Use as DevTools (F12) para inspecionar ao vivo o DOM renderizado, o CSS e os pedidos de rede. Cinco aspetos a verificar para SEO: tags de título, meta descrições, cabeçalhos H1, atributos alt de imagens e snippets de acompanhamento de análise.

Newsletter gratuita

Toda quarta-feira. 28.400+ operadores. Zero enrolação.

Índice

Atualizado em maio de 2026.

TL;DR: Abra o HTML em bruto de qualquer página com Ctrl/Cmd+U ou o prefixo view-source: na barra de endereços. Use as DevTools (F12) para inspecionar ao vivo o DOM renderizado, o CSS e os pedidos de rede. Cinco aspetos a verificar para SEO: tags de título, meta descrições, cabeçalhos H1, atributos alt de imagens e snippets de acompanhamento de análise.

Conclusão

O código fonte do seu website está por baixo de cada gráfico, título e chamada para ação. Os motores de busca leem esse código para decidir onde a sua página é classificada para uma determinada pesquisa. Ser capaz de o ler por si mesmo — mesmo sendo não-programador — é uma das formas mais rápidas de detetar erros de SEO antes de custarem tráfego.

Este guia mostra-lhe como ver o código fonte em todos os principais browsers e sistemas operativos em 2026, para que servem os dois métodos principais (Ver Fonte vs. DevTools) e os cinco elementos de SEO que vale a pena auditar assim que estiver lá dentro.

Como ver o código fonte

Existem duas ferramentas distintas. Saiba qual usar em cada caso:

A maior parte dos sites modernos é parcial ou totalmente renderizada por JavaScript, por isso as DevTools são onde passo a maior parte do tempo.

O atalho view-source: (todos os browsers)

Escreva view-source: diretamente antes de qualquer URL na barra de endereços — por exemplo, view-source:https://example.com — e prima Enter. Isto funciona no Chrome, Firefox, Edge e Opera. O Safari requer a ativação do menu Programar primeiro (ver abaixo).

Atalhos de teclado no PC

Chrome (Windows / Linux)

Firefox (Windows / Linux)

Microsoft Edge (Windows)

Opera (Windows / Linux)

Atalhos de teclado no Mac

Chrome (macOS)

Firefox (macOS)

Safari (macOS)

O Safari oculta as ferramentas de programador por predefinição. Ative-as uma vez:

  1. Abra Safari → Definições (ou Preferências em versões mais antigas do macOS) → separador Avançado.
  2. Marque «Mostrar funcionalidades para programadores web» (substitui a antiga caixa de seleção «Mostrar menu Programar» desde o Safari 17).
  3. Agora estão disponíveis Programar → Mostrar código fonte da página (Cmd+Option+U) e Programar → Mostrar Inspetor Web (Cmd+Option+I). Clique com o botão direito → Inspecionar elemento também funciona.

Microsoft Edge (macOS)

Dispositivos móveis

Elementos de SEO importantes a verificar

Assim que conseguir ver o código fonte, use Ctrl+F / Cmd+F para pesquisar os snippets abaixo no HTML em bruto.

1. Tags de título

Pesquise <title. Cada página deve ter exatamente uma, e o texto dentro dela deve ser único em todo o site. As tags de título são o sinal on-page mais importante para dizer tanto aos utilizadores como aos motores de busca do que trata uma página. Tags de título duplicadas ou em falta estão entre os erros de SEO mais comuns que encontro durante auditorias.

2. Meta descrições

Pesquise <meta name="description". O atributo de conteúdo é o snippet que o Google frequentemente mostra nos resultados de pesquisa — mantenha-o abaixo de aproximadamente 160 caracteres. Não é um fator de classificação direto, mas influencia a taxa de cliques, o que importa. Verifique que não há duas páginas com a mesma descrição.

3. Cabeçalhos H1

Pesquise <h1. A boa prática é um H1 por página. Deve descrever claramente o tema principal e incluir a sua palavra-chave primária de forma natural. Encher o H1 com múltiplas palavras-chave é visto como spam tanto pelos utilizadores como pelos algoritmos.

4. Atributos alt de imagens

Pesquise <img. Cada imagem deve ter um atributo alt que descreva o seu conteúdo. O texto alt é o que os leitores de ecrã anunciam aos utilizadores com deficiência visual, e é o único sinal que os motores de busca têm para compreender o conteúdo das imagens. Os atributos alt em falta são vitórias fáceis — identifique-os e preencha-os.

5. Código de acompanhamento de análise

Pesquise o seu ID de medição GA4 (formato: G-XXXXXXXXXX) ou o ID de contentor do Google Tag Manager (GTM-XXXXXXX). Se estiver a usar o antigo formato Universal Analytics UA-, note que o Google encerrou as propriedades UA padrão em julho de 2023 — esses IDs já não recolhem dados. Verifique se migrou para o GA4 ou uma alternativa (Plausible, Fathom, PostHog, etc.).

Razões para ler o código fonte de um website

Não precisa de ser programador para tirar valor desta competência. Estas são as principais razões pelas quais regresso a ela:

1. Verificar as tags meta robots

Um único <meta name="robots" content="noindex"> mal colocado irá remover silenciosamente uma página do índice. Pesquise robots na fonte para confirmar que não está a bloquear páginas acidentalmente do rastreamento.

2. Auditar a estrutura de cabeçalhos

Uma boa hierarquia de cabeçalhos (H1 → H2 → H3) ajuda tanto a acessibilidade como o SEO. Uma análise rápida do código fonte mostra se os cabeçalhos estão aninhados logicamente ou se alguém usou as tags H apenas para estilo.

3. Verificar a otimização de imagens

Além dos atributos alt, veja o atributo src. As imagens são servidas a partir de uma CDN? Estão em formatos modernos (WebP, AVIF)? Estão definidos os atributos width e height (evitam deslocamentos de layout)? Estes detalhes aparecem claramente no código fonte.

4. Detetar conteúdo oculto ou injetado

Ocasionalmente, um plugin, um script de terceiros ou um agente malicioso injeta conteúdo numa página que é invisível na vista renderizada mas visível para os motores de busca. Padrões comuns: divs com display:none repletos de spam de palavras-chave, links ocultos fora do ecrã ou texto com a mesma cor que o fundo. Uma análise do código fonte em bruto vai revelar estes casos.

Pesquise <a href= e analise os destinos dos links. Caminhos relativos quebrados, links internos com nofollow acidental ou cadeias de redirecionamento dentro da hierarquia do site podem drenar silenciosamente o PageRank. Ver o código fonte é mais rápido do que esperar por um rastreamento completo do Screaming Frog quando apenas precisa de uma verificação rápida.

Conclusão

Ver o código fonte é um hábito de trinta segundos que deteta problemas de SEO dispendiosos antes de se agravarem. Se usa Ctrl+U para o HTML em bruto ou as DevTools para o DOM ao vivo depende de se a página é renderizada no servidor ou em JavaScript — para a maioria dos sites em 2026 precisa de ambos.

Veja estes artigos que podem ser úteis para SEO:

FAQ sobre ver o código fonte de websites — 2026

O view-source ainda funciona em sites renderizados por JavaScript?

Parcialmente. view-source: mostra o HTML que o servidor enviou — que para React, Next.js, Astro (apenas cliente) ou frameworks semelhantes é frequentemente uma estrutura quase vazia com tags de script. O conteúdo renderizado vive no DOM ao vivo, ao qual acede através das DevTools → painel Elementos. Para sites renderizados no lado do servidor (SSR) ou gerados estaticamente, view-source: mostra o conteúdo completo da página porque o HTML está completo antes de chegar ao browser.

Posso ver o código fonte de uma página que requer autenticação?

Sim, desde que a sua sessão do browser esteja autenticada. Tanto view-source: como as DevTools operam sobre o que o browser já carregou. Se consegue ver a página, consegue inspecionar o seu código fonte. Não pode ver o código fonte de uma página que não carregou.

Em praticamente todas as jurisdições, ler o HTML que um servidor web envia voluntariamente para o seu browser é legal — o servidor escolheu transmiti-lo. O scraping automatizado em escala, contornar controlos de acesso (por exemplo, contornar um paywall) ou usar o código fonte comercialmente sem licença são questões separadas com respostas legais diferentes. Para auditorias de SEO de rotina e pesquisa competitiva, ler código fonte servido publicamente é padrão e não controverso.

Qual é a forma mais rápida de verificar se um site usa uma tecnologia específica em 2026?

Três opções: (1) verificar o código fonte em busca de strings identificadoras (por exemplo, __NEXT_DATA__ para Next.js, astro-island para Astro, wp-content para WordPress); (2) instalar a extensão de browser Wappalyzer, que identifica frameworks, CDNs, ferramentas de análise e, desde 2025, alguns componentes de stack de IA (LangChain, LlamaIndex); (3) executar o URL no BuiltWith para um relatório detalhado da stack tecnológica.

Leitura relacionada:

Este guia faz parte de alejandrorioja.com — escrito por Alejandro Rioja, que agora constrói sistemas de agentes de IA para fundadores. Incluindo o agente que mantém este site atual. Como funciona →

Atualizado para maio de 2026

Algumas atualizações de 2026 aos conselhos específicos nesta publicação:

Continue lendo

Receba o manual de IA na sua caixa de entrada

Toda quarta-feira. 28.400+ operadores. Zero enrolação.

⌕
↵ ↵ ver todos os resultados esc esc para fechar