شرکت طراحی سایت وب سازان مرصاد

بررسی برچسب‌های Hreflang و نحوه استفاده صحیح از آن‌ها
همه تصور کنید که مشکلاتی با وب‌سایت خود دارید – صفحاتی برای کاربران کانادایی و استرالیایی دارید، اما به طریقی همیشه کاربران استرالیا به صفحاتی هدایت می‌شوند که برای کاربران کانادا ایجاد شده‌اند. یا اگر وب‌سایت خود را به زبان فرانسوی ترجمه کرده‌اید و می‌خواهید کاربران فرانسوی به دقت به این صفحات ترجمه‌شده وارد شوند. این مواقعی هستند که برچسب hreflang مفید است.

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

1: چیست برچسب Hreflang و چرا اهمیت دارد؟

Hreflang در واقع ویژگی یک تگ است که همیشه همراه با ویژگی‌های rel=”alternate” و href قرار می‌گیرد. این به گوگل و کرال‌های دیگر نشان می‌دهد که یک وب‌سایت نسخه‌های مختلفی برای کاربران از کشورها و/یا برای کاربرانی که زبان‌های مختلفی بلد هستند دارد.

وبمسترها این تگ را درون تگ‌های کد HTML یک صفحه قرار می‌دهند. برای صفحه‌ای که در حال خواندن هستید، مانند زیر است:

<link rel="alternate" hreflang="en" href="https://example.com/en/page.html" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page.html" />
<!-- ورژن‌های دیگر hreflang اینجا قرار می‌گیرند -->


2: زمانی باید از برچسب‌های Hreflang استفاده کنم؟

استفاده از ویژگی hreflang دو دلیل اصلی دارد:

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

یک وب‌سایت جهانی با سه نسخه برای قاره‌های مختلف بر اساس زبان انگلیسی: برای اروپا، آسیا، ایالات متحده و کانادا.
یک وب‌سایت با نسخه‌های زبان انگلیسی و اسپانیایی اما فقط برای ایالات متحده.
یک وب‌سایت برای یک کشور با زبان‌های بومی مختلف.

3: مقادیر Hreflang

مقادیر مختلفی وجود دارند تا به کرال‌ها نشان دهند که صفحه را برای کدام کشور و زبان ایجاد کرده‌اید. برای کشورها از فرمت ISO 3166-1 Alpha-2 استفاده می‌شود و برای زبان‌ها از فرمت ISO 639-1. کد زبان همیشه ابتدا آمده و سپس، پس از خط تیره، کد کشور.

ترکیب hreflang باید برای یک نسخه خاص از وب‌سایت یکتا باشد. به عنوان مثال، نباید نسخه‌های مختلفی برای کاربران از همان کشوری که همان زبان را صحبت می‌کنند، داشته باشید.

4: مقدار X-default

X-default یک مقدار ویژه از ویژگی hreflang است. این مشخص می‌کند که کاربران در صورت عدم تطابق زبان و/یا کشورهایی که در برچسب hreflang خود تنظیم کرده‌اید با تنظیمات مرورگر آن‌ها به کدام نسخه از وب‌سایت هدایت می‌شوند.

این به عنوان یک ابزار جهانی عمل می‌کند. اگر موقعیت جغرافیایی و زبان مخاطب با تنظیمات تعیین‌شده تطابق نداشته باشد، آن‌ها هدایت می‌شوند. به عنوان مثال، یک کاربر از آلمان در حال جستجو برای محتوایی به زبان انگلیسی است – به طور معمول، آدرس وب‌سایت مناسبی وجود نخواهد داشت و در موارد چنینی، از x-default استفاده می‌شود.

5: قوانین پیاده‌سازی Hreflang – نقشه سایت XML، هدرهای http و برچسب‌های HTML

سه روش متداول وجود دارد:

