تگ canonical چیه و چطور ازش درست استفاده کنیم؟

اگه یه مدت تو کار سئو و طراحی سایت باشی، حتماً به یه مشکل عجیب برخوردی: گاهی یه صفحه از چند تا آدرس مختلف قابل‌بازه، ولی محتواش دقیقاً یکیه. از دید کاربر عادی این یه مشکل نیست، ولی از دید گوگل، این یعنی چند تا صفحه‌ی جدا و تکراری. تگ rel="canonical" دقیقاً برای حل همین مشکل ساخته شده. تو این مقاله می‌خوایم کامل و از پایه بریم سراغش.

محتوای تکراری (Duplicate Content) چیه و چرا مشکل‌سازه؟

فرض کن یه فروشگاه آنلاین داری و یه محصول خاص از چند آدرس مختلف در دسترسه:

https://example.com/clothes/shirts/
https://example.com/clothes/shirts/?size=XL
https://example.com/clothes/shirts/?size=XL&color=red
https://www.example.com/clothes/shirts/

برای کاربر همه‌ی این‌ها یه محصول هستن، فقط با یه فیلتر یا پارامتر اضافه. اما گوگل هر کدوم از این آدرس‌ها رو یه URL کاملاً مستقل می‌بینه. وقتی چند آدرس مختلف محتوای یکسان یا خیلی شبیه به هم رو نشون بدن، گوگل باید تصمیم بگیره کدومش رو تو نتایج جستجو نشون بده؛ چون همه‌شون رو با هم نشون نمی‌ده. این یعنی اعتبار سئو (که بهش لینک جویس یا Link Equity هم می‌گن) بین چند تا آدرس پخش می‌شه، به‌جای اینکه همه‌ش روی یه آدرس واحد جمع بشه. نتیجه‌ش این می‌شه که هیچ‌کدوم از این نسخه‌ها اون رتبه‌ای که لیاقتش رو دارن به دست نمیارن.

تگ canonical دقیقاً چیه؟

تگ canonical (یا rel=canonical) یه قطعه کد HTML کوچیکه که به موتورهای جستجو می‌گه از بین چند صفحه‌ی مشابه یا تکراری، کدومشون نسخه‌ی اصلی و رسمیه. با این تگ، به گوگل می‌گی که ترجیح می‌دی کدوم آدرس تو نتایج جستجو نمایش داده بشه.

شکل کلی این تگ تو head صفحه اینجوریه:

<link rel="canonical" href="https://example.com/clothes/shirts/">

وقتی این تگ رو تو head هر نسخه از صفحه (حتی خود نسخه‌ی اصلی) می‌ذاری، عملاً به گوگل می‌گی: «فارغ از اینکه این محتوا رو از کدوم آدرس دیدی، نسخه‌ی رسمی همینه که تو href نوشته شده». گوگل این پیام رو به‌عنوان یه سیگنال قوی در نظر می‌گیره و سعی می‌کنه تمام اعتبار سئو رو روی همون آدرس canonical متمرکز کنه.

یه نکته‌ی مهم: canonical فقط یه «سیگنال»ه، نه یه «دستور» قطعی

برخلاف تصور خیلی‌ها، تگ canonical یه دستور اجباری برای گوگل نیست، بلکه یه سیگنال قویه. یعنی اگه گوگل به هر دلیلی (مثلاً محتوای دو صفحه به اندازه‌ی کافی متفاوت باشه) تشخیص بده که باید صفحه‌ی دیگه‌ای رو به‌عنوان نسخه‌ی اصلی در نظر بگیره، ممکنه تگ canonical تو رو نادیده بگیره. برای همین خیلی مهمه که این تگ رو فقط روی صفحاتی بذاری که واقعاً محتوای یکسان یا خیلی نزدیک به هم دارن.

چرا canonical برای سئو این‌قدر مهمه؟

۱. جمع‌کردن اعتبار لینک (PageRank) روی یک آدرس

صفحات تکراری ممکنه از منابع مختلف (سایت‌های دیگه، شبکه‌های اجتماعی، فوروم‌ها) بک‌لینک بگیرن. این بک‌لینک‌ها عملاً بخشی از اعتبار سئو رو از نسخه‌ی اصلی صفحه می‌دزدن. با گذاشتن canonical روی نسخه‌های تکراری، این اعتبار دوباره روی یک آدرس واحد جمع می‌شه و رتبه‌ی اون صفحه تو گوگل بهتر می‌شه.

