تحسين محركات البحث لـ CMS مقطوعة الرأس: أشياء يجب الانتباه إليها

نشرت: 2020-11-30

جدول المحتويات

بشكل أساسي ، لا يزال مُحسّنات محرّكات البحث لنظام CMS مقطوع الرأس يتبع نفس القواعد مثل CMS التقليدية. لذلك تظل إمكانية الزحف والسرعة وجودة المحتوى هي الأهداف عندما تريد الدخول فيها. ولكن على الرغم من أن لدينا أهدافًا متشابهة يجب تحقيقها ، إلا أن وسائل تحقيق هذه الأهداف تختلف في نظام CMS مقطوع الرأس.

كيف يختلف SEO في CMS مقطوعة الرأس

في نظام إدارة المحتوى بدون رأس ، يجب إجراء معظم أعمال تحسين محركات البحث يدويًا ، حيث لا يوجد عادةً مكون إضافي أو إضافات لتسهيل العملية برمتها - وهذا يعني المزيد من العمل بالنسبة لك والمزيد من الأشياء التي يجب تعلمها في هذه العملية بدلاً من الاعتماد على أدوات الطرف الثالث. علاوة على ذلك ، نظرًا لأن معظم أنظمة إدارة المحتوى (CMS) وأطر الواجهة الأمامية في الوقت الحالي تستند إلى JavaScript ، فإن مُحسّنات محرّكات البحث لمثل هذه البيئات يمكن أن تصبح معقدة نظرًا لطبيعة برامج الزحف التي لا يمكنها عرض JavaScript بسهولة.

على الرغم من أن Googlebot يمكنه عرض JavaScript ، إلا أننا لا نريد الاعتماد على ذلك.
مارتن سبليت ، بشأن تنفيذ العرض الديناميكي

 يوصى بقراءة: CMS مقطوعة الرأس مقابل CMS التقليدية

الأشياء التي يجب البحث عنها في نظام CMS مقطوع الرأس

نصوص بديلة

تساعد النصوص البديلة في جعل محتوى صورتك قابلاً للقراءة بواسطة روبوتات Google. على غرار البيانات الوصفية المخصصة ، فإن النص البديل للصور ليس ميزة خارجة عن المألوف في معظم أنظمة إدارة المحتوى بدون رأس ، وهذا يعني أنه سيتعين عليك تنفيذه بواسطة موفر CMS الخاص بك.

بالنسبة إلى نظام إدارة المحتوى بدون رأس والذي لا يحتوي على ميزة نص بديل مضمنة ، يمكننا إضافة النص البديل يدويًا لكل صورة دون بذل الكثير من الجهد ، حيث تحتاج فقط إلى إضافة سمة <alt> إلى صورك.

 <img src = "image.png" alt = "النص البديل الخاص بنا">

البيانات الوصفية

علامات البيانات الوصفية هي علامات خاصة يفهمها بحث Google. تصف هذه العلامات محتوى موقعك وتساعد في التحكم في كيفية ظهور صفحاتك في بحث Google. وخلافًا لأنظمة إدارة المحتوى التقليدية ، فإن نظام إدارة المحتوى بدون رأس عادةً لا يأتي مع القدرة على تحرير علامات البيانات الوصفية أثناء التنقل ، مما يعني أنه يجب إضافة عنوان صفحتك والأوصاف والعلامات الوصفية الأخرى يدويًا إلى نماذج المحتوى الخاصة بك.

على سبيل المثال ، بالنسبة إلى موقع ويب بدون رأس يحتوي على واجهة أمامية قائمة على React ولكن بدون دعم للبيانات الوصفية المخصصة ، فإننا نستخدم خوذة التفاعل لإضافة البيانات الوصفية بسهولة إلى <head> .

بالنسبة إلى نظام إدارة محتوى بدون رأس يدعم البيانات الوصفية المخصصة ، ستحتاج عادةً إلى إضافة حقول تحتوي على علامات بيانات وصفية مخصصة في نموذج المحتوى الخاص بك أو لإنشاء نموذج مُخصص لتحسين محركات البحث يحتوي على جميع العلامات الوصفية الضرورية. يجب تكوين نموذج تحسين محركات البحث الذي تم إنشاؤه ليكون له علاقات بجميع الصفحات التي تحتاجه.

نموذج تحسين محركات البحث في GraphCMS — *نموذج تحسين محركات البحث في* *GraphCMS*

مقتطفات البيانات المنظمة

تساعد مقتطفات البيانات المنظمة "بحث Google" في فهم صفحتك وكافة المحتويات بداخلها بشكل أفضل. من خلال توفير مقتطفات بيانات منظمة صالحة ، يكون موقعك مؤهلاً للحصول على نتائج منسقة.

لإنشاء مقتطف بيانات منظمة ، نستخدم مصفوفة JSON-LD المخزنة في <head> لموقعك. وعلى عكس نظام إدارة المحتوى التقليدي حيث تتم أتمتة العملية برمتها باستخدام مكون إضافي (على سبيل المثال ، Yoast SEO) ، في نظام CMS مقطوع الرأس ، سيتعين عليك:

اختر أنواع البيانات المنظمة الصحيحة لصفحاتك
أضف رمز JavaScript مخصصًا يساعد في إنشاء كل البيانات المهيكلة المطلوبة أو إضافة المزيد من المعلومات إلى البيانات المنظمة المقدمة من جانب الخادم

 جلب ("https://api.example.com/recipes/123")
ثم (response => response.text ())
.then (StructuredDataText => {
  نصي const = document.createElement ('script') ؛
  script.setAttribute ('type'، 'application / ld + json') ؛
  script.textContent = StructuredDataText ؛
  document.head.appendChild (نصي) ؛
}) ؛

اختبر التنفيذ باستخدام اختبار النتائج المنسقة

مشاكل تتبع مشاهدة الصفحة

إذا كنت قد حاولت في أي وقت تنفيذ Google Analytics على موقع ويب مقطوع الرأس ، فمن المحتمل أنك لاحظت أنه يتم تتبع مشاهدة الصفحة الأولى فقط من موقع الويب الخاص بك. هذا يرجع إلى حد كبير إلى حقيقة أن الواجهة الأمامية لنظام إدارة المحتوى بدون رأس هو تطبيق صفحة واحدة بطبيعته ، مما يعني أن الصفحة يتم تحميلها مرة واحدة فقط ويتم تشغيل حدث pageView واحد فقط في كل جلسة. للتحايل على هذه المشكلة ، نطبق History API لتمكين مشاهدات الصفحة الافتراضية التي يمكن تتبعها بعد ذلك باستخدام مشغل تغيير السجل في Google Tag Manager.

يؤدي تغيير السجل إلى مسارات للتغييرات في جزء عنوان URL أو في كائن حالة السجل. عندما يحدث تغيير بين هذين ، لدينا المتغيرات التالية:

جزء السجل القديم لعنوان URL: ماذا كان جزء عنوان URL في السابق.
سجل جزء عنوان URL الجديد: ما هو جزء عنوان URL الآن.
الحالة القديمة للتاريخ: كائن حالة السجل القديم ، يتم التحكم فيه بواسطة استدعاءات الموقع لـ pushState.
الحالة التاريخية الجديدة: كائن حالة السجل الجديد ، يتم التحكم فيه بواسطة استدعاءات الموقع لـ pushState.

لإنشاء مشغل تغيير السجل ، ما عليك سوى الانتقال إلى Google Tag Manager و:

اختر المشغلات > جديد
اختر تكوين المشغل > تغيير المحفوظات

بعد ذلك ، سنحتاج إلى إنشاء علامة تكوين Google Analytics جديدة لتنشيطها على مشغل تغيير السجل الذي أنشأناه للتو ، مثل:

وهذا كل شيء. يجب أن تكون الآن قادرًا على تتبع مشاهدات الصفحة في موقع الويب الخاص بك مقطوع الرأس.

قضايا تدقيق تحسين محركات البحث

نظرًا لأن موقع الويب الخاص بك بلا رأس يتكون في الغالب من JavaScript من جانب العميل ، فقد يمثل تدقيق SEO مشكلة نظرًا لأن برامج الزحف المستخدمة في معظم أدوات تدقيق SEO المجانية لا تأتي مع القدرة على عرض JavaScript.

عرض JavaScript ليس ميزة مجانية في معظم أدوات تدقيق SEO — *عرض JavaScript* ***ليس*** *ميزة مجانية في معظم أدوات تدقيق SEO*

يمكن حل هذه المشكلة ، من المتوقع ، عن طريق دفع المزيد ، حيث يمكنك الترقية إلى الخطة المميزة التالية لتمكين الدعم لهذه الميزة. يجب أن تلاحظ أيضًا أن عرض JavaScript لا يتم تمكينه افتراضيًا في معظم أدوات تدقيق تحسين محركات البحث ، مما يعني أنه سيتعين عليك تمكينه يدويًا للزحف إلى موقع الويب الخاص بك بلا رأس.

تقسيم الكود

نظرًا لأن نظام إدارة المحتوى بلا رأس نموذجي يعتمد بشكل كبير على جافا سكريبت ، فإن كمية شفرة جافا سكريبت المستخدمة في موقع الويب الخاص بك - خاصة عندما تستخدم عددًا كبيرًا من مكتبات الجهات الخارجية - يمكن أن تصل إلى حد الإرهاق.

وقت تشغيل JavaScript طويل جدًا — المصدر: تقليل حمولات JavaScript مع تقسيم التعليمات البرمجية

وكما نعلم جميعًا ، تؤثر سرعة الصفحة على مُحسّنات محرّكات البحث ، لذلك لا يمكننا الاحتفاظ بشفرة JavaScript الخاصة بنا على هذا النحو ، وهذا هو السبب في أن تقسيم الشفرة مصمم للتحايل على هذه المشكلة. باستخدام تقسيم الكود ، يمكنك تقسيم كود JS الخاص بك إلى حزم أصغر يمكن بعد ذلك تحميلها ديناميكيًا في وقت التشغيل. هذه الميزة مدعومة حاليًا بواسطة حزم مثل Webpack و Browserify عبر حزمة العوامل.

 استيراد React ، {Suspense، lazy} من "رد فعل" ؛
استيراد {BrowserRouter as Router، Route، Switch} من 'reactor-router-dom' ؛

const Home = lazy (() => import ('./ المسارات / الصفحة الرئيسية')) ؛
const حول = lazy (() => استيراد ('./ المسارات / حول')) ؛

تطبيق const = () => (
  <الموجه>
    <التعليق الاحتياطي = {<div> جارٍ التحميل ... </ div>}>
      <التبديل>
        <مسار المسار الدقيق = "/" component = {Home} />
        <مسار المسار = "/ about" component = {About} />
      </Switch>
    </Suspense>
  </Router>
) ؛

عرض ديناميكي

نظرًا لأن غالبية مواقع الويب الخالية من الرأس هي جافا سكريبت بطبيعتها ، فإنها تواجه نفس التحدي الرئيسي لتحسين محركات البحث وهو عرض JavaScript.

[...] ، من الصعب معالجة JavaScript ولا تستطيع جميع برامج الزحف بمحركات البحث معالجتها بنجاح أو على الفور.
تنفيذ العرض الديناميكي ، جوجل

لا تستطيع برامج الزحف عرض JavaScript بشكل فعال ، ولهذا السبب تقترح Google نفسها العرض الديناميكي كحل بديل في هذه الأثناء . تم تقديم العرض الديناميكي في Google I / O '18 ، وهو حل مثالي لمواقع الويب المستندة إلى JavaScript والتي تريد طريقة سهلة لحل تحديات تحسين محركات البحث مع الاحتفاظ بجميع المزايا التي تأتي مع العرض من جانب العميل. باستخدام طريقة العرض الجديدة هذه ، يرسل خادم الويب الخاص بك محتوى عاديًا يتم عرضه من جانب العميل إلى المستخدمين ، بينما تحصل برامج زحف محركات البحث على محتوى HTML ثابت يتم عرضه بالكامل على الخادم.

كل ما يعنيه هذا هو أنك تحصل على أفضل ما في العالمين من خلال العرض الديناميكي - سهولة الزحف للعرض من جانب الخادم والعرض اللاحق السريع للعرض من جانب العميل.

لتنفيذ العرض الديناميكي ، سيتعين علينا الاعتماد على العارضين الديناميكيين مثل Rendertron أو Puppeteer لتقصير العملية برمتها. ستعمل هذه العروض على تحويل محتوى موقعك إلى HTML ثابت يمكن فهمه بواسطة برامج الزحف.

بعد الانتهاء من تثبيت العارض الديناميكي وتكوينه ، اتبع الخطوات الإضافية في مستند Google الرسمي لتهيئة سلوكيات وكلاء المستخدم.

استنتاج

إن تحسين محركات البحث (SEO) لنظام CMS بدون رأس ليس هو الطريقة الأكثر مباشرة ، وسيتطلب القليل من العمل من مطوريك للحصول على كل شيء بشكل صحيح. ولكن بمجرد أن تتعود على الأمر ، يمكن أن يكون نظام CMS مقطوع الرأس بنفس فعالية نظام CMS التقليدي عندما يتعلق الأمر بـ SEO. والأكثر من ذلك أنك تحصل على قدر أكبر من الحرية والمرونة لإنشاء المحتوى بالطريقة التي تريدها.