The purpose of the Scully canonical plugin is to take a canonical link attribute from a route and replace the value of the canonical link in the head of a page, or add the link tag if it doesn't exist. This is needed for SEO purposes, if a given article was first published on another site, for example.
- ✅ Replaces the canonical link with the provided URL for the link tag
- ✅ Adds a canonical link tag if one doesn't exist for a page
npm install scully-plugin-canonical --save-dev
yarn add scully-plugin-canonical --dev
Render plugins get access to information about the route, and the plugin looks for the title in the following locations in order:
route.canonicalroute.data.canonicalroute.canonicalUrlroute.data.canonicalUrlroute.canonical_urlroute.data.canonical_url
If the canonical url is set in the frontmatter of a markdown file, the attribute shows up on
route.data.
To use this plugin, you need to just require the package inside the Scully config.ts for your project, i.e. scully.your-project-name.config.ts. After requiring the plugin, add it to the defaultPostRenderers array for the site:
// scully.your-project-name.config.ts
require('scully-plugin-canonical');
export const config: ScullyConfig = {
projectRoot: './src',
projectName: 'your-project-name',
outDir: './dist/static',
routes: {},
defaultPostRenderers: ['setCanonicalLinkPlugin'],
};If you only want it to be added to some routes, add it like this:
// scully.your-project-name.config.ts
require('scully-plugin-canonical');
export const config: ScullyConfig = {
...
routes: {
'/blog/:slug': {
type: 'contentFolder',
slug: {
folder: './blog'
},
postRenderers: ['setCanonicalLinkPlugin']
}
}
...
};That's all it takes for the plugin to be included and run on the pages in your app.
Thanks goes to these wonderful people (emoji key):
 Preston Lamb 💻 📖 |
 Duncan 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!