Social Media Rules

Rules for validating Open Graph and Twitter Card meta tags.

open-graph

Validates Open Graph meta tags for social sharing.

Required Tags

og:title - Page title
og:description - Page description
og:image - Preview image
og:url - Canonical URL
og:type - Content type (website, article, etc.)

Examples

Pass:

<meta property="og:type" content="website">
<meta property="og:title" content="React Hooks Guide">
<meta property="og:description" content="Learn React Hooks...">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/react-hooks">

Fail (missing):

<meta property="og:title" content="React Hooks">
<!-- Warning: Missing og:image -->
<!-- Warning: Missing og:url -->

Configuration

rules: {
  'open-graph': {
    severity: 'warning',
  },
}

twitter-card

Validates Twitter Card meta tags.

Card Types

summary - Small square image
summary_large_image - Large rectangular image
app - App download
player - Video/audio

Required Tags

twitter:card - Card type
twitter:title - Title (if different from og:title)
twitter:description - Description
twitter:image - Preview image

Examples

Pass:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="React Hooks Guide">
<meta name="twitter:description" content="Learn React Hooks...">
<meta name="twitter:image" content="https://example.com/twitter.png">

Pass (using OG fallback):

<!-- Twitter falls back to OG tags if twitter: tags missing -->
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="React Hooks Guide">
<meta property="og:description" content="Learn React Hooks...">
<meta property="og:image" content="https://example.com/og.png">

Info:

<meta name="twitter:card" content="summary">
<!-- Info: Consider adding twitter:site for attribution -->

Configuration

rules: {
  'twitter-card': {
    severity: 'warning',
  },
}

social-preview

Validates Open Graph content length for optimal display.

Checks

Title: < 60 characters
Description: 55-200 characters
Image: 1200x630px recommended

Examples

Info (short description):

<meta property="og:description" content="A guide.">
<!-- Info: Open Graph description is short (8 chars) -->
<!-- Aim for 55-200 characters -->

Info (long title):

<meta property="og:title" content="The Complete and Comprehensive Guide to Understanding React Hooks for Beginners">
<!-- Info: OG title may be truncated (80 chars, aim for <60) -->

Configuration

rules: {
  'social-preview': {
    severity: 'info',
  },
}

Complete Example

<head>
  <!-- Basic Meta -->
  <title>React Hooks Guide - Learn useState and useEffect</title>
  <meta name="description" content="Master React Hooks with practical examples. Learn useState, useEffect, and custom hooks.">

  <!-- Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="My Dev Blog">
  <meta property="og:title" content="React Hooks Guide - Learn useState and useEffect">
  <meta property="og:description" content="Master React Hooks with practical examples covering useState, useEffect, and custom hooks for modern React development.">
  <meta property="og:image" content="https://example.com/images/react-hooks-og.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://example.com/guides/react-hooks">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@mydevblog">
  <meta name="twitter:creator" content="@author">
  <!-- Falls back to OG tags for title, description, image -->
</head>

Image Requirements

Open Graph

Recommended: 1200x630px
Minimum: 600x315px
Aspect ratio: 1.91:1
Max file size: 8MB
Format: JPG, PNG, GIF

Twitter

summary: 1:1 (120x120px min)
summary_large_image: 2:1 (300x157px min)
Maximum: 4096x4096px

Best Practices

Titles

Concise (< 60 chars)
Compelling
Include brand if space allows

Descriptions

100-150 characters
Call to action
Key benefit

Images

High quality
Clear text if any
Consistent branding
Test on validators