لماذا لا يظهر hreflang في موقع Next رغم أنه موجود؟
كنت أراجع تحسين الظهور لموقع ثنائي اللغة، وبدأت بالبحث في الصفحة المبنية:
rg -o 'hreflang="[^"]*"' index.html
لا شيء.
استنتجت في اللحظة نفسها أن الروابط البديلة غير موجودة. ومثل هذا النقص مشكلة حقيقية في موقع بلغتين: محركات البحث لن تعرف أن الصفحتين نسختان من محتوى واحد، وقد تعاملهما كمحتوى مكرر.
كدت أكتب التقرير، ثم قررت أن أفحص مرة ثانية.
ما وجدته
rg -o 'rel="alternate"[^>]*' index.html
rel="alternate" hrefLang="en" href="https://example.com/"
rel="alternate" hrefLang="ar" href="https://example.com/ar/"
rel="alternate" hrefLang="x-default" href="https://example.com/"
موجودة وسليمة وكاملة، غير أنها مكتوبة hrefLang بحرف L كبير.
لماذا
يعتمد React صيغة camelCase في أسماء الخصائص (hrefLang، className، tabIndex)، وعند التصيير إلى HTML ثابت قد تصل هذه الأسماء إلى الملف كما كتبت في المصدر. المتصفح يقرؤها قراءة صحيحة لأن أسماء سمات HTML غير حساسة لحالة الأحرف، ومحركات البحث تتعامل معها بالطريقة نفسها. أما grep فيطابق الأحرف كما هي تماما.
الدرس الحقيقي
البحث الذي يعود بلا نتيجة لا يثبت غياب الشيء، بل يثبت أن نمط البحث لم يطابق.
كادت هذه الحادثة تنتهي بتقرير كاذب: يُبلغ صاحب الموقع بنقص لا وجود له، فيصرف وقته في إصلاح شيء يعمل أصلا، وربما يكسره أثناء المحاولة.
كيف تتحقق فعلا
المطابقة النصية هي التي أوقعتني في الخطأ أول مرة، فاجعل الفحص عبر المتصفح نفسه:
[...document.querySelectorAll('link[rel="alternate"]')]
.map(l => [l.hreflang, l.href])
المتصفح يطبّع أسماء السمات أثناء تحليل الصفحة، فتعطيك نتيجة الاستعلام ما يحويه المستند فعليا مهما كانت حالة الأحرف في المصدر.
قاعدة أعمل بها منذ ذلك اليوم
قبل الإبلاغ عن غياب أي شيء، ابحث عنه بطريقتين مختلفتين على الأقل. وإذا اختلفت النتيجتان، فابدأ بمراجعة نمط البحث قبل مراجعة الموقع.