آیا React پیوندهای ناوبری شما را از گوگل پنهان می کند؟

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

اما یک مسئله وجود دارد که ما همیشه با آن مواجه می شویم که بلافاصله مشخص نیست و می تواند به طور قابل توجهی بر میزان رتبه سایت در موتورهای جستجو تأثیر بگذارد – و من فکر نمی کنم این موضوع در بین اکثر توسعه دهندگان وب به طور گسترده ای شناخته شده باشد.

برای درک این موضوع ابتدا باید سه چیز را بدانید.

1. Googlebot سایت شما را بر اساس تجربه تلفن همراه خود می خزد و رتبه بندی می کند

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

2. پیوندهای موجود در پیمایش شما به صفحات پیوند داده شده کمک می کند تا در جستجو رتبه بهتری داشته باشند

هزاران سیگنال وجود دارد که گوگل هنگام تعیین رتبه بندی یک صفحه برای یک عبارت جستجوی معین از آنها استفاده می کند – اما یک سیگنال بسیار مهم لینک های داخلی است که به آن صفحه اشاره می کنند. قرار دادن پیوند، متن لنگر پیوند، مرجع صفحه ارجاع و غیره.

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

3. سایت‌هایی که از React استفاده می‌کنند، اغلب پیوندهای پیمایش را در HTML ارائه شده درج نمی‌کنند تا زمانی که کاربر روی نماد منو کلیک کند.

همیشه اینطور نیست – و قطعاً می توان آن را برطرف کرد – اما مشکلی که اغلب می بینیم این است که پیوندهای موجود در ناوبری (آنهایی که واقعاً می خواهیم Googlebot یک مقدار را به آنها منتقل کند) اغلب در HTML ارائه شده اولیه قابل مشاهده نیستند. .

منظور من HTML خام اصلی نیست – منظورم HTML رندر شده ای است که بعد از بارگیری اولیه صفحه، قبل از هر گونه تعامل با کاربر، در پانل عناصر Chrome DevTools خواهید دید.

مشکل این است که بسیاری از پیاده‌سازی‌های React (یا Next.js یا سایر چارچوب‌های جاوا اسکریپت) تا زمانی که کاربر روی منوی همبرگر کلیک نکند، مسیریابی را به DOM (مدل شیء سند) روی دستگاه تلفن همراه اضافه نمی‌کند – اما Googlebot این کار را نخواهد کرد. این کار را انجام نده اقدامات کاربر را انجام نمی دهد – محتوای شما را با عرض یک درگاه نمایش تلفن همراه بارگیری می کند (البته ارتفاع واقعاً بلند) و سپس محتوای شما را بر اساس آنچه در DOM در آن لحظه می تواند ببیند ارزیابی می کند.

این بدان معنا نیست که باید در نمای رندر شود – هنوز هم می تواند پشت یک آکاردئون یا زبانه باشد – فقط باید در DOM باشد، همانطور که می توانید پیوند ما را به صفحه ما در مورد ماندگاری از تلفن همراه ما ببینید. منو در Chrome DevTools، حتی اگر منو بسته باشد.

ما می‌توانیم این را در بسیاری از سایت‌هایی که از React یا Next.js استفاده می‌کنند (یا واقعاً اکثر چارچوب‌های جاوا اسکریپتی که با آنها برخورد کرده‌ایم) مشاهده کنیم. مهم است که قبلاً بگوییم افرادی که در این سایت‌ها کار می‌کنند ممکن است از قبل کاملاً از این مسائل آگاه باشند – دلایل زیادی وجود دارد که چرا مشکلات SEO در یک سایت وجود دارد و اغلب تیم آگاه است اما منابع محدودی دارد و سایر مسائل با اولویت بالاتر. برای کار کردن – این به معنای کاوش در مورد کسی نیست، و هیچ سایتی کامل نیست (و مهمتر از همه، این مسئله ای است که بسیاری از سایت هایی را که از چارچوب های جاوا اسکریپت استفاده می کنند تحت تأثیر قرار می دهد).

ایکیا

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

Ikea از جاوا اسکریپت برای به روز رسانی DOM پس از تعامل کاربر با منو استفاده می کند و پیوندهای زیر شاخه در HTML اصلی نیستند.

می‌توانید با استفاده از Chrome DevTools این مورد را بررسی کنید. اگر DevTools را باز می کنید، ابعاد مرورگر خود را روی موبایل تنظیم کنید (با استفاده از نماد کوچک موبایل در گوشه سمت چپ بالای DevTools) و صفحه را دوباره بارگیری کنید – سپس “gardrobes” را جستجو کنید و خواهید دید که چیزی در HTML رندر شده اولیه یافت نمی شود. .

تنها زمانی که کاربر روی نماد منو ضربه می‌زند و سپس روی «محصولات» ضربه می‌زند، DOM به‌روزرسانی می‌شود تا پیوند به گنجه‌ها را در بر بگیرد. همانطور که در اینجا نشان داده شده است، می توانید این را در DevTools نیز مشاهده کنید.

در نهایت، می‌توانید (و باید!) بررسی کنید که Google نمی‌تواند این پیوند را با استفاده از تست سازگاری با موبایل ببیند. پس از اتمام تست، روی “مشاهده صفحه آزمایش شده” کلیک کنید و به دنبال پیوند در HTML که Google کشیده است بگردید. برای Ikea، می توانید ببینید که پیوند صفحه دسته بندی کمد لباس یافت نشد.

در کل کشور

همچنین می‌توانیم این مشکل را در Nationwide ببینیم که از Next.js استفاده می‌کند. برای دسترسی به صفحه بیمه عمر آنها در دستگاه تلفن همراه، باید روی نماد منوی آنها ضربه بزنید، سپس روی بیمه ضربه بزنید و سپس می توانید پیوند بیمه عمر را ببینید.

اما اگر بلافاصله پس از بارگیری صفحه، با عرض نمای موبایل، DevTools را بررسی کنیم، تنها مرجعی که به URL بیمه عمر می‌یابیم در این بلوک JSON است:

Google URL موجود در این کد JSON را به عنوان پیوند صفحه در نظر نمی گیرد. هیچ پیوند HTML به این صفحه بیمه عمر برای Googlebot وجود ندارد. و ما می توانیم این را دوباره با تست تحرک تایید کنیم. می تواند متن “بیمه عمر” را در JSON ببیند، اما هیچ مورد واقعی وجود ندارد برای او:

اما دوباره، پیوند به URL آفتابگردان در HTML رندر اولیه با استفاده از DevTools قابل مشاهده نیست. این در بسیاری از کدهای جاوا اسکریپت است، اما برچسب ندارد ، به صفحه ای با گل آفتابگردان اشاره می کند که گوگل باید آن را ببیند.

و دوباره، می‌توانیم از تست سازگاری با موبایل استفاده کنیم تا ببینیم Googlebot پیوند آفتابگردان را نیز تشخیص نمی‌دهد – زیرا با نماد منو تعامل ندارد و بنابراین جاوا اسکریپتی را که آن پیوندهای ناوبری را به DOM اضافه می‌کند، فعال نمی‌کند. . فقط کد جاوا اسکریپت را پیدا می کند که به URL اشاره دارد – نه برچسب .