SEO Components to Pages

SEO is must-have for any content, so creating a reusable SEO component is one of the first things you should do when setting up your ButterCMS project. This component can be reused across all your Page Types for consistent search optimization.

Why create SEO Components?

Consistency

Same SEO fields across all Page Types

Completeness

Ensure no SEO field is forgotten

Efficiency

Update SEO schema once, apply everywhere

Best Practices

Built-in validation for SEO guidelines

Building an SEO Component

An SEO component can be quite simple: SEO component schema

Our fields will be:

A Short Text field for our meta title
A Short Text field for our meta description
- You can set a max of 150-160 characters for SEO best practices by clicking on the Gear (⚙️) icon
A Media field for our open graph image when sharing the blog post via social media and messaging platforms
A Date field to set our original published date for SEO and JSON-LD

Essential SEO fields

Core meta tags

Field Name	Field Type	Validation	Purpose
Meta Title	Short Text	Max 60 chars	Browser tab and search results
Meta Description	Short Text	Max 160 chars	Search result snippet
Canonical URL	Short Text	URL pattern	Prevent duplicate content
Robots	Dropdown	index/noindex, follow/nofollow	Search engine directives

Field Name	Field Type	Validation	Purpose
OG Title	Short Text	Max 60 chars	Social share headline
OG Description	Short Text	Max 200 chars	Social share summary
OG Image	Media	1200x630px recommended	Social share image
OG Type	Dropdown	website, article, product	Content type

Twitter card tags

Field Name	Field Type	Options	Purpose
Twitter Card Type	Dropdown	summary, summary_large_image	Card display format
Twitter Title	Short Text	Max 70 chars	Tweet headline
Twitter Description	Short Text	Max 200 chars	Tweet summary
Twitter Image	Media	1200x600px for large	Tweet image

Complete SEO Component schema

Here’s a comprehensive SEO component that covers all essential metadata:

SEO & Social Component
├── Core SEO
│   ├── meta_title (Short Text, max 60, required)
│   ├── meta_description (Short Text, max 160, required)
│   ├── canonical_url (Short Text, optional)
│   ├── robots (Dropdown: index/follow, index/nofollow, noindex/follow, noindex/nofollow)
│   └── published_date (Date)
│
├── Open Graph
│   ├── og_title (Short Text, max 60, defaults to meta_title)
│   ├── og_description (Short Text, max 200, defaults to meta_description)
│   ├── og_image (Media, required)
│   └── og_type (Dropdown: website, article, product, profile)
│
├── Twitter
│   ├── twitter_card (Dropdown: summary, summary_large_image)
│   ├── twitter_title (Short Text, defaults to og_title)
│   ├── twitter_description (Short Text, defaults to og_description)
│   └── twitter_image (Media, defaults to og_image)
│
└── Advanced (Optional)
    ├── keywords (Short Text, comma-separated)
    ├── author (Reference → Authors Collection)
    └── schema_type (Dropdown: Article, BlogPosting, Product, WebPage)

Rendering SEO tags

Using React Helmet to generate the head HTML tags:

<Helmet
    htmlAttributes={{
      lang
    }}
    title={title}
    titleTemplate={`%s | ${site.siteMetadata.title}`}
    meta={[
      {
        name: `description`,
        content: metaDescription
      },
      {
        property: `og:title`,
        content: title
      },
      {
        property: `og:description`,
        content: metaDescription
      },
      {
        property: `og:type`,
        content: `website`
      },
      {
        name: `twitter:card`,
        content: `summary`
      },
      {
        name: `twitter:creator`,
        content: site.siteMetadata.author
      },
      {
        name: `twitter:title`,
        content: title
      },
      {
        name: `twitter:description`,
        content: metaDescription
      }
    ].concat(meta)}
  />

Next.js example

// components/seo.js
import Head from 'next/head'

function SEO({ seo }) {
  return (
    <Head>
      <title>{seo.meta_title}</title>
      <meta name='description' content={seo.meta_description} />

      {/* Open Graph */}
      <meta property='og:type' content={seo.og_type || 'website'} />
      <meta property='og:title' content={seo.og_title || seo.meta_title} />
      <meta property='og:description' content={seo.og_description || seo.meta_description} />
      <meta property='og:image' content={seo.og_image} />

      {/* Twitter */}
      <meta name='twitter:card' content={seo.twitter_card || 'summary_large_image'} />
      <meta name='twitter:title' content={seo.twitter_title || seo.meta_title} />
      <meta name='twitter:description' content={seo.twitter_description || seo.meta_description} />
      <meta name='twitter:image' content={seo.twitter_image || seo.og_image} />

      {/* Canonical */}
      {seo.canonical_url && <link rel='canonical' href={seo.canonical_url} />}
    </Head>
  )
}

export default SEO

For pages where social sharing is critical, create a dedicated social preview Component:

Social Preview Component
├── facebook_title (Short Text, max 60)
├── facebook_description (Short Text, max 200)
├── facebook_image (Media, 1200x630px)
├── twitter_title (Short Text, max 70)
├── twitter_description (Short Text, max 200)
├── twitter_image (Media, 1200x600px)
├── twitter_handle (Short Text, e.g., @yourbrand)
├── linkedin_title (Short Text)
├── linkedin_description (Short Text, max 256)
└── pinterest_description (Short Text, max 500)

This allows content editors to customize messaging per platform while maintaining SEO as a separate concern.

Image requirements

Open Graph (Facebook, LinkedIn)

Specification	Recommendation
Dimensions	1200 x 630 pixels
Aspect Ratio	1.91:1
File Size	Under 8MB
Format	PNG, JPEG
Text	Keep important content centered

Twitter cards

Card Type	Image Dimensions
Summary	144 x 144 pixels (min), 4096 x 4096 (max)
Summary Large Image	300 x 157 pixels (min), 4096 x 4096 (max)
Recommended	1200 x 600 pixels for best display

Specification	Recommendation
Dimensions	1000 x 1500 pixels
Aspect Ratio	2:3
Format	PNG, JPEG

Structured data Component

For enhanced search results, create a structured data Component:

Structured Data Component
├── schema_type (Dropdown: Article, BlogPosting, Product, FAQPage, etc.)
├── headline (Short Text)
├── author_name (Short Text)
├── author_url (Short Text)
├── date_published (Date)
├── date_modified (Date)
├── publisher_name (Short Text)
├── publisher_logo (Media)
└── main_image (Media)

Rendering JSON-LD

function StructuredData({ data }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": data.schema_type,
    "headline": data.headline,
    "author": {
      "@type": "Person",
      "name": data.author_name,
      "url": data.author_url
    },
    "datePublished": data.date_published,
    "dateModified": data.date_modified,
    "publisher": {
      "@type": "Organization",
      "name": data.publisher_name,
      "logo": {
        "@type": "ImageObject",
        "url": data.publisher_logo
      }
    },
    "image": data.main_image
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

Best practices

Make SEO fields required

Set meta title, meta description, and OG image as required fields to ensure content is never published without essential SEO metadata.

Use character limits

Configure max character limits based on platform guidelines: 60 for titles, 160 for descriptions.

Provide helpful defaults

Set default robots to “index, follow” and default OG type to “website” so editors don’t need to set them for standard pages.

Add field help text

Include guidance in field help text, like “Keep under 60 characters for best display in search results.”

Inherit values when appropriate

In your frontend, let Twitter fields fall back to OG fields, and OG fields fall back to meta fields when empty.

Validate image dimensions

Use help text to remind editors of recommended image dimensions for each platform.

SEO Component variations

Consider creating specialized SEO Components for different content types:

Article SEO Component

Enhanced for blog posts and articles:

Article-specific schema type
Author reference
Reading time
Article section/category
Publication and modification dates

Product SEO Component

Enhanced for e-commerce:

Product schema type
Price
Availability
Brand
SKU
Reviews/ratings

Event SEO Component

Enhanced for events:

Event schema type
Start/end dates
Location
Performer/organizer
Ticket availability

Testing your SEO setup

After implementing your SEO Components, validate them with these tools:

Tool	Purpose	URL
Facebook Sharing Debugger	Test Open Graph tags	developers.facebook.com/tools/debug
Twitter Card Validator	Test Twitter cards	cards-dev.twitter.com/validator
LinkedIn Post Inspector	Test LinkedIn previews	linkedin.com/post-inspector
Google Rich Results Test	Test structured data	search.google.com/test/rich-results
Schema.org Validator	Validate JSON-LD	validator.schema.org

Overview

How-to recipes

Rendering complex field types

Webhooks and events

Third-party integrations

Performance

Content migration

Multi-site and environments

Localization and languages

SEO

Media CDN

Security and compliance

Why create SEO Components?

Consistency

Completeness

Efficiency

Best Practices

Building an SEO Component

Essential SEO fields

Core meta tags

Twitter card tags

Complete SEO Component schema

Rendering SEO tags

Next.js example

Image requirements

Open Graph (Facebook, LinkedIn)

Twitter cards

Pinterest

Structured data Component

Rendering JSON-LD

Best practices

SEO Component variations

Article SEO Component

Product SEO Component

Event SEO Component

Testing your SEO setup

​SEO & Social Components

​Why create SEO Components?

Consistency

Completeness

Efficiency

Best Practices

​Building an SEO Component

​Essential SEO fields

​Core meta tags

​Open Graph tags (social sharing)

​Twitter card tags

​Complete SEO Component schema

​Rendering SEO tags

​Next.js example

​Social sharing preview Component

​Image requirements

​Open Graph (Facebook, LinkedIn)

​Twitter cards

​Pinterest

​Structured data Component

​Rendering JSON-LD

​Best practices

​SEO Component variations

​Article SEO Component

​Product SEO Component

​Event SEO Component

​Testing your SEO setup

SEO & Social Components

Why create SEO Components?

Building an SEO Component

Essential SEO fields

Core meta tags

Open Graph tags (social sharing)

Twitter card tags

Complete SEO Component schema

Rendering SEO tags

Next.js example

Social sharing preview Component

Image requirements

Open Graph (Facebook, LinkedIn)

Twitter cards

Pinterest

Structured data Component

Rendering JSON-LD

Best practices

SEO Component variations

Article SEO Component

Product SEO Component

Event SEO Component

Testing your SEO setup