Gerador de Meta Tags para SEO Blogger

Gerador de Meta Tags Avançadas para Blogger (Versão Completa)

Gere o código de SEO e Open Graph (redes sociais) para seus posts no Blogger. Cole o resultado diretamente no <head> do seu template ou post.

Título do Post/Página (Máx. 60 caracteres): Descrição do Post (Máx. 160 caracteres): URL da Imagem de Compartilhamento (Open Graph): URL Canônica do Post (Link Completo): Nome do Autor (para a Meta Tag Author): Idioma da Página (Tag lang=): Instruções para os Robôs de Busca (Robots):

Código HTML Gerado para Blogger

✨ Como Usar o Gerador de Meta Tags para SEO Blogger

Esta ferramenta gera um código HTML completo que você deve copiar e colar **manualmente** no seu template do Blogger (ou em posts específicos, se seu tema permitir):

Preencha os Campos: Insira o Título e a Descrição otimizados, como de costume.
URL da Imagem: Cole o link direto da imagem que você quer que apareça como destaque ao compartilhar o post no Facebook, WhatsApp ou LinkedIn. É crucial para o **Open Graph**!
URL Canônica: Cole o link COMPLETO do post que você está otimizando. Isso é essencial para dizer ao Google qual é a versão original do seu conteúdo.
Copiar e Colar: Copie todo o código gerado na Área de Código HTML e cole dentro da seção <head> do seu post ou template do Blogger.

Atenção: Se você estiver editando o template principal, use Tags Condicionais do Blogger (<b:if>) para aplicar o código somente onde for necessário.

❓ Perguntas Frequentes (FAQ) sobre SEO no Blogger

O que é Open Graph e por que o Blogger precisa disso?
Open Graph (OG) é um protocolo usado por redes como Facebook e WhatsApp. Ele garante que, quando seu link é compartilhado, a imagem, o título e a descrição corretos (que você define) sejam exibidos, evitando que a rede social puxe informações aleatórias e feias do seu post.
O que é a URL Canônica e como preenchê-la?
O link canônico (rel="canonical") diz ao Google qual é a URL "oficial" daquele conteúdo. Use o link do post que está no seu navegador, por exemplo: https://seublog.com.br/2025/11/seu-post.html. Isso evita problemas de conteúdo duplicado, comum em páginas de arquivo ou categorias.
Qual a diferença entre essas tags e as tags de SEO do Blogger?
O Blogger já tem tags de SEO básicas. No entanto, ele não gera automaticamente as tags de **Open Graph (og:)** e **Twitter Cards** de forma otimizada, ou não permite personalizá-las de forma fácil. Nosso gerador preenche essa lacuna, dando total controle sobre como seu link aparece nas redes.
A tag de Twitter Cards é a mesma que o Open Graph?
Elas têm a mesma finalidade, mas sintaxes diferentes. O Twitter lê o Open Graph se não encontrar o Twitter Card, mas é melhor incluir o Twitter Card (como o summary_large_image) para garantir que sua imagem de destaque apareça grande e chamativa no Twitter/X.
Para que servem as opções 'Robots' (Index/Noindex)?
A meta tag Robots instrui os mecanismos de busca. O padrão é index, follow, que permite que o Google rastreie e classifique sua página. Você só deve usar noindex em páginas privadas, de teste ou de conteúdo de baixo valor que você não quer que apareça na busca.
Como o campo de Idioma ('lang') impacta o SEO?
A tag de idioma (http-equiv="content-language" e og:locale) ajuda o Google e as redes sociais a entenderem o público-alvo do seu conteúdo. Por exemplo, definir como pt-BR ajuda o Google a priorizar seu artigo para buscas feitas por usuários no Brasil, e ajuda o Facebook a formatar a postagem corretamente.
Devo preencher o campo "Autor"?
A meta tag author não é um fator de ranqueamento direto, mas é uma boa prática de credibilidade e ajuda a identificação do seu conteúdo. É recomendado preencher com o seu nome ou o nome do seu blog.

Adicione esta ferramenta ao seu blog

Clique no botão abaixo para pegar o link, copie o link e cole em uma página estática

Por favor, visualize o anúncio para liberar o código.

Seu Código (Copie e Cole)

 <style>
/* --- 1. Estilo Básico e Container --- */

/* Container da Ferramenta Blogger */
.blogger-tag-generator-box {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidade */
}

