A Volto addon for managing Google Rich Results (structured data / schema.org JSON-LD) in Plone 6.
This addon provides a comprehensive solution for adding and managing structured data on your Plone/Volto site, improving SEO and enabling rich search result features in Google and other search engines.
- Custom widget for editing Rich Results directly in content
- Schema-driven form editing with validation
- Multiple Rich Result types out of the box
- Automatic default value population from content fields
- JSON-LD output rendered in page
<head>for SEO - Control panel for configuring available types per content type
- Google Rich Results Test integration for validation
- REST API endpoint for fetching configuration
| Type | Description |
|---|---|
| Article | Blog posts, news stories, articles |
| NewsArticle | News-specific article markup |
| Event | Events with dates, locations, performers |
| FAQPage | Frequently asked questions |
| HowTo | Step-by-step instructions |
| JobPosting | Job listings with salary, requirements |
| Organization | Company/organization information |
| Person | Individual person details |
| WebPage | Generic web page markup |
| Dataset | Scientific/research datasets |
| ResearchProject | Research project information |
- Plone 6.0+
- Volto 18.0+
- Backend addon:
interaktiv.voltorichresults
- Add
interaktiv.voltorichresultsto your backend:
# requirements.txt or pip
interaktiv.voltorichresults-
Install the addon in your Plone site via the Add-ons control panel
-
The
IRichResultsbehavior will be available for your content types
- Add the package to your Volto project:
pnpm add @interaktiv/volto-richresults- Add to your
volto.config.js:
const addons = ['@interaktiv/volto-richresults'];
module.exports = {
addons,
};- Add the behavior to content types in the backend (e.g., via GenericSetup):
<!-- profiles/default/types/Document.xml -->
<property name="behaviors" purge="false">
<element value="interaktiv.voltorichresults.behaviors.richresults.IRichResults"/>
</property>- Edit a content item that has the Rich Results behavior
- Find the "Rich Results" field in the edit form
- Click "Add Rich Result" and select a type
- Fill in the form fields (many are pre-populated from content)
- Save the content
The JSON-LD structured data is automatically rendered in the page <head>.
Administrators can configure which Rich Result types are available for each content type:
- Go to Site Setup > Rich Results Settings
- Add content types and select which Rich Result types should be available
- Save
Each Rich Result entry includes a "Test with Google" button that opens Google's Rich Results Test tool with your structured data pre-filled.
You can register additional Rich Result types in your addon:
// In your addon's index.ts
import type { ConfigType } from '@plone/registry';
const applyConfig = (config: ConfigType) => {
config.settings.richresults = {
...config.settings.richresults,
types: {
...config.settings.richresults?.types,
MyCustomType: {
id: 'MyCustomType',
title: 'My Custom Type',
schema: myCustomSchema,
getDefaults: (content) => ({
'@context': 'https://schema.org',
'@type': 'MyCustomType',
// ... default values
}),
toJsonLd: (formData, content) => ({
// ... transform form data to JSON-LD
}),
},
},
};
return config;
};
export default applyConfig;src/
├── index.ts # Addon configuration
├── registry.ts # Rich Result type registry
├── actions/ # Redux actions
├── reducers/ # Redux reducers
├── components/
│ ├── RichResultsWidget.tsx # Main widget component
│ ├── RichResultEditModal.tsx # Edit modal
│ ├── RichResultsHead.tsx # JSON-LD head renderer
│ ├── RichResultsAppExtra.tsx # App extra component
│ └── ...
├── types/ # Rich Result type definitions
│ ├── Article.ts
│ ├── Event.ts
│ └── ...
├── blocks/ # Optional block implementation
└── helpers/ # Utility functions
pnpm testpnpm buildGPL version 2
Contributions are welcome! Please open an issue or submit a pull request.
- interaktiv.voltorichresults - Backend addon for Plone
- Google Rich Results Documentation
- Schema.org