To increase the reach of my content, I decided to cross-post my articles on my blog at bryanprim.us. These are the platforms I use to cross-post my content:
Today I learned that:
I Need to Set Canonical URLs
I need to set canonical URLs for my articles on my cross-post platforms—in this case, dev.to and Hashnode.
A canonical URL is an HTML link element <link rel="canonical" href="URL"> used to indicate the preferred version of a webpage when there are multiple URLs with similar or duplicate content. This tells search engines which URL to consider the “authoritative” version, helping avoid issues with duplicate content that can impact SEO.
Basically, I need to use canonical URLs to consolidate page ranking and improve search engine indexing by pointing to a single, consistent URL: the original source of the content, which is my website bryanprim.us.
For example: the original post is at bryanprim.us/blogs/using-ssh-to-connect-local-git-to-remote-repositories.
In Hashnode and dev.to, i have to add this HTML tag in the <head> section of the page:
<head>
<link
rel="canonical"
href="https://bryanprim.us/blogs/using-ssh-to-connect-local-git-to-remote-repositories"
/>
</head>
Additionally, if you deploy your site to two different domains, you need to add the canonical URL to your main site as well to indicate the domain that you want to prioritize for search engine indexing.
Example with astro:
Add your site url to astro config file
// astro.config.mjs
// @ts-check
import { defineConfig } from "astro/config";
// https://astro.build/config
export default defineConfig({
site: "https://bryanprim.us",
});
Construct and add the canonical URL to your <head> tag in your layout file:
---
// BaseLayout.astro
// Example: Construct a canonical URL using your production domain configured in astro.config.mjs `site` property
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<head>
<link rel="canonical" href={canonicalURL} />
</head>