w
Documentação Ferramentas Principais Open Graph Meta Generator

Referência da API

Este documento fornece detalhes técnicos sobre a ferramenta Open Graph Meta Generator e sua funcionalidade subjacente.

Visão geral da ferramenta

O Open Graph Meta Generator é uma ferramenta do lado do cliente que gera meta tags HTML para os protocolos Open Graph e Twitter Card. Ela processa a entrada do usuário e produz meta tags HTML formatadas corretamente.

Parâmetros de entrada

Informações gerais

ParameterTypeRequiredDescriptionExample
pageTypestringYesTipo de conteúdo"website", "article", "book"
titlestringNoTítulo da página"My Awesome Website"
descriptionstringNoDescrição da página"A great website for developers"
urlstringNoURL da página"https://example.com/page"
siteNamestringNoNome do site"My Company"

Configurações de imagem

ParameterTypeRequiredDescriptionExample
imageUrlstringNoURL da imagem"https://example.com/image.jpg"
imageAltstringNoTexto alternativo da imagem"Company logo"
imageWidthstringNoLargura da imagem em pixels"1200"
imageHeightstringNoAltura da imagem em pixels"630"

Configurações do Twitter

ParameterTypeRequiredDescriptionExample
twitterCardTypestringYesTipo de card do Twitter"summary_large_image"
twitterSitestringNoHandle do site no Twitter"@example"
twitterCreatorstringNoHandle do criador no Twitter"@author"

Formato de saída

A ferramenta gera meta tags HTML no seguinte formato:

Tags Open Graph

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Tags do Twitter

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Tipos de conteúdo

Tipos de página compatíveis

TypeDescriptionUse Case
websitePáginas gerais de siteHomepage, about page, contact page
articlePosts de blog e notíciasBlog posts, news articles, tutorials
bookPáginas de livros e e-booksBook listings, e-book pages
profilePerfis pessoais ou empresariaisUser profiles, company pages
musicFaixas e álbuns musicaisMusic streaming, album pages
videoConteúdo em vídeoVideo pages, movie listings

Tipos de Twitter Card

TypeDescriptionBest For
summaryCard básico com miniaturaBlog posts, news articles
summary_large_imageCard com imagem grandeVisual content, products
appPromoção de aplicativo móvelApp store pages
playerConteúdo de vídeo ou áudioVideo pages, podcasts

Processamento de dados

Escape de HTML

Toda a entrada do usuário é automaticamente escapada para evitar ataques XSS:

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

Validação de URL

As URLs são validadas para garantir que estejam formatadas corretamente:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

Limites de tamanho do conteúdo

A ferramenta aplica os limites de tamanho recomendados:

  • Título: no máximo 60 caracteres
  • Descrição: no máximo 160 caracteres
  • URL: deve estar em um formato de URL válido

Compatibilidade com navegadores

BrowserVersionSupport
Chrome60+Suporte completo
Firefox55+Suporte completo
Safari12+Suporte completo
Edge79+Suporte completo

Recursos necessários

  • Suporte a ES6+
  • Suporte à Clipboard API
  • Suporte a Local Storage
  • Suporte a CSS Grid

Considerações de desempenho

Processamento no lado do cliente

  • Todo o processamento acontece no navegador
  • Nenhuma requisição ao servidor é necessária
  • Geração e visualização instantâneas
  • Uso mínimo de memória

Cache

  • As meta tags geradas são armazenadas no navegador
  • Os registros do histórico são salvos localmente
  • Não há dependências externas

Tratamento de erros

Erros de validação de entrada

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

Erros de carregamento de imagem

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

Exemplos de integração

Integração com WordPress

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

Integração com React

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Integração com Next.js

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

Testes e validação

Depuradores de redes sociais

Testes automatizados

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

Solução de problemas

Problemas comuns

  1. Images not displaying: Verifique o formato da URL e a acessibilidade
  2. Tags not working: Valide com depuradores de redes sociais
  3. Truncated content: Verifique os limites de caracteres
  4. Cache issues: Use ferramentas de depuração para atualizar o cache

Modo de depuração

Ative o modo de depuração para ver informações detalhadas:

// Enable debug logging
localStorage.setItem("debug", "true");

Melhorias futuras

Recursos planejados

  • Suporte a dados estruturados do Schema.org
  • Suporte a múltiplos idiomas
  • Recursos de geração em lote
  • Endpoint de API para geração no lado do servidor
  • Otimização avançada de imagens
  • Integração com analytics

Contribuindo

Para contribuir com o Open Graph Meta Generator:

  1. Faça um fork do repositório
  2. Crie uma branch de recurso
  3. Faça suas alterações
  4. Adicione testes
  5. Envie um pull request

Suporte

Para suporte técnico ou dúvidas:

  • Consulte o FAQ
  • Revise os Examples
  • Entre em contato com o suporte pelo site principal
Esta página foi útil?