Schema.org Metatag Preview

The Schema Metatag Preview module provides content editors, marketers, and SEO specialists with an instant, interactive Google search result and rich snippet preview directly inside Drupal's entity management interface.

Instead of publishing changes blindly or copying data into external testing tools, site editors can click the Search Preview tab on any node or commerce product to see exactly how their page, metadata, and Schema.org JSON-LD structured data will look in Google Search. The module also features an in-context auditing engine that checks for missing titles, snippet length limits, indexing directives, and schema eligibility rules according to official Google Search Central guidelines.

Features

• Live Google SERP Simulation: Renders authentic desktop and mobile search snippet cards showing favicon, brand/site title, breadcrumb paths, clickable title links, and meta descriptions.
• Rich Snippet Cards via Submodules:
  • Google Product Snippets (schema_product_preview): Displays formatted price ranges, live stock status indicators (In Stock, Out of Stock, PreOrder), merchant perks, side image thumbnails, and exact fractional star ratings rendered via SVG/CSS masking (e.g., 4.8 out of 5 stars).
• Real-Time Search Central Auditing: An integrated rule engine evaluates rendered metadata on the fly:
  • Flags missing or overly long titles (>60 characters) and meta descriptions (>160 characters).
  • Alerts editors if noindex robots directives are blocking search engine indexing.
  • Validates required structured data properties (such as offers, aggregateRating, and review for products).
  • Provides direct documentation links to Google Search Central documentation for every flagged item.
• Decoupled & Headless Friendly: Ships with a PublicUrlResolver plugin architecture that maps internal Drupal routing to canonical frontend domain URLs (Next.js, Nuxt, Remix, Astro) so search previews always reflect production web addresses.
• Modern Drupal 11 Architecture: Uses PHP 8 Attributes (#[SearchAppearance] and #[PublicUrlResolver]), Symfony autowiring, zero external runtime JS dependencies, and full container dependency injection.

Post-Installation

1. Enable the Module: Enable schema_metatag_preview and any desired submodules like schema_product_preview via Drush (drush pm:enable schema_metatag_preview schema_product_preview) or the Extend page.
2. Configure Entity Types: Navigate to Configuration > Search and metadata > Schema Metatag Preview Settings (/admin/config/search/schema-preview). Select which entity types and bundles should display the preview tab (e.g., Article, Basic Page, Product).
3. Select URL Resolver: Choose the default canonical resolver for standard Drupal monoliths, or select a custom resolver plugin if your site powers a headless frontend.
4. Set Permissions: Grant "View search preview tab" to editors, marketers, and SEO managers who should have access to the preview tab.
5. Preview Content: View any configured entity (such as a node or product) and click the Search Preview tab located alongside View and Edit.

Additional Requirements

• Drupal Core: ^10.4 || ^11.0
• PHP: >= 8.2 (PHP intl extension recommended for localized currency formatting)
• Metatag: ^2.0
• Schema.org Metatag: ^3.0

Recommended modules/libraries

• Token: Highly recommended to provide token browsing and replacement inside metatags and structured data.
• Drupal Commerce (Commerce Price): If using schema_product_preview, Commerce Price automatically provides localized ISO 4217 multi-currency formatting for product offers and price ranges.

Similar projects

• Real-time SEO for Drupal (Yoast SEO): Focuses primarily on content readability and keyword optimization via external JavaScript. In contrast, Schema Metatag Preview runs natively within Drupal's backend, renders authentic Schema.org JSON-LD structured data, supports rich result cards (such as Product Snippets with ratings and price ranges), and does not require third-party analytical APIs.
• Schema.org Metatag: Generates JSON-LD tags into the HTML <head>. Schema Metatag Preview is designed to be the companion visual preview and validation layer on top of `schema_metatag`.
• Metatag Google CSE: Provides metadata formatting for Google Custom Search Engine indexing rather than interactive SERP previews or Rich Snippet validation.

Supporting this Module

You can support this module by reporting bugs, suggesting new search appearance types, reviewing merge requests, and contributing plugins on the Drupal.org issue queue.

Community Documentation

• Project README: Check the comprehensive README.md in the repository for developer instructions on writing custom #[SearchAppearance] plugins and altering card presentation data via hooks.
• Google Search Central Documentation: For details on Google's rich result requirements, refer to Google Product Snippet Structured Data and Google Title Links.