.blogger-tag-generator-box h3 {
    text-align: center;
    color: #007bff; /* Azul primário */
    margin-bottom: 5px;
    font-size: 24px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.blogger-tag-generator-box p {
    text-align: center;
    color: #6c757d;
    margin-bottom: 25px;
    font-size: 15px;
}


/* --- 2. Estilo dos Inputs e Labels --- */

.blogger-tag-generator-box label {
    display: block;
    margin-top: 20px;
    margin-bottom: 5px;
    font-weight: 600; /* Semi-negrito */
    color: #343a40; /* Texto escuro */
    font-size: 14px;
}

.blogger-tag-generator-box input[type="text"],
.blogger-tag-generator-box input[type="url"],
.blogger-tag-generator-box textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 15px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.blogger-tag-generator-box input:focus,
.blogger-tag-generator-box textarea:focus {
    border-color: #007bff; /* Foco azul */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra de foco azul */
    outline: none; /* Remove outline padrão */
}


/* --- 3. Estilo da Área de Código Gerado --- */

.blogger-tag-generator-box h4 {
    margin-top: 30px;
    margin-bottom: 10px;
    color: #343a40;
    font-size: 18px;
    padding-left: 5px;
    border-left: 4px solid #ffc107; /* Amarelo de destaque */
}

#outputCodeBlogger {
    background-color: #f8f9fa; /* Fundo cinza claro para o código */
    font-family: 'Consolas', 'Courier New', monospace; /* Fonte de código */
    font-size: 13px;
    color: #000;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    resize: vertical; /* Permite redimensionar apenas verticalmente */
    min-height: 250px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra interna sutil */
}

/* --- 4. Estilo dos Textos de Documentação (Modo de Usar e FAQ) --- */

.tutorial-box, .faq-box {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background-color: #f7faff; /* Fundo azul claro para destaque */
    border-left: 5px solid #007bff;
    border-radius: 0 8px 8px 0;
}

.tutorial-box h3, .faq-box h3 {
    text-align: left;
    color: #007bff;
    font-size: 20px;
    border-bottom: none;
    padding-bottom: 0;
}

.faq-box ul {
    list-style-type: none; /* Remove bullets padrão */
    padding-left: 0;
}

.faq-box li {
    margin-bottom: 15px;
    padding-left: 1.5em; /* Espaço para bullet customizado se quiser */
    position: relative;
}

