w
Documentação Core Open Graph Meta Generator

Referência da API

Este documento fornece detalhes técnicos sobre a ferramenta Open Graph Meta Generator e o seu funcionamento 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. Processa a entrada do utilizador e devolve meta tags HTML devidamente formatadas.

Parâmetros de entrada

Informações gerais

ParâmetroTipoObrigatórioDescriçãoExemplo
pageTypestringSimTipo de conteúdo"website", "article", "book"
titlestringNãoTítulo da página"My Awesome Website"
descriptionstringNãoDescrição da página"A great website for developers"
urlstringNãoURL da página"https://example.com/page"
siteNamestringNãoNome do site"My Company"

Definições de imagem

ParâmetroTipoObrigatórioDescriçãoExemplo
imageUrlstringNãoURL da imagem"https://example.com/image.jpg"
imageAltstringNãoTexto alt da imagem"Company logo"
imageWidthstringNãoLargura da imagem em pixels"1200"
imageHeightstringNãoAltura da imagem em pixels"630"

Definições do Twitter

ParâmetroTipoObrigatórioDescriçãoExemplo
twitterCardTypestringSimTipo de Twitter Card"summary_large_image"
twitterSitestringNãoHandle de Twitter do site"@example"
twitterCreatorstringNãoHandle de Twitter do autor"@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 suportados

TipoDescriçãoCaso de uso
websitePáginas gerais de websitePágina inicial, página sobre, página de contacto
articlePosts de blog e artigos de notíciasPosts de blog, notícias, tutoriais
bookPáginas de livros e e-booksListagens de livros, páginas de e-books
profilePerfis pessoais ou empresariaisPerfis de utilizador, páginas de empresa
musicFaixas e álbuns de músicaStreaming de música, páginas de álbuns
videoConteúdo de vídeoPáginas de vídeo, listagens de filmes

Tipos de Twitter Card

TipoDescriçãoMelhor para
summaryCard básico com miniaturaPosts de blog, notícias
summary_large_imageCard com imagem grandeConteúdo visual, produtos
appPromoção de apps móveisPáginas de app store
playerConteúdo de vídeo/áudioPáginas de vídeo, podcasts

Processamento de dados

Escape de HTML

Toda a entrada do utilizador é automaticamente escapada para prevenir ataques XSS:

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

Validação de URL

Os URLs são validados para garantir que estão devidamente formatados:

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

Limites de comprimento do conteúdo

A ferramenta aplica os limites de comprimento recomendados:

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

Compatibilidade com browsers

Browsers suportados

BrowserVersãoSuporte total
Chrome60+Suporte total
Firefox55+Suporte total
Safari12+Suporte total
Edge79+Suporte total

Funcionalidades necessárias

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

Considerações de performance

Processamento do lado do cliente

  • Todo o processamento acontece no browser
  • Não são necessários pedidos ao servidor
  • Geração e pré-visualização instantâneas
  • Pegada de memória mínima

Caching

  • As meta tags geradas são armazenadas em cache no armazenamento do browser
  • Os registos de histórico são guardados localmente
  • Sem 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

Debuggers 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" />');
  });
});

Resolução de problemas

Problemas comuns

  1. As imagens não aparecem: verifique o formato do URL e a acessibilidade
  2. As tags não funcionam: valide com os debuggers de redes sociais
  3. Conteúdo truncado: verifique os limites de caracteres
  4. Problemas de cache: utilize ferramentas de debug para atualizar o cache

Modo de debug

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

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

Melhorias futuras

Funcionalidades planeadas

  • Suporte para dados estruturados Schema.org
  • Suporte multi-idioma
  • Capacidades de geração em massa
  • Endpoint de API para geração no lado do servidor
  • Otimização avançada de imagens
  • Integração com analytics

Contribuir

Para contribuir para o Open Graph Meta Generator:

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

Suporte

Para suporte técnico ou questões:

  • Consulte o FAQ
  • Reveja os Examples
  • Contacte o suporte através do website principal
Esta página foi útil?