نقشه سایت XML:
این روش یکی از روش‌های محبوب برای توسعه‌دهندگان است، چرا که به آن‌ها کمک می‌کند تا به راحتی تغییرات گسترده‌ای ایجاد کنند. با این حال، با این روش مشکلاتی همراه است، زیرا پس از پیاده‌سازی hreflang در نقشه سایت XML، Google Search Console چند خطایی نشان می‌دهد. این اتفاق افتاده چون نقشه سایت به دلیل تعداد رشته‌های اضافه شده، دشوارتر به پردازش درمی‌آید. علاوه بر این، جستجوگرهای گوگل به ندرت به نقشه سایت XML مراجعه می‌کنند.
روش به طور کلی بسیار ساده است. کافی است برای هر صفحه که نسخه جایگزین دارد، عنصر xhtml:link را اضافه کنید. این برچسب‌ها باید به آدرس‌های آلترناتیو اشاره کنند، از جمله آدرس فعلی.

مثال:

<url>
  <loc>http://example.com/page1</loc>
  <xhtml:link rel="alternate" hreflang="en" href="http://example.com/en/page1"/>
  <xhtml:link rel="alternate" hreflang="es" href="http://example.com/es/page1"/>
</url>

  1. هدرهای http: این روش با افزودن هدرهای http به صفحات، به گوگل اطلاع می‌دهد که نسخه‌های آلترناتیو برای آن صفحه چیستند.

مثال:

Link: <http://example.com/page1>; rel="alternate"; hreflang="en",
      <http://example.com/es/page1>; rel="alternate"; hreflang="es"

برچسب‌های HTML:
این روش از برچسب‌های HTML استفاده می‌کند و به وب‌مستر این اطلاع را می‌دهد که صفحه مورد نظر نسخه‌های آلترناتیو دارد.
مثال:

<link rel="alternate" hreflang="en" href="http://example.com/en/page1"/>
<link rel="alternate" hreflang="es" href="http://example.com/es/page1"/>

تصمیم با شماست، اما اگر هنوز قصد دارید از روش پیاده‌سازی نقشه‌های سایت XML استفاده کنید، به شما توصیه می‌شود که بیشتر درباره توصیه‌های گوگل اطلاعات جمع‌آوری کنید.

هدر HTTP هر صفحه:
نظریه‌ای نشان می‌دهد که روش پیاده‌سازی هدر HTTP تمام مزایای مورد نیاز شما را دارد:

گوگل هر بار که به صفحه مراجعه می‌کند، اطلاعات را از هدر HTTP دریافت می‌کند، برخلاف حالت نقشه‌های سایت XML.
شما می‌توانید برای هر URL هدرهای HTTP را تنظیم کنید، حتی برای صفحاتی که کد منبع خود را ندارند، به علاوه فایل‌های غیر-HTML مانند PDF و غیره.
با این حال، این روش همچنین نسبت به کاربرد کردن مشکل است. ابزارهای سئو به اندازه کافی به هدرهای HTTP توجه نمی‌کنند؛ بنابراین، این اغلب مشکلات بیشتری ایجاد می‌کند تا مزایا. با این حال، کد به تنهایی بسیار ساده است و بسیار شبیه به برچسب HTML است.

مثال:

HTTP/1.1 200 OK
Link: <http://example.com/page1>; rel="alternate"; hreflang="en",
      <http://example.com/es/page1>; rel="alternate"; hreflang="es"

بخش هدر کد HTML هر صفحه:
بدون شک، این روش پیاده‌سازی hreflang ساده‌ترین و محبوب‌ترین روش اجرایی در اینترنت است و بیشتر توسعه‌دهندگان نیز توصیه می‌کنند.

برای پیاده‌سازی hreflang با استفاده از این روش، شما باید کد ویژه‌ای را به بخش صفحه خود اضافه کنید.

مثال:

<head>
    <link rel="alternate" hreflang="en" href="http://example.com/page1" />
    <link rel="alternate" hreflang="es" href="http://example.com/es/page1" />
</head>

متأسفانه، این روش همچنین مشکلاتی دارد.

اگر شما تعداد زیادی موقعیت یا زبان مختلف داشته باشید، نیاز خواهید داشت به پیاده‌سازی تعداد زیادی برچسب hreflang که دارای برخی اثرات منفی است. افزودن کد اضافی طولانی باعث افزایش اندازه صفحه و در نتیجه کاهش سرعت بارگیری وب‌سایت می‌شود.