Canonical URL Troubleshooting

Using Azure Static Web Apps, I encountered several issues related to canonical URLs. Specifically:

• URL variations for the same content, such as `/projectmechanics`, `/projectmechanics/`, and `/projectmechanics/index.html`.
• Multiple methods to configure canonical URLs led to varying levels of success, complicating SEO optimization.
• The lack of server-side components in static web apps makes traditional enforcement of URL structures more difficult.

Adding Canonical Tags

I added a canonical link in the header of the page to indicate the preferred URL. This helped search engines understand the canonical URL but didn’t resolve the multiple accessible URL variants. While this was a good start, it didn’t fully address the issue, as the same content was reachable through different URLs.

link(rel='canonical', href='https://markhazleton.com/projectmechanics/')

Using `staticwebapp.config.json` for Redirects

In Azure Static Web Apps, I set up custom redirects using the `staticwebapp.config.json` file to force non-canonical URLs to redirect to the preferred version. This is managed in my GitHub repository and deployed automatically to Azure Static Web Apps.

{
  "routes": [
    {
      "route": "/projectmechanics/index.html",
      "redirect": "/projectmechanics/",
      "statusCode": 301
    },
    {
      "route": "/projectmechanics",
      "redirect": "/projectmechanics/",
      "statusCode": 301
    }
  ]
}

Unfortunately, this method caused issues with my GitHub build and deploy action. In addtion, it didn't solve the root problem. So rather than spend time troubleshooting the GitHub action, I moved on to other solutions.

I host my DNS for MarkHazleton.com on Cloudflare, so I decided to leverage Cloudflare’s URL redirection capabilities. This was the most effective solution.

Setting Up Page Rules

The most effective solution was to configure Cloudflare Page Rules to handle URL redirection. Here’s how I set it up:

• Redirect `/projectmechanics` and `/projectmechanics/index.html` to `/projectmechanics/`.
• Enforce a 301 Permanent Redirect so search engines recognize the canonical URL.

This approach worked well by efficiently handling all variations of the URL. Cloudflare’s flexibility in matching different URL patterns provided a more seamless experience for both users and search engines.

For more information on setting up Cloudflare Url Forwarding Rules, refer to the Cloudflare URL Forwarding documentation.

While adding canonical tags and using Azure Static Web Apps can help with SEO, Cloudflare Page Rules proved to be the most robust solution for handling canonical URLs and mitigating duplicate content issues. This combination ensures a smooth, SEO-friendly static web app without URL conflicts.