Add canonical tag to all blog posts

[mstenta]

Blog followup (after #49 is merged) that came up on the monthly call today.

The canonical tag is added to posts that define canonical in front matter, but not to other posts. We should add canonical to all posts to avoid potential SEO issues (eg: if trailing slash is ommitted, or http vs https).

[jgaehring]

I almost forgot and had to check, but this is at implemented and ready to go whenever we merge, since these 3 commits:

jgaehring/farmOS.org@80647e8...jgaehring:farmOS.org:171f9d52c6a656eeb6288949c98da8cdb7b18905

Perhaps it would be best to setup a review process in the source repository for the blog, rather than here, so the convention is observed? Or were you suggesting we just do this for all blog posts, regardless?

[mstenta]

Oh sorry jotted this issue down quick while we were on the monthly call and meant to follow up with more detail.

Or were you suggesting we just do this for all blog posts, regardless?

^ This is what we talked about on the call.

It would be good to add canonical tag to all blog posts. At least that's my (maybe outdated) SEO understanding of best practice.

I think this is a minor issue in our case, so maybe not something we need to worry about right away. The idea is (or was) that Google can punish you if the same content is available on both http and https, or if it's accessible under multiple paths (including w/ and w/o trailing slash) - neither of which affect us, it seems.

[jgaehring]

Ok, yea, I would just add a default in the BlogTemplate component:

farmOS.org/src/templates/blog.js

Lines 32 to 35 in 1e71305

	export default function BlogTemplate({ data }) {
	const classes = useStyles();
	const { markdownRemark: { frontmatter = {}, headings, html: initHtml } } = data;
	const { canonical, date } = frontmatter;

This component's "props" (aka, the function argument's properties, like data in this component) also has a location prop provided by Gatsby. The Gatsby docs actually provides a fairly relevant example for using this prop to provide the canonical URL:

const Page = ({ location, data }) => {
  const canonicalUrl = data.site.siteMetadata.siteURL + location.pathname

  return <div>The URL of this page is {canonicalUrl}</div>
}

In our case, the siteURL is structured slightly differently, but the concept is the same. Then the canonical link just gets passed into the SEO just the same as it is already:

farmOS.org/src/templates/blog.js

Line 56 in 1e71305

<Seo title={title} canonical={canonical}/>

So yea, pretty straightforward, just a matter of how we want to format it and set up the defaults once we're ready.