.faq-box li::before {
    content: "•"; /* Bullet customizado */
    color: #28a745; /* Cor verde para destaque */
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

.faq-box strong {
    color: #000;
}

.faq-box p {
    text-align: left;
    color: #495057;
    margin-top: 5px;
    font-size: 14px;
}     
</style>

<div class="blogger-tag-generator-box">
    <h3>Gerador de Meta Tags Avançadas para Blogger (Versão Completa)</h3>
    <p>Gere o código de SEO e Open Graph (redes sociais) para seus posts no Blogger. Cole o resultado diretamente no <code>&lt;head&gt;</code> do seu template ou post.</p>
    
    <label for="inputTitleBlogger">Título do Post/Página (Máx. 60 caracteres):</label>
    <input type="text" id="inputTitleBlogger" maxlength="60" onkeyup="gerarMetaTagsBlogger()" placeholder="Ex: Novo Guia Completo de SEO para Blogger">
    
    <label for="inputDescriptionBlogger">Descrição do Post (Máx. 160 caracteres):</label>
    <textarea id="inputDescriptionBlogger" maxlength="160" onkeyup="gerarMetaTagsBlogger()" placeholder="Descrição otimizada para atrair cliques."></textarea>

    <label for="inputImageBlogger">URL da Imagem de Compartilhamento (Open Graph):</label>
    <input type="url" id="inputImageBlogger" onkeyup="gerarMetaTagsBlogger()" placeholder="Ex: https://seusite.com.br/imagens/imagem-destaque.jpg">
    
    <label for="inputCanonicalBlogger">URL Canônica do Post (Link Completo):</label>
    <input type="url" id="inputCanonicalBlogger" onkeyup="gerarMetaTagsBlogger()" placeholder="Ex: https://seusite.com.br/2025/11/seu-post.html">

    <label for="inputAuthorBlogger">Nome do Autor (para a Meta Tag Author):</label>
    <input type="text" id="inputAuthorBlogger" onkeyup="gerarMetaTagsBlogger()" placeholder="Ex: Pejotta">

    <label for="inputLangBlogger">Idioma da Página (Tag lang=):</label>
    <select id="inputLangBlogger" onchange="gerarMetaTagsBlogger()">
        <option value="pt-BR" selected>Português (Brasil)</option>
        <option value="pt">Português (Portugal)</option>
        <option value="en">Inglês</option>
        <option value="es">Espanhol</option>
    </select>

    <label for="inputRobotsBlogger">Instruções para os Robôs de Busca (Robots):</label>
    <select id="inputRobotsBlogger" onchange="gerarMetaTagsBlogger()">
        <option value="index, follow" selected>Indexar e Seguir (Padrão)</option>
        <option value="noindex, follow">Não Indexar, mas Seguir Links</option>
        <option value="index, nofollow">Indexar, mas Não Seguir Links</option>
        <option value="noindex, nofollow">Não Indexar e Não Seguir Links (Raro)</option>
    </select>


    <h4>Código HTML Gerado para Blogger</h4>
    <textarea id="outputCodeBlogger" rows="15" readonly placeholder="O código completo, incluindo tags de SEO e Open Graph, aparecerá aqui."></textarea>
</div>

<div class="tutorial-box">
    <h3>✨ Como Usar o Gerador de Meta Tags para SEO Blogger</h3>
    <p>Esta ferramenta gera um código HTML completo que você deve copiar e colar **manualmente** no seu template do Blogger (ou em posts específicos, se seu tema permitir):</p>
    
    <ol>
        <li><strong>Preencha os Campos:</strong> Insira o Título e a Descrição otimizados, como de costume.</li>
        <li><strong>URL da Imagem:</strong> Cole o link direto da imagem que você quer que apareça como destaque ao compartilhar o post no Facebook, WhatsApp ou LinkedIn. É crucial para o **Open Graph**!</li>
        <li><strong>URL Canônica:</strong> Cole o link COMPLETO do post que você está otimizando. Isso é essencial para dizer ao Google qual é a versão original do seu conteúdo.</li>
        <li><strong>Copiar e Colar:</strong> Copie todo o código gerado na <strong>Área de Código HTML</strong> e cole dentro da seção <code>&lt;head&gt;</code> do seu post ou template do Blogger.</li>
    </ol>
    
    <p style="font-style: italic;"><strong>Atenção:</strong> Se você estiver editando o template principal, use Tags Condicionais do Blogger (<code>&lt;b:if&gt;</code>) para aplicar o código somente onde for necessário.</p>
</div>

<div class="faq-box">
    <h3>❓ Perguntas Frequentes (FAQ) sobre SEO no Blogger</h3>
    
    <ul>
        <li>
            <strong>O que é Open Graph e por que o Blogger precisa disso?</strong>
            <p><strong>Open Graph (OG)</strong> é um protocolo usado por redes como Facebook e WhatsApp. Ele garante que, quando seu link é compartilhado, a imagem, o título e a descrição corretos (que você define) sejam exibidos, evitando que a rede social puxe informações aleatórias e feias do seu post.</p>
        </li>
        <li>
            <strong>O que é a URL Canônica e como preenchê-la?</strong>
            <p>O link canônico (<code>rel="canonical"</code>) diz ao Google qual é a URL "oficial" daquele conteúdo. Use o link do post que está no seu navegador, por exemplo: <code>https://seublog.com.br/2025/11/seu-post.html</code>. Isso evita problemas de conteúdo duplicado, comum em páginas de arquivo ou categorias.</p>
        </li>
        <li>
            <strong>Qual a diferença entre essas tags e as tags de SEO do Blogger?</strong>
            <p>O Blogger já tem tags de SEO básicas. No entanto, ele não gera automaticamente as tags de **Open Graph (og:)** e **Twitter Cards** de forma otimizada, ou não permite personalizá-las de forma fácil. Nosso gerador preenche essa lacuna, dando total controle sobre como seu link aparece nas redes.</p>
        </li>
        <li>
            <strong>A tag de Twitter Cards é a mesma que o Open Graph?</strong>
            <p>Elas têm a mesma finalidade, mas sintaxes diferentes. O Twitter lê o Open Graph se não encontrar o Twitter Card, mas é melhor incluir o Twitter Card (como o <code>summary_large_image</code>) para garantir que sua imagem de destaque apareça grande e chamativa no Twitter/X.</p>
        </li>
      <li>
    <strong>Para que servem as opções 'Robots' (Index/Noindex)?</strong>
    <p>A meta tag Robots instrui os mecanismos de busca. O padrão é <code>index, follow</code>, que permite que o Google rastreie e classifique sua página. Você só deve usar <code>noindex</code> em páginas privadas, de teste ou de conteúdo de baixo valor que você não quer que apareça na busca.</p>
</li>
<li>
    <strong>Como o campo de Idioma ('lang') impacta o SEO?</strong>
    <p>A tag de idioma (<code>http-equiv="content-language"</code> e <code>og:locale</code>) ajuda o Google e as redes sociais a entenderem o público-alvo do seu conteúdo. Por exemplo, definir como <code>pt-BR</code> ajuda o Google a priorizar seu artigo para buscas feitas por usuários no Brasil, e ajuda o Facebook a formatar a postagem corretamente.</p>
</li>
<li>
    <strong>Devo preencher o campo "Autor"?</strong>
    <p>A meta tag <code>author</code> não é um fator de ranqueamento direto, mas é uma boa prática de credibilidade e ajuda a identificação do seu conteúdo. É recomendado preencher com o seu nome ou o nome do seu blog.</p>
</li>
    </ul>
</div>

<script>
function gerarMetaTagsBlogger() {
    // 1. Coleta os Valores dos Inputs (permanece o mesmo)
    const title = document.getElementById('inputTitleBlogger').value.trim();
    const description = document.getElementById('inputDescriptionBlogger').value.trim();
    const image = document.getElementById('inputImageBlogger').value.trim();
    const canonicalUrl = document.getElementById('inputCanonicalBlogger').value.trim();
    const author = document.getElementById('inputAuthorBlogger').value.trim();
    const lang = document.getElementById('inputLangBlogger').value;
    const robots = document.getElementById('inputRobotsBlogger').value;
    const outputCode = document.getElementById('outputCodeBlogger');
    
    let htmlCode = '';

    // --- A. TAGS ESSENCIAIS E TÉCNICAS ---

    htmlCode += `\n`;

    // 1. Tag Idioma (Lang)
    // CORREÇÃO: Adicionando a barra / no fechamento
    htmlCode += `<meta http-equiv="content-language" content="${lang}" />\n`; 
    
    // Título da Página (Tag Title) - Esta tag NÃO é vazia, então o fechamento é normal
    if (title.length > 0) {
        htmlCode += `<title>${title}</title>\n`;
    }

    // Meta Description
    // CORREÇÃO: Adicionando a barra / no fechamento
    if (description.length > 0) {
        htmlCode += `<meta name="description" content="${description}" />\n`;
    }
    
    // Tag Author
    // CORREÇÃO: Adicionando a barra / no fechamento
    if (author.length > 0) {
        htmlCode += `<meta name="author" content="${author}" />\n`;
    }

    // Tags Robots
    // CORREÇÃO: Adicionando a barra / no fechamento
    htmlCode += `<meta name="robots" content="${robots}" />\n`;

    // URL Canônica
    // CORREÇÃO: Esta é uma tag LINK (vazia), então adicionamos a barra /
    if (canonicalUrl.length > 0) {
        htmlCode += `<link rel="canonical" href="${canonicalUrl}" />\n`;
    }

    // --- B. OPEN GRAPH (FACEBOOK, WHATSAPP, ETC.) ---

    if (title.length > 0 || description.length > 0 || image.length > 0) {
        htmlCode += `\n\n`;
        
        // CORREÇÃO em TODAS as tags <meta> do OG
        htmlCode += `<meta property="og:title" content="${title}" />\n`;
        htmlCode += `<meta property="og:type" content="article" />\n`;
        htmlCode += `<meta property="og:description" content="${description}" />\n`;
        htmlCode += `<meta property="og:locale" content="${lang.replace('-', '_')}" />\n`;
        
        if (image.length > 0) {
             htmlCode += `<meta property="og:image" content="${image}" />\n`;
        }
        if (canonicalUrl.length > 0) {
             htmlCode += `<meta property="og:url" content="${canonicalUrl}" />\n`;
        }
    }
    
    // --- C. TWITTER CARDS ---

    if (title.length > 0 || description.length > 0 || image.length > 0) {
        htmlCode += `\n\n`;
        
        // CORREÇÃO em TODAS as tags <meta> do Twitter
        htmlCode += `<meta name="twitter:card" content="summary_large_image" />\n`;
        htmlCode += `<meta name="twitter:title" content="${title}" />\n`;
        htmlCode += `<meta name="twitter:description" content="${description}" />\n`;
        
        if (image.length > 0) {
            htmlCode += `<meta name="twitter:image" content="${image}" />\n`;
        }
    }

    // 3. Exibe o Código
    outputCode.value = htmlCode.trim();
}

// Roda a função para limpar o campo ao carregar
gerarMetaTagsBlogger();
</script>