SEO Plugin

A powerful SEO management extension that helps you optimize your content for search engines and social media sharing, right within Directus. It includes a comprehensive interface for managing metadata and a display component for monitoring SEO status.

Key Features 🔑

• Title and meta description (with template support)
• Visual search result previews
• Focus keyphrase analysis (new!)
• Social media image and previews (new!)
• Sitemap configuration
• Search engine indexing controls
• Custom SEO fields support (like canonical URLs, custom meta tags, JSON-LD, etc.)
• SEO status monitoring with hover preview from the layout view

Interface (shown in the item view)

Note: The interface now uses tabs for better organization (Basic, Advanced, Custom Fields, Keyphrase).

Display (shown in the layout view)

SEO Data 📝

• Title: The most crucial SEO element. Should be compelling and include your main keyword (recommended length: 45-60 characters)
• Meta Description: Your page's summary in search results. Make it engaging to improve click-through rates (recommended length: 130-160 characters)

Keyphrase Analysis (New!)

• Focus Keyphrase: The primary keyword or phrase you want the page to rank for.
• Analysis: Provides feedback on the keyphrase's presence and usage in the title, meta description, URL slug, and main content fields. Highlights problems, improvements, and good results.

Social Media

• OG Image: The image that appears when your page is shared on social media. Crucial for increasing social engagement.
• Social Previews: Visualizes how the content will look when shared on different platforms.

Search Engine Controls

• No Index: Tells search engines not to show this page in search results
• No Follow: Prevents search engines from following links on the page

Sitemap Settings

• Change Frequency: How often the page is updated (options: always, hourly, daily, weekly, monthly, yearly, never)
• Priority: Page importance relative to other pages (0.0 to 1.0, default: 0.5)

Additional Fields

• Additional Fields: Custom SEO fields for specific needs (like canonical URLs, custom meta tags, JSON-LD, etc.)

Data Structure 📦

SEO data is stored as JSON for simplicity and flexibility.

OG Image stores the file's filename_disk (<uuid>.<ext>). Both that and a bare UUID work with /assets/<value>, since the assets endpoint reads the first 36 characters as the file ID.

{
    "title": "This is the Directus SEO Plugin.",
    "meta_description": "A powerful SEO management extension that helps you optimize your content for search engines and social media sharing, right within Directus. It includes a comprehensive interface for managing metadata and a display component for monitoring SEO status.",
    "og_image": "f5d20d13-e86a-4aaa-ab1c-241925b89ea3.jpg",
    "focus_keyphrase": "Directus SEO",
    "additional_fields": {
        "canonical_url": "https://directus.io/",
        "custom_meta_tag": "This is a custom meta tag"
    },
    "sitemap": {
        "change_frequency": "monthly",
        "priority": "0.5"
    },
    "no_index": false,
    "no_follow": false
}

Usage

The SEO plugin consists of two components:

1. SEO Interface

The interface provides a comprehensive form, organized into tabs, for managing SEO metadata:

• Basic Tab:
  • Page Title field with character count and optimal length validation (45-60 characters)
  • Meta description with validation (130-160 characters)
  • Search result preview
  • Social media Open Graph (OG) image upload
  • Social media share previews (new!)
• Advanced Tab:
  • Search engine visibility controls (No Index, No Follow)
  • Sitemap configuration options
• Custom Fields Tab:
  • Support for adding custom SEO-related fields (e.g., canonical URL, custom meta tags)
• Keyphrase Tab (new!):
  • Input for the focus keyphrase
  • Detailed analysis of keyphrase usage in title, description, slug, and content
  • Feedback categorized into Problems, Improvements, and Good results

The Page Title and meta description fields show a progress bar to help you keep track of the character count and optimal length according to the SEO best practices.

To populate the title or meta description fields, with the template, use the Apply Template button to apply the template to the field.

2. SEO Display

A compact status indicator that shows:

• Overall SEO health status
• Quick overview of missing or invalid fields
• Search preview on hover (optional)
• Status of required and optional fields

Explanation of Icons:

• Green checkmark: All configured fields are valid.
• Yellow warning: Some of the configured fields are invalid.
• Red error: At least one required fields is missing (this includes additonal fields that are marked as required.)
• Gray eye with slash icon: No index field is enabled for this item hiding it from search engines

Configuration 🔧

To use the SEO plugin, add a new field to any (and all) collections you want to manage the SEO (for example posts, articles, or pages). The field type should be json. The recommended key for the field is simply seo but you can use any key you want.

Interface Options

• Type: json
• Group: standard
• Options: Configurable templates, OG image, sitemap settings, custom fields, and focus keyphrase settings (new!)

The interface can be configured with the following options:

1. Title Template

   • Configures the pattern for SEO titles so you can use fields from the item to generate the title
   • Supports dynamic field values using {{fieldName}} syntax

2. Description Template

   • Configures the pattern for meta descriptions so you can use fields from the item to generate the description
   • Supports dynamic field values using {{fieldName}} syntax

3. Social Media Image

   • Toggle to enable/disable the Open Graph image upload and social media previews.
   • Disabled by default

4. Focus Keyphrase

   • Toggle to enable/disable the Keyphrase analysis tab.
   • Disabled by default
   • Slug Field: Select the field in your collection that contains the URL slug for analysis.
   • Content Fields: Select one or more fields containing the main content for analysis (e.g., WYSIWYG, Markdown).

5. Search Engine Controls

   • Toggle to show/hide noindex/nofollow options in the Advanced tab.
   • Disabled by default

6. Sitemap Controls

   • Toggle to enable/disable sitemap configuration in the Advanced tab.
   • When enabled, includes:
     • Default change frequency (preset to 'weekly')
     • Default priority (preset to '0.5')
   • Defaults are saved with the item once the SEO field is edited. Items whose SEO field was never touched store null, so apply the same defaults in your frontend.
   • Disabled by default

7. Custom SEO Fields

   • Toggle to enable/disable the Custom Fields tab.
   • Disabled by default
   • Fields marked Required show an asterisk, an error icon on the Custom Fields tab while empty, and an error in the SEO display. They don't block saving, because the values live inside one JSON field. To enforce them, use a blocking Flow on items.create / items.update that checks seo.additional_fields.

Translated content

To keep SEO per language, add the SEO field to your translations collection (the one the Translations interface creates, e.g. articles_translations). Templates, the keyphrase analysis, and the slug check then use that language's fields.

To see SEO status per language in a list:

• Recommended: on the translations field, choose the core Translations display and add the SEO field to its template (e.g. {{seo}}). The cell shows the status for the default or user language, and hovering lists every language with its status.
• A translations.seo column also works. It shows one chip with the worst status across translations; hovering lists each translation's status. It can't show language names, because displays don't receive the language field for that column.

Translations

The interface and display follow each user's Directus language. Included: English, German, Spanish, French, Italian, Japanese, Korean, Dutch, Polish, Portuguese (Brazil), Vietnamese, and Chinese (Simplified). Regional variants like es-MX, fr-CA, and pt-PT use the closest one. To add or fix a language, edit or add a file in src/lang/ with the same keys as en-US.ts and register it in src/lang/index.ts. Missing keys fall back to English.

Display Options

• Type: json
• Icon: search
• Options: Search preview toggle

The display component can be configured with:

1. Show Search Preview
   • Toggle to enable/disable search result preview on hover
   • Shows how the page might appear in search results
   • Disabled by default

Installation

Install the extension from the Directus Marketplace. See the Official Guide for more information.

or if you prefer to install manually:

npm install @directus-labs/seo-plugin

Roadmap 🗺️

Planned:

• Support for translating the title and meta description fields
• Field label and description translations

Maybe:

• Add support for relational fields in the template

Contributing 🤝

Contributions are welcome! Please add an issue describing the feature you'd like to add before submitting a PR.