feat(core): canonical plugin

[harlan-zw]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Google requires your canonical URLs to use absolute paths. Facebook and Twitter will ignore images without a full URL. This plugin fixes both problems automatically
when you provide a relative path.

The plugin converts relative paths to absolute URLs in these tags:

• og:image and twitter:image meta tags
• og:url meta tag
• rel="canonical" link tag

For example:

<!-- Before -->
<meta property="og:image" content="/images/hero.jpg">

<!-- After -->
<meta property="og:image" content="https://mysite.com/images/hero.jpg">

Setup

You should install the plugin in both your server & client entries.

import { CanonicalPlugin } from 'unhead/plugins'

const head = createHead({
  plugins: [
    CanonicalPlugin({
      canonicalHost: 'https://mysite.com/'
    })
  ]
})

[github-actions]

Bundle Size Analysis

File	Size	Gzipped Size	Size Diff	Gzipped Size Diff
Client	12.5 kB (12834 B)	5 kB (5157 B)	0.00% (0 B)	0.00% ( 0 B)
Server	9.9 kB (10111 B)	4 kB (4072 B)	0.00% (0 B)	0.00% ( 0 B)