Gerador de Meta Tags Simples com Visualização

Gerador de Meta Tags Simples

Título da Página/Post (máx. 60 caracteres):

0/60

Descrição da Página (máx. 160 caracteres):

0/160

URL da Página:

Prévia da Pesquisa Google (SERP Preview)

O Título aparecerá aqui...

seusite.com/exemplo

A descrição aparecerá aqui...

Código HTML Gerado

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>
  /* Container da Ferramenta */
.meta-tag-generator-box {
    font-family: Arial, sans-serif;
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Campos de Input */
.meta-tag-generator-box label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: #333;
}

.meta-tag-generator-box input[type="text"],
.meta-tag-generator-box textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

/* Contadores */
.counter {
    text-align: right;
    font-size: 12px;
    color: #666;
}

/* Prévia da SERP (Resultados do Google) */
.serp-box {
    border: 1px dashed #ccc;
    padding: 15px;
    margin-top: 10px;
    background-color: #f9f9f9;
}

.serp-title {
    color: #1a0dab; /* Azul do link do Google */
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... no final */
}

.serp-url {
    color: #006621; /* Verde da URL do Google */
    font-size: 14px;
    margin: 3px 0;
}

.serp-description {
    color: #545454;
    font-size: 13px;
    line-height: 1.4;
    max-height: 40px; /* Limita a altura da descrição */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Código Gerado */
#outputCode {
    background-color: #eee;
    font-family: monospace;
    font-size: 13px;
    border: 1px solid #ccc;
    resize: none;
}
</style>

<div class="meta-tag-generator-box">
    <h3>Gerador de Meta Tags Simples</h3>
    
    <label for="inputTitle">Título da Página/Post (máx. 60 caracteres):</label>
    <input type="text" id="inputTitle" maxlength="60" onkeyup="gerarMetaTags()" placeholder="Ex: Melhores Dicas de SEO para 2026">
    <div id="titleCounter" class="counter">0/60</div>
    
    <label for="inputDescription">Descrição da Página (máx. 160 caracteres):</label>
    <textarea id="inputDescription" maxlength="160" onkeyup="gerarMetaTags()" placeholder="Ex: Aprenda como otimizar seu blog para ranquear na primeira página do Google."></textarea>
    <div id="descCounter" class="counter">0/160</div>

    <h4>Prévia da Pesquisa Google (SERP Preview)</h4>
    <div id="serpPreview" class="serp-box">
        <div id="previewTitle" class="serp-title">O Título aparecerá aqui...</div>
        <div class="serp-url">seublog.com.br/artigo-aqui</div>
        <div id="previewDescription" class="serp-description">A descrição aparecerá aqui...</div>
    </div>
    
    <h4>Código HTML Gerado</h4>
    <textarea id="outputCode" rows="6" readonly placeholder="O código das Meta Tags aparecerá automaticamente aqui."></textarea>
</div>

<div class="tutorial-box">
    <h3>✨ Como Usar o Gerador de Meta Tags Simples</h3>
    <p>O Gerador de Meta Tags Simples é rápido e direto, feito para otimizar seus artigos antes da publicação:</p>
    
    <ol>
        <li><strong>Título (Máx. 60 Caracteres):</strong> Digite o título exato que você deseja que apareça na pesquisa do Google. Fique de olho no contador para não cortar o título na SERP.</li>
        <li><strong>Descrição (Máx. 160 Caracteres):</strong> Escreva uma descrição curta, envolvente e que contenha suas palavras-chave. Lembre-se que essa é a "propaganda" do seu post.</li>
        <li><strong>Prévia do Google:</strong> Observe a área de prévia para ter certeza de que o título e a descrição não estão sendo cortados e que estão visualmente atraentes.</li>
        <li><strong>Copiar o Código:</strong> O campo <strong>Código HTML Gerado</strong> é atualizado em tempo real. Copie o conteúdo completo e insira-o no <code>&lt;head&gt;</code> do seu post (ou no campo de SEO do seu editor de blog).</li>
    </ol>
</div>
<br/>
<div class="faq-box">
    <h3>❓ Perguntas Frequentes (FAQ)</h3>
    
    <ul>
        <li>
            <strong>O que são Meta Tags e por que são importantes para o meu blog?</strong>
            <p>Meta Tags são trechos de código que descrevem o conteúdo de uma página para os mecanismos de busca e para as redes sociais. A tag <code>&lt;title&gt;</code> e a <code>description</code> são cruciais porque influenciam se o usuário (e o Google) vai clicar no seu resultado. Elas são a sua primeira impressão no Google!</p>
        </li><br/>
        <li>
            <strong>O que é "Prévia da SERP"?</strong>
            <p>SERP é o acrônimo para <em>Search Engine Results Page</em> (Página de Resultados do Mecanismo de Busca). A prévia simula como o seu Título e Descrição aparecerão para os usuários que estão pesquisando no Google, ajudando você a evitar cortes de texto e a maximizar o apelo do seu link.</p>
        </li><br/>
        <li>
            <strong>Devo usar exatamente 60 e 160 caracteres?</strong>
            <p>Não é uma regra, mas é uma <strong>melhor prática</strong>. O Google geralmente exibe até 60 caracteres no título e até 160 na descrição antes de cortá-los com reticências (...). Manter-se dentro desses limites garante que sua mensagem completa será visualizada.</p>
        </li><br/>
        <li>
            <strong>Onde eu colo esse código HTML no meu blog?</strong>
            <p>Esse código deve ser inserido dentro da seção <code>&lt;head&gt;</code> do seu código HTML. Na maioria dos sistemas de blog (como WordPress, com plugins de SEO), existe um campo específico para "Título SEO" e "Meta Descrição", onde você só precisa colar o texto gerado, sem as tags.</p>
        </li>
    </ul>
</div>

<script>
  function gerarMetaTags() {
    const titleInput = document.getElementById('inputTitle');
    const descInput = document.getElementById('inputDescription');
    const outputCode = document.getElementById('outputCode');
    
    const previewTitle = document.getElementById('previewTitle');
    const previewDescription = document.getElementById('previewDescription');
    const titleCounter = document.getElementById('titleCounter');
    const descCounter = document.getElementById('descCounter');

    // 1. Coleta e Limpa os Valores
    const title = titleInput.value.trim();
    const description = descInput.value.trim();

    // 2. Atualiza os Contadores
    titleCounter.textContent = `${title.length}/${titleInput.maxLength}`;
    descCounter.textContent = `${description.length}/${descInput.maxLength}`;

    // 3. Atualiza a Prévia (SERP)
    previewTitle.textContent = title || "O Título aparecerá aqui...";
    previewDescription.textContent = description || "A descrição aparecerá aqui...";

    // 4. Gera o Código HTML Final
    let htmlCode = '';

    if (title.length > 0) {
        // Tag Title
        htmlCode += `<title>${title}</title>\n`;
    }

    if (description.length > 0) {
        // Meta Tag Description
        htmlCode += `<meta name="description" content="${description}">\n`;
    }
    
    // Configuração de Robots (geralmente index, follow)
    htmlCode += `<meta name="robots" content="index, follow">`;

    // 5. Exibe o Código
    outputCode.value = htmlCode;
}
// Garante que a função rode ao carregar a página (opcional)
gerarMetaTags();
</script>