mediumseo
Missing OpenGraph Tags
Checks for OpenGraph configuration for social media previews.
Why This Is Bad
When you share your link on Twitter, Facebook, or WhatsApp, it will look like a broken gray box instead of a beautiful preview card.
How To Fix
Add OpenGraph configuration to your metadata:
typescript
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Your Page Title',
description: 'Your description',
openGraph: {
title: 'Your Page Title',
description: 'Your description',
url: 'https://yoursite.com',
siteName: 'Your Site Name',
images: [
{
url: 'https://yoursite.com/og-image.png',
width: 1200,
height: 630,
alt: 'Description of the image',
},
],
locale: 'en_US',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'Your Page Title',
description: 'Your description',
images: ['https://yoursite.com/og-image.png'],
},
};When You Pass This Check
Your social previews are set up perfectly. Your links will look great when shared!
Check If Your Repo Has This Issue
Our free scanner will detect this and 17 other common issues in your codebase.