feat(#86): make canonical URL trailing slash optional

TiagoDanin · Nov 14, 2020 · 7859914 · 7859914
1 parent e4b6aa1
commit 7859914
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 7 deletions.
diff --git a/docs.md b/docs.md
@@ -13,7 +13,9 @@
 		name: '<name of site>',
 		title: '<title default>',
 		templateTitle: '%name% - %title%',
-		description: '<description default>'
+		description: '<description default>',
+		canonical: 'auto',
+		isForcedTrailingSlash: false
 		//...
 	}
 }
@@ -54,10 +56,15 @@
 - Type: String
 
 #### `canonical`
-The `auto` this will automatically generate according to the route, or put the route manually.
+The `auto` this will automatically generate according to the route, or put the route manually
 - Default: `auto`
 - Type: String
 
+### `isForcedTrailingSlash`
+Canonical force URL end with trailing slash
+- Default: `true`
+- Type: Boolean
+
 #### `image`
 - Default: `false`
 - Type: URL String

diff --git a/example/pages/about.vue b/example/pages/about.vue
@@ -9,6 +9,7 @@
 			<li><nuxt-link to="/">Index</nuxt-link></li>
 			<li><nuxt-link to="/news">News</nuxt-link></li>
 			<li><nuxt-link to="/news?query=true">News with query</nuxt-link></li>
+			<li><nuxt-link to="/login?query=true">Login with query and canonical with trailing slash forced</nuxt-link></li>
 			<li><nuxt-link to="/about">About</nuxt-link></li>
 		</ul>
 	</div>

diff --git a/example/pages/index.vue b/example/pages/index.vue
@@ -8,6 +8,7 @@
 			<li><nuxt-link to="/">Index</nuxt-link></li>
 			<li><nuxt-link to="/news">News</nuxt-link></li>
 			<li><nuxt-link to="/news?query=true">News with query</nuxt-link></li>
+			<li><nuxt-link to="/login?query=true">Login with query and canonical with trailing slash forced</nuxt-link></li>
 			<li><nuxt-link to="/about">About</nuxt-link></li>
 		</ul>
 	</div>

diff --git a/example/pages/login.vue b/example/pages/login.vue
@@ -0,0 +1,30 @@
+<template>
+	<div>
+		<h1>Your user!</h1>
+		<p>User: Tiago Danin.</p>
+		<br>
+		<p>Links:</p>
+		<ul>
+			<li><nuxt-link to="/">Index</nuxt-link></li>
+			<li><nuxt-link to="/news">News</nuxt-link></li>
+			<li><nuxt-link to="/news?query=true">News with query</nuxt-link></li>
+			<li><nuxt-link to="/login?query=true">Login with query and canonical with trailing slash forced</nuxt-link></li>
+			<li><nuxt-link to="/about">About</nuxt-link></li>
+		</ul>
+	</div>
+</template>
+
+<script>
+	export default {
+		head: function() {
+			return this.$seo({
+				title: 'Nuxt is the best',
+				description: 'Tiago Danin User',
+				isForcedTrailingSlash: true,
+				openGraph: {
+					title: 'openGraph title'
+				}
+			})
+		}
+	}
+</script>
diff --git a/example/pages/news.vue b/example/pages/news.vue
@@ -10,6 +10,7 @@
 			<li><nuxt-link to="/">Index</nuxt-link></li>
 			<li><nuxt-link to="/news">News</nuxt-link></li>
 			<li><nuxt-link to="/news?query=true">News with query</nuxt-link></li>
+			<li><nuxt-link to="/login?query=true">Login with query and canonical with trailing slash forced</nuxt-link></li>
 			<li><nuxt-link to="/about">About</nuxt-link></li>
 		</ul>
 	</div>

diff --git a/lib/module.js b/lib/module.js
@@ -13,7 +13,8 @@ const defaults = {
 	title: 'Title',
 	name: false,
 	description: false,
-	canonical: 'auto'
+	canonical: 'auto',
+	isForcedTrailingSlash: false
 }
 
 const allMetas = {
@@ -258,7 +259,10 @@ const createCanonical = (options, path) => {
 		canonicalUrl = options.canonical.startsWith('http') ? options.canonical : canonicalUrl + options.canonical
 	}
 
-	canonicalUrl = canonicalUrl.replace(/\/$/, '') + '/' // Force end /
+	if (options.isForcedTrailingSlash) {
+		canonicalUrl = canonicalUrl.replace(/\/$/, '') + '/' // Force end /
+	}
+
 	return [
 		{rel: 'canonical', href: canonicalUrl}
 	]

diff --git a/test/nuxt.js b/test/nuxt.js
@@ -47,10 +47,15 @@ test('Route /news and render HTML', async t => {
 	t.true(html.includes('<meta data-n-head="ssr" data-hid="og:title" key="og:title" property="og:title" name="og:title" content="openGraph title">'))
 	t.true(html.includes('<meta data-n-head="ssr" data-hid="og:description" key="og:description" property="og:description" name="og:description" content="Hello World page in blog">'))
 	t.true(html.includes('<meta data-n-head="ssr" data-hid="og:locale" key="og:locale" property="og:locale" name="og:locale" content="en">'))
-	t.true(html.includes('<link data-n-head="ssr" rel="canonical" href="http://localhost:4000/news/">'))
+	t.true(html.includes('<link data-n-head="ssr" rel="canonical" href="http://localhost:4000/news">'))
 })
 
-test('Route /news?query=test and render HTML', async t => {
+test('Route /news?query=test and render canonical', async t => {
 	const html = await get('/news?query=test')
-	t.true(html.includes('<link data-n-head="ssr" rel="canonical" href="http://localhost:4000/news/">'))
+	t.true(html.includes('<link data-n-head="ssr" rel="canonical" href="http://localhost:4000/news">'))
+})
+
+test('Route /news?query=test and render canonical with trailing slash', async t => {
+	const html = await get('/login?query=test')
+	t.true(html.includes('<link data-n-head="ssr" rel="canonical" href="http://localhost:4000/login/">'))
 })