Canonical URL Troubleshooting

Managing Canonical URLs in Static Web Apps for SEO Optimization

When deploying static web apps, ensuring proper canonicalization is critical for SEO. Multiple URLs serving the same content can lead to search engines penalizing your site for duplicate content. This is my journey into canonical URL management for Azure Static Web Apps and Cloudflare, including what worked best based on practical experience on MarkHazleton.com

Challenges in Static Web Apps

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.

What I Tried

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.

What Worked: Cloudflare Page Rules

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.

Conclusion

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.