feat(meta): add self-referential canonical link

[machikoyasuda]

closes #265

What this PR does

• Add <link rel="canonical" href="{{ page.url | absolute_url }}" /> set to the absolute URL

Why

Asking social media companies to recognize these calitp.org links!

• https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls#rel-canonical-link-method
• https://yoast.com/rel-canonical/

Should a page have a self-referencing canonical URL?

In the image above, we link the non-canonical page to the canonical version. But should a page set a rel=canonical for itself? This question is a much-debated topic amongst SEOs. At Yoast, we strongly recommend having a canonical link element on every page, and Google has confirmed that’s best. That’s because most CMSs will allow URL parameters without changing the content. So all of these URLs would show the same content:

https://example.com/wordpress/seo-plugin/
https://example.com/wordpress/seo-plugin/?isnt=it-awesome
https://example.com/wordpress/seo-plugin/?cmpgn=twitter
https://example.com/wordpress/seo-plugin/?cmpgn=facebook

The issue is that if you don’t have a self-referencing canonical on the page that points to the cleanest version of the URL, you risk being hit by this. And if you don’t do it yourself, someone else could do it to you and cause a duplicate content issue. So adding a self-referencing canonical to URLs across your site is a good “defensive” SEO move. Luckily, our Yoast SEO plugin takes care of this for you.

rel=canonical and social networks

Facebook and Twitter honor rel=canonical too, and this might lead to weird situations. If you share a URL on Facebook with a canonical pointing elsewhere, Facebook will share the details from the canonical URL. In fact, if you add a ‘like’ button on a page that has a canonical pointing elsewhere, it will show the like count for the canonical URL, not for the current URL. Twitter works in the same way. So be aware of this when sharing URLs or when using these buttons.

☝️ My hypothesis is that this is what's happening to calitp.org/* links right now, based on what I've seen on the LinkedIn and Facebook link validators, showing the canonical url as calitp.org, instead of the full link.

---

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	c15317d
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-website/deploys/64e7ac749d4d9d0008d74fe8
😎 Deploy Preview	https://deploy-preview-257--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.