w
Documentación Herramientas principales Open Graph Meta Generator

Referencia de API

Este documento proporciona detalles técnicos sobre la herramienta Open Graph Meta Generator y su funcionamiento interno.

Resumen de la herramienta

Open Graph Meta Generator es una herramienta del lado del cliente que genera meta tags HTML para los protocolos Open Graph y Twitter Card. Procesa la entrada del usuario y genera meta tags HTML con el formato adecuado.

Parámetros de entrada

Información general

ParámetroTipoObligatorioDescripciónEjemplo
pageTypestringSíTipo de contenido"website", "article", "book"
titlestringNoTítulo de la página"My Awesome Website"
descriptionstringNoDescripción de la página"A great website for developers"
urlstringNoURL de la página"https://example.com/page"
siteNamestringNoNombre del sitio"My Company"

Configuración de imágenes

ParámetroTipoObligatorioDescripciónEjemplo
imageUrlstringNoURL de la imagen"https://example.com/image.jpg"
imageAltstringNoTexto alt de la imagen"Company logo"
imageWidthstringNoAncho de la imagen en píxeles"1200"
imageHeightstringNoAlto de la imagen en píxeles"630"

Configuración de Twitter

ParámetroTipoObligatorioDescripciónEjemplo
twitterCardTypestringSíTipo de Twitter Card"summary_large_image"
twitterSitestringNoUsuario de Twitter del sitio"@example"
twitterCreatorstringNoUsuario de Twitter del autor"@author"

Formato de salida

La herramienta genera meta tags HTML con el siguiente formato:

Etiquetas 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" />

Etiquetas de 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 contenido

Tipos de página compatibles

TipoDescripciónCaso de uso
websitePáginas generales de sitios webPágina de inicio, página sobre nosotros, página de contacto
articleEntradas de blog y artículos de noticiasEntradas de blog, noticias, tutoriales
bookPáginas de libros y e-booksFichas de libros, páginas de e-books
profilePerfiles personales o de empresaPerfiles de usuario, páginas corporativas
musicPistas y álbumes musicalesStreaming de música, páginas de álbumes
videoContenido de videoPáginas de video, fichas de películas

Tipos de Twitter Card

TipoDescripciónIdeal para
summaryTarjeta básica con miniaturaEntradas de blog, noticias
summary_large_imageTarjeta con imagen grandeContenido visual, productos
appPromoción de aplicaciones móvilesPáginas de tiendas de apps
playerContenido de video/audioPáginas de video, podcasts

Procesamiento de datos

Escape de HTML

Toda la entrada del usuario se escapa automáticamente para prevenir ataques XSS:

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

Validación de URL

Las URL se validan para asegurarse de que tengan el formato correcto:

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

Límites de longitud del contenido

La herramienta aplica los límites de longitud recomendados:

  • Título: máximo de 60 caracteres
  • Descripción: máximo de 160 caracteres
  • URL: debe tener un formato de URL válido

Compatibilidad con navegadores

NavegadorVersiónCompatibilidad total
Chrome60+Compatibilidad total
Firefox55+Compatibilidad total
Safari12+Compatibilidad total
Edge79+Compatibilidad total

Funcionalidades necesarias

  • Compatibilidad con ES6+
  • Compatibilidad con la Clipboard API
  • Compatibilidad con Local Storage
  • Compatibilidad con CSS Grid

Consideraciones de rendimiento

Procesamiento del lado del cliente

  • Todo el procesamiento ocurre en el navegador
  • No se requieren solicitudes al servidor
  • Generación y vista previa instantáneas
  • Huella de memoria mínima

Caché

  • Los meta tags generados se almacenan en caché en el almacenamiento del navegador
  • Los registros del historial se guardan localmente
  • No hay dependencias externas

Manejo de errores

Errores de validación de entrada

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

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

Errores de carga de imágenes

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

Ejemplos de integración

Integración con 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');

Integración con 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} />
    </>
  );
}

Integración con 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>
  );
}

Pruebas y validación

Depuradores de redes sociales

Pruebas automatizadas

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

Solución de problemas

Problemas comunes

  1. Las imágenes no se muestran: comprueba el formato de la URL y la accesibilidad
  2. Las etiquetas no funcionan: valida con los depuradores de redes sociales
  3. Contenido truncado: revisa los límites de caracteres
  4. Problemas de caché: usa herramientas de depuración para refrescar la caché

Modo de depuración

Activa el modo de depuración para ver información detallada:

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

Mejoras futuras

Funcionalidades planificadas

  • Compatibilidad con datos estructurados de Schema.org
  • Soporte para varios idiomas
  • Capacidades de generación masiva
  • Endpoint de API para generación del lado del servidor
  • Optimización avanzada de imágenes
  • Integración con analítica

Contribuir

Para contribuir al Open Graph Meta Generator:

  1. Haz un fork del repositorio
  2. Crea una rama de funcionalidad
  3. Realiza tus cambios
  4. Añade pruebas
  5. Envía un pull request

Soporte

Si necesitas soporte técnico o tienes preguntas:

  • Consulta el FAQ
  • Revisa los Examples
  • Contacta con soporte a través del sitio web principal
¿Te resultó útil esta página?