scully-plugin-canonical

Scully Canonical Plugin

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.

Features

• ✅ 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

Table of Contents

• Installation
• Usage
• FAQ

Installation

NPM

npm install scully-plugin-canonical --save-dev

Yarn

yarn add scully-plugin-canonical --dev

Usage

Render plugins get access to information about the route, and the plugin looks for the title in the following locations in order:

• route.canonical
• route.data.canonical
• route.canonicalUrl
• route.data.canonicalUrl
• route.canonical_url
• route.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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Logo Attribution

Logo made by Darius Dan from www.flaticon.com