w
Documentation Core Tools Open Graph Meta Generator

API Reference

This document provides technical details about the Open Graph Meta Generator tool and its underlying functionality.

Tool Overview

The Open Graph Meta Generator is a client-side tool that generates HTML meta tags for Open Graph and Twitter Card protocols. It processes user input and outputs properly formatted HTML meta tags.

Input Parameters

General Information

ParameterTypeRequiredDescriptionExample
pageTypestringYesContent type"website", "article", "book"
titlestringNoPage title"My Awesome Website"
descriptionstringNoPage description"A great website for developers"
urlstringNoPage URL"https://example.com/page"
siteNamestringNoSite name"My Company"

Image Settings

ParameterTypeRequiredDescriptionExample
imageUrlstringNoImage URL"https://example.com/image.jpg"
imageAltstringNoImage alt text"Company logo"
imageWidthstringNoImage width in pixels"1200"
imageHeightstringNoImage height in pixels"630"

Twitter Settings

ParameterTypeRequiredDescriptionExample
twitterCardTypestringYesTwitter card type"summary_large_image"
twitterSitestringNoSite Twitter handle"@example"
twitterCreatorstringNoCreator Twitter handle"@author"

Output Format

The tool generates HTML meta tags in the following format:

Open Graph Tags

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

Twitter Tags

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

Content Types

Supported Page Types

TypeDescriptionUse Case
websiteGeneral website pagesHomepage, about page, contact page
articleBlog posts, news articlesBlog posts, news articles, tutorials
bookBook pages, e-booksBook listings, e-book pages
profilePersonal or business profilesUser profiles, company pages
musicMusic tracks, albumsMusic streaming, album pages
videoVideo contentVideo pages, movie listings

Twitter Card Types

TypeDescriptionBest For
summaryBasic card with thumbnailBlog posts, news articles
summary_large_imageCard with large imageVisual content, products
appMobile app promotionApp store pages
playerVideo/audio contentVideo pages, podcasts

Data Processing

HTML Escaping

All user input is automatically escaped to prevent XSS attacks:

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

URL Validation

URLs are validated to ensure they are properly formatted:

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

Content Length Limits

The tool enforces recommended length limits:

  • Title: 60 characters maximum
  • Description: 160 characters maximum
  • URL: Must be valid URL format

Browser Compatibility

Supported Browsers

BrowserVersionSupport
Chrome60+Full support
Firefox55+Full support
Safari12+Full support
Edge79+Full support

Required Features

  • ES6+ support
  • Clipboard API support
  • Local Storage support
  • CSS Grid support

Performance Considerations

Client-Side Processing

  • All processing happens in the browser
  • No server requests required
  • Instant generation and preview
  • Minimal memory footprint

Caching

  • Generated meta tags are cached in browser storage
  • History records are stored locally
  • No external dependencies

Error Handling

Input Validation Errors

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

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

Image Loading Errors

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

Integration Examples

WordPress Integration

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

React Integration

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

Next.js Integration

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

Testing and Validation

Social Media Debuggers

Automated Testing

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

Troubleshooting

Common Issues

  1. Images not displaying: Check URL format and accessibility
  2. Tags not working: Validate with social media debuggers
  3. Truncated content: Check character limits
  4. Cache issues: Use debugger tools to refresh cache

Debug Mode

Enable debug mode to see detailed information:

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

Future Enhancements

Planned Features

  • Schema.org structured data support
  • Multiple language support
  • Bulk generation capabilities
  • API endpoint for server-side generation
  • Advanced image optimization
  • Analytics integration

Contributing

To contribute to the Open Graph Meta Generator:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests
  5. Submit a pull request

Support

For technical support or questions:

  • Check the FAQ
  • Review the Examples
  • Contact support through the main website
Was this page helpful?