۲. کمک به مدیریت محتوای بازنشر شده (Syndicated Content)

خیلی وقت‌ها یه محتوا رو تو سایت‌های دیگه هم منتشر می‌کنن (مثلاً برای تبلیغات یا اطلاع‌رسانی بیشتر). تو این حالت گوگل باید تشخیص بده کدوم سایت منبع اصلیه و کدوم فقط داره بازنشرش می‌کنه. اگه سایت‌های دیگه تگ canonical رو به آدرس اصلی تو اشاره بدن، گوگل نسخه‌ی تو رو به‌عنوان منبع اصلی می‌شناسه.

۳. بهینه‌سازی کرال (Crawling)

گوگل برای هر سایت یه بودجه‌ی محدود برای خزیدن (crawl budget) در نظر می‌گیره. وقتی صفحات تکراری زیادی داشته باشی، بخشی از این بودجه صرف بررسی نسخه‌های تکراری می‌شه، به‌جای صفحات مهم‌تر. با مشخص‌کردن نسخه‌ی canonical، گوگل بیشتر وقتش رو صرف صفحاتی می‌کنه که واقعاً باید ایندکس و رتبه‌بندی بشن.

چطور تگ canonical رو پیاده‌سازی کنیم؟

روش ۱: اضافه‌کردن مستقیم به head

ساده‌ترین راه اینه که یه تگ <link> با ویژگی rel="canonical" تو بخش head سند HTML بذاری:

<html>
  <head>
    <link rel="canonical" href="https://example.com/blog/introduction-to-html5">
  </head>
  <body>
    <h1>آموزش مقدماتی HTML5</h1>
    <p>این یه نمونه از استفاده‌ی تگ canonical تو یه سند HTML ساده‌ست.</p>
  </body>
</html>

روش ۲: تنظیم داینامیک با جاوااسکریپت

تو اپلیکیشن‌های وب که محتوا بر اساس تعامل کاربر یا پارامترهای URL تغییر می‌کنه، می‌شه تگ canonical رو با جاوااسکریپت به‌صورت داینامیک ساخت و به head اضافه کرد:

var link = document.createElement('link');
link.rel = 'canonical';
link.href = 'https://example.com/preferred-page';
document.head.appendChild(link);

روش ۳: استفاده از افزونه‌های سئو

اگه از وردپرس استفاده می‌کنی، افزونه‌هایی مثل Yoast SEO یا All in One SEO این کار رو خیلی ساده می‌کنن؛ کافیه تو تنظیمات پیشرفته‌ی هر صفحه، آدرس canonical مدنظرت رو وارد کنی و افزونه خودش تگ رو به head اضافه می‌کنه.

روش ۴: استفاده از هدر HTTP (مخصوص فایل‌های غیر HTML)

برای فایل‌هایی مثل PDF که اصلاً بخش head ندارن، می‌شه canonical رو تو سطح هدر HTTP سرور تعریف کرد. این کار معمولاً تو فایل تنظیمات سرور (مثل .htaccess) انجام می‌شه:

Link: <https://example.com/documents/report.pdf>; rel="canonical"

روش ۵: فریمورک‌های مدرن مثل Next.js

تو فریمورک‌هایی مثل Next.js هم می‌شه با کامپوننت Head این تگ رو مدیریت کرد:

import Head from 'next/head';

function IndexPage() {
  return (
    <div>
      <Head>
        <title>نمونه‌ی تگ canonical</title>
        <link
          rel="canonical"
          href="https://example.com/blog/original-post"
          key="canonical"
        />
      </Head>
      <p>این محتوا از دو آدرس مختلف قابل‌دسترسیه.</p>
    </div>
  );
}

export default IndexPage;

چند سناریوی رایج که به canonical نیاز داره

۱. تفاوت www و بدون www

<!-- تو https://www.example.com -->
<link rel="canonical" href="https://example.com">

خیلی از سایت‌ها هم با www و هم بدون www در دسترسن. یکی رو به‌عنوان نسخه‌ی اصلی انتخاب کن و بقیه رو بهش canonical کن.

۲. پارامترهای ردیابی یا فیلتر تو URL

<!-- تو https://example.com/shoes?utm_source=instagram -->
<link rel="canonical" href="https://example.com/shoes">

وقتی یه کاربر از طریق یه کمپین تبلیغاتی وارد سایت می‌شه، معمولاً ابزارهای مارکتینگ یه پارامتر ردیابی (مثل utm_source) به آدرس اضافه می‌کنن. محتوای صفحه همون محتوای اصلیه، فقط یه پارامتر اضافه شده؛ پس canonical باید به نسخه‌ی بدون پارامتر اشاره کنه.

۳. صفحات با و بدون اسلش انتهایی

<!-- تو https://example.com/shoes/ -->
<link rel="canonical" href="https://example.com/shoes">

۴. محصولات مشابه با تنوع رنگ یا سایز

<!-- تو https://example.com/shoes-red -->
<link rel="canonical" href="https://example.com/shoes">

اگه فروشگاهی برای هر رنگ یا سایز یه آدرس جدا بسازه ولی توضیحات محصول تقریباً یکسان باشه، می‌شه همه‌شون رو به آدرس اصلی محصول canonical کرد.

۵. canonical بین چند دامنه

تگ canonical محدود به داخل یه دامنه نیست؛ می‌شه از یه دامنه به دامنه‌ی کاملاً دیگه‌ای هم اشاره کرد. این سناریو بیشتر تو سایت‌های خبری یا رسانه‌هایی به‌کار میاد که یه محتوای واحد رو تو چند تا پلتفرم مختلف منتشر می‌کنن ولی فقط می‌خوان یکیشون تو نتایج گوگل رتبه بگیره.

بهترین روش‌ها (Best Practices)

  • خودارجاعی (Self-referencing canonical): حتی صفحه‌ی اصلی هم بهتره یه تگ canonical داشته باشه که به خودش اشاره کنه. این کار به گوگل خیلی واضح نشون می‌ده که این آدرس همون نسخه‌ی رسمیه.
  • استفاده از آدرس مطلق (Absolute URL): همیشه آدرس کامل رو با https، دامنه و مسیر کامل تو canonical بذار، نه آدرس نسبی (relative). آدرس نسبی ممکنه اشتباه تفسیر بشه یا اصلاً نادیده گرفته بشه.
  • حروف کوچک تو URL: گوگل نسبت به حروف بزرگ و کوچک تو آدرس حساسه؛ سعی کن همیشه از حروف کوچک تو URL و canonical استفاده کنی تا مشکل تکراری‌شدن پیش نیاد.
  • مطمئن شو آدرس canonical در دسترسه: هیچ‌وقت به آدرسی canonical نده که خودش ریدایرکت می‌شه، خطای ۴۰۴ می‌ده یا تو robots.txt بلاک شده.
  • سازگاری با sitemap: بهتره آدرس‌هایی که تو نقشه‌ی سایت (XML sitemap) معرفی می‌کنی، همون آدرس‌های canonical باشن.

اشتباهات رایجی که باید ازشون دوری کنی

  • چند تگ canonical روی یه صفحه: اگه یه صفحه بیشتر از یه تگ canonical داشته باشه، گوگل معمولاً همه‌شون رو نادیده می‌گیره و کل کارت بی‌فایده می‌شه.
  • canonical روی صفحاتی که واقعاً شبیه هم نیستن: اگه محتوای دو صفحه به اندازه‌ی کافی متفاوت باشه، گذاشتن canonical بینشون گیج‌کننده‌ست و گوگل به احتمال زیاد نادیده‌ش می‌گیره.
  • اشتباه تو صفحات صفحه‌بندی‌شده (Pagination): تو صفحاتی مثل کامنت‌ها یا لیست محصولات که به چند صفحه تقسیم شدن (صفحه ۱، ۲، ۳...)، نباید همه‌ی صفحات رو canonical به صفحه‌ی اول بدی؛ هر صفحه باید خودارجاع (self-referencing) باشه، چون محتوای هرکدوم فرق داره.
  • بلاک‌کردن آدرس canonical تو robots.txt: اگه آدرسی که تو تگ canonical معرفی کردی تو robots.txt بلاک شده باشه، گوگل اصلاً نمی‌تونه بهش دسترسی پیدا کنه و کل هدف از canonical از بین می‌ره.
  • گذاشتن canonical تو body به‌جای head: این تگ فقط وقتی معتبره که داخل بخش head سند باشه؛ اگه جای دیگه‌ای بذاریش، گوگل کلاً نادیده‌ش می‌گیره.
  • ساختن زنجیره‌ی canonical (Canonical Chain): یعنی صفحه‌ی A به B اشاره کنه و صفحه‌ی B هم به C. این کار سیگنال مبهمی به گوگل می‌ده؛ بهتره همه‌ی صفحات مستقیم به همون آدرس نهایی (C) اشاره کنن.

تفاوت canonical با ریدایرکت (Redirect)

ممکنه بپرسی چرا به‌جای canonical مستقیم یه ریدایرکت نمی‌زنیم؟ فرقشون تو این چند نکته‌ست:

  • ریدایرکت کاربر رو واقعاً به آدرس دیگه‌ای منتقل می‌کنه؛ آدرس URL تو مرورگر عوض می‌شه.
  • canonical فقط یه پیام برای موتور جستجوئه؛ کاربر همچنان می‌تونه از همون آدرس اولیه بازدید کنه و صفحه دقیقاً همونجا باز می‌مونه.

برای مواردی که می‌خوای کاربر همچنان از یه آدرس خاص (مثلاً برای دیدن یه رنگ خاص از محصول) استفاده کنه، canonical گزینه‌ی مناسب‌تریه. اما برای آدرس‌هایی که کاملاً منسوخ شدن و باید همیشه به آدرس جدید هدایت بشن، ریدایرکت ۳۰۱ (که تو سطح سرور تنظیم می‌شه) انتخاب درست‌تریه.

چطور تگ canonical یه صفحه رو چک کنیم؟

روش دستی

ساده‌ترین راه اینه که رو صفحه راست‌کلیک کنی، گزینه‌ی «View page source» رو بزنی (یا میان‌بر Ctrl+U)، بعد با Ctrl+F کلمه‌ی canonical رو جستجو کنی.

گوگل سرچ کنسول

تو ابزار URL Inspection گوگل سرچ کنسول می‌تونی آدرس هر صفحه رو وارد کنی و ببینی گوگل کدوم آدرس رو به‌عنوان نسخه‌ی canonical شناخته. همچنین تو بخش Indexing، گزینه‌ی «Duplicate without user-selected canonical» به‌طور مشخص صفحاتی که canonical مشخصی ندارن رو نشونت می‌ده.

ابزارهای سئو

خیلی از افزونه‌ها و اکستنشن‌های مرورگر سئو (مثل Mangools SEO extension یا ابزارهای مشابه) می‌تونن تو چند ثانیه بهت بگن آدرس canonical هر صفحه چیه و آیا خالیه یا نه.

یه مثال کامل ترکیبی

<head>
  <meta charset="UTF-8">
  <title>آموزش مقدماتی HTML5</title>
  <meta name="description" content="آشنایی با مبانی HTML5 برای مبتدیان">
  <link rel="canonical" href="https://greendata.ir/blog/introduction-to-html5">
</head>

تو این مثال، حتی اگه این صفحه از آدرس‌های دیگه‌ای (مثلاً با پارامترهای ردیابی یا با/بدون www) هم قابل‌دسترسی باشه، گوگل همیشه می‌دونه نسخه‌ی رسمی این محتوا دقیقاً همین آدرسه.

نکته‌ی سئو

استفاده‌ی درست از canonical یکی از پایه‌ای‌ترین تکنیک‌های سئوی فنیه که مستقیماً از هدررفتن اعتبار سئو بین چند نسخه از یک محتوا جلوگیری می‌کنه و کمک می‌کنه تمام سیگنال‌های مثبت (مثل بک‌لینک‌ها) روی یک آدرس واحد متمرکز بشن.

نکته‌ی دسترسی‌پذیری

تگ canonical مستقیماً روی دسترسی‌پذیری صفحه برای صفحه‌خوان‌ها تأثیری نداره، چون این تگ صرفاً برای ارتباط با موتورهای جستجو طراحی شده، نه برای تجربه‌ی مستقیم کاربر.

جمع‌بندی

تگ link rel="canonical" مشخص می‌کنه کدوم نسخه از یک محتوا (در میان چند آدرس URL مشابه) باید به‌عنوان نسخه‌ی رسمی توسط گوگل در نظر گرفته بشه، و از پخش‌شدن اعتبار سئو بین نسخه‌های تکراری جلوگیری می‌کنه. این تگ با ریدایرکت فرق داره، چون کاربر رو جابه‌جا نمی‌کنه و فقط یه پیام برای موتورهای جستجوئه. اگه سایتت چند نسخه از یه محتوا داره (با/بدون www، با/بدون پارامتر، با/بدون اسلش انتهایی)، حتماً یه استراتژی canonical واضح براش تعریف کن.

منابع