w
Documentation Core Tools Open Graph Meta Generator

Basic Usage Guide

This guide will walk you through the essential steps to generate Open Graph meta tags using our tool.

Step 1: Access the Tool

Navigate to the Open Graph Meta Generator from the main tools page or by typing the URL directly.

Step 2: Fill in General Information

Page Type

Select the appropriate content type for your page:

  • Website: General website pages
  • Article: Blog posts, news articles, tutorials
  • Book: Book pages, e-books
  • Profile: Personal or business profiles
  • Music: Music tracks, albums, playlists
  • Video: Video content, movies, TV shows

Title

Enter a compelling title for your page:

  • Keep it under 60 characters for optimal display
  • Make it descriptive and engaging
  • Include relevant keywords naturally

Description

Write a clear description of your content:

  • Aim for 150-160 characters
  • Summarize what users will find on the page
  • Make it compelling to encourage clicks

Page URL

Enter the full URL of your page:

  • Use absolute URLs (include https://)
  • Ensure the URL is accessible
  • Use clean, descriptive URLs

Site Name

Specify your website or brand name:

  • This appears in social media posts
  • Keep it consistent across all pages
  • Use your official brand name

Step 3: Configure Image Settings

Image URL

Provide the URL of your social media image:

  • Use absolute URLs (include https://)
  • Ensure the image is publicly accessible
  • Recommended size: 1200x630 pixels

Image Alt Text

Add descriptive alt text for accessibility:

  • Describe what's in the image
  • Keep it concise but descriptive
  • Important for screen readers

Image Dimensions

Specify the width and height of your image:

  • Width: typically 1200 pixels
  • Height: typically 630 pixels
  • These help social platforms optimize display

Step 4: Set Up Twitter Settings

Card Type

Choose the appropriate Twitter Card type:

  • Summary: Basic card with title, description, and thumbnail
  • Summary with Large Image: Enhanced card with large image
  • App: For mobile app promotion
  • Player: For video or audio content

Site Account

Enter your website's Twitter handle:

  • Format: @yourhandle
  • This appears in Twitter posts
  • Optional but recommended

Creator Account

Enter the content creator's Twitter handle:

  • Format: @authorhandle
  • Useful for articles and blog posts
  • Optional

Step 5: Generate and Copy Meta Tags

Once you've filled in all the information:

  1. The meta tags will be generated automatically in real-time
  2. Review the generated HTML in the output section
  3. Click the "Copy Meta Tags" button to copy to clipboard
  4. The preview section shows how your content will appear on social media

Step 6: Implement on Your Website

Add the copied meta tags to your website's HTML <head> section:

<head>
  <!-- Your existing head content -->

  <!-- Open Graph Meta Tags -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Your Page Title" />
  <!-- ... other meta tags ... -->

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <!-- ... other Twitter meta tags ... -->
</head>

Quick Tips

For Best Results:

  • Always use high-quality, relevant images
  • Test your meta tags using social media debugging tools
  • Keep titles and descriptions within recommended character limits
  • Use consistent branding across all pages

Common Mistakes to Avoid:

  • Using relative URLs instead of absolute URLs
  • Forgetting to include image alt text
  • Using images that are too small or too large
  • Not testing how the tags appear on different platforms

Testing Your Meta Tags

After implementing your meta tags, test them using:

These tools will show you exactly how your content will appear when shared and help you identify any issues.

Next Steps

Now that you understand the basics, explore our Advanced Features guide to learn about more sophisticated options and customization possibilities.

Was this page helpful?