OpenGraph Guide: Test and Preview Social Media Cards

What is OpenGraph

OpenGraph is a technology that controls how your website looks when shared on social media platforms. It uses meta tags in your website's HTML code to specify the title, description, and image that appear in social media posts.

OpenGraph Meta Tags

OpenGraph meta tags are special HTML code that you add to your website. These tags tell social media platforms what information to show when someone shares your website. The main OpenGraph meta tags include:

  • og:title: The title of your page
  • og:description: A brief description of your page
  • og:image: The image to display with your content
  • og:url: The permanent link to your content

OpenGraph Image Size and Dimensions

The OpenGraph image size is important for good looking social media previews. Here are the recommended image dimensions for different platforms:

  • Facebook: 1200 x 630 pixels
  • Twitter: 1200 x 675 pixels
  • LinkedIn: 1200 x 627 pixels

Using these OpenGraph image dimensions will ensure your images look clear and properly formatted across all platforms.

How to Test OpenGraph Tags

You can use an OpenGraph tester or OpenGraph checker to verify your tags work correctly. Our OpenGraph preview tool helps you:

  • Test how your website appears on different social platforms
  • Preview your OpenGraph image and text
  • Debug any issues with your OpenGraph meta tags
  • Generate correct OpenGraph meta tags for your website

NextJS OpenGraph Implementation

NextJS makes it easy to add OpenGraph meta tags to your website. You can add these tags in your page's metadata configuration or layout files. Here's a basic example of OpenGraph implementation in NextJS:

export const metadata = {
  openGraph: {
    title: 'Your Title',
    description: 'Your Description',
    images: [{
      url: 'https://example.com/image.jpg',
    }],
  },
}

Using Our OpenGraph Test Tool

Our OpenGraph debugger tool helps you test and preview your website's social media appearance. Simply enter your URL and the tool will:

  • Show how your site looks on Facebook, Twitter, and LinkedIn
  • Display your current OpenGraph meta tags
  • Let you edit and generate new meta tags
  • Help you fix common OpenGraph problems
Try OpenGraph Tester