Guia / Guia HTML

Guia HTML

Exporte código HTML limpo e otimizado para seu CMS

O que é o Guia HTML?

O Guia HTML permite exportar todo o seu conteúdo do Google Docs como código HTML limpo e semanticamente otimizado. Este HTML está pronto para copiar e colar diretamente no WordPress, Blogger, Webflow ou qualquer outro CMS.

O HTML exportado preserva toda a estrutura: subtítulos, listas, texto em negrito, links, tabelas e imagens (com seus atributos Alt).

Por que HTML Limpo

HTML limpo é essencial por várias razões:

Benefícios do HTML Limpo

1. SEO: O Google lê HTML semântico melhor
2. Velocidade: HTML leve carrega mais rápido
3. Compatibilidade: Funciona em todas as plataformas CMS
4. Manutenção: Código é mais fácil de editar depois

Evite HTML Sujo

Quando você copia do Word, Google Docs ou algumas ferramentas, o HTML resultante está cheio de tags desnecessárias que quebram a formatação e prejudicam o SEO.

O que está Included no HTML Exportado

O HTML gerado pelo SEOwer inclui:

  • Estrutura semântica completa: article, header, main, section, footer
  • Hierarquia de subtítulos: H1, H2, H3 corretamente aninhados
  • Listas ordenadas e não ordenadas: ul, ol com li
  • Tabelas com thead e tbody: Ideal para dados comparativos
  • Links com atributos: href, title, target="_blank" para links externos
  • Imagens com Alt otimizado: Preserva o texto alternativo
  • Negrito e itálico: strong e em corretamente aplicados
  • Blockquotes: Para citações e conteúdo destacado
<article> <h1>Título Principal do Artigo</h1> <p>Parágrafo introdutório com a palavra-chave...</p> <h2>Seção Principal</h2> <p>Conteúdo da seção...</p> <h3>Subseção</h3> <p>Mais conteúdo...</p> </article>

Como Copiar e Colar no WordPress

1 Gerar HTML no SEOwer

No guia HTML, clique no botão "Copiar HTML" ou "Baixar HTML". O código será copiado para sua área de transferência ou baixado como arquivo.

2 Abrir o editor WordPress

Na sua postagem WordPress, alterne para o editor de código (também chamado de "Editor de Código" ou "Modo Texto"). Use o "Bloco HTML" ou o atalho Ctrl+Shift+Alt+M (Editor Clássico).

3 Colar o HTML

Cole todo o código HTML no editor. Você verá que o conteúdo aparece corretamente formatado.

4 Adicionar título SEO e meta description

Não se esqueça de configurar o título SEO e a meta description no seu plugin SEO (Yoast, Rank Math, SEOPress, etc.). O HTML contém apenas o corpo do artigo.

5 Publicar e verificar

Publique a postagem e verifique se tudo está correto. Verifique se subtítulos, listas, links e imagens aparecem como esperado.

Dica para Gutenberg

Se você usa o editor de blocos do WordPress (Gutenberg), adicione um bloco "HTML" e cole o código lá. Você pode então convertê-lo para blocos regulares se necessário.

Como Copiar e Colar em Outros CMS

Blogger

No Blogger, vá para Postagem → Editor HTML. Cole o HTML diretamente. O Blogger preservará os estilos básicos.

Webflow

Adicione um bloco "Embed" e cole o código HTML. Ou copie o conteúdo dentro de um parágrafo de texto.

Shopify

Na descrição do produto ou artigo, alterne para modo HTML e cole o código. Use o editor rico do Shopify para adicionar imagens adicionais se necessário.

Wix / Squarespace

Use o bloco de texto rico ou embed HTML. No Wix, o bloco "Texto" permite colar HTML.

Imagens no HTML

O HTML exportado inclui imagens como referências de URL (src="..."). Imagens que estavam no Google Docs devem estar hospedadas em algum lugar.

Importante

Se as imagens estavam incorporadas no Google Docs a partir do Google Drive, provavelmente você precisará substituir as URLs pelas do seu CMS ou servidor de mídia.

1 Upload de imagens para seu CMS

Faça upload de cada imagem para a biblioteca de mídia do seu site (WordPress, Blogger, etc.).

2 Copiar a URL de cada imagem

Copie a URL completa da imagem uploadada (geralmente termina em .jpg, .png, .webp).

3 Substituir no HTML

No código HTML, encontre as tags img e substitua o src pela nova URL.

<img src="https://seudominio.com/imagem.jpg" alt="Descrição da imagem">

Otimização Pós-Exporte

Depois de colar o HTML no seu CMS, faça estes ajustes finais:

  • Defina o H1: Certifique-se de que há apenas um H1 por página
  • Adicione a data de publicação: Ajuda com a frescura do conteúdo
  • Configure links internos: O HTML mantém os links, mas verifique se funcionam
  • Adicione a imagem em destaque: Isso não está incluído no HTML do corpo
  • Revise mídia: Verifique se as imagens carregam corretamente