Why Frontend Share Links Break and How Canonical URLs Fix It
Share bugs are often routing bugs in disguise. The same content ends up with multiple URLs, and crawlers index the wrong one.
Step 1: Generate canonical URL from route params
function canonicalPath(slug: string) {
return `/tutorial/${slug}`;
}
Step 2: Render canonical and OpenGraph tags consistently
<link rel="canonical" href="https://learn-it-free.com/tutorial/sync-locks" />
<meta property="og:url" content="https://learn-it-free.com/tutorial/sync-locks" />
Step 3: Redirect duplicate patterns server-side
rewrite ^/post/(.*)$ /tutorial/$1 permanent;
Pitfalls
- Client-only redirects without canonical metadata.
- Slug changes with no redirect history.
- OpenGraph URL drifting from canonical URL.
Validation
- Every article has one canonical public URL.
- Old URL formats redirect permanently.
- Social previews resolve to canonical links.