مولدات المواقع الثابتة

كيف تُنشئ Hugo وJekyll وEleventy وHexo وGatsby وAstro كل صفحة مسبقًا في صورة HTML ثابتة، متجاوزةً طابور عرض JavaScript لدى Google كي يصبح المحتوى قابلًا للفهرسة من أول جلب.

1 إشارة من إشارات الأدلة في هذه الصفحة

ينشئ مولد المواقع الثابتة (SSG) كل صفحة في صورة HTML مكتملة وقت البناء، لذلك يكون المحتوى موجودًا بالفعل في HTML الخام قبل أن يطلبه أي زاحف، من دون طابور لعرض JavaScript أو تأخير «الموجة الثانية»، ويصبح قابلًا للفهرسة فورًا. هذه هي الميزة الأساسية لتحسين محركات البحث مقارنةً بأطر العرض من جهة العميل. تشترك Hugo وJekyll وEleventy وHexo وGatsby وAstro في هذه الميزة، وتختلف في اللغة وكمية JavaScript التي ترسلها إلى المتصفح وأدوات الصور وخرائط الموقع المدمجة. والمأخذ الحقيقي الوحيد هو حداثة البناء: فالموقع الثابت لا يكون أحدث من آخر عملية بناء، لذا تحتاج تغييرات المحتوى إلى إعادة البناء والنشر كي تصل إلى محركات البحث. بنيت هذا الموقع (وكذلك patrickstox.com) باستخدام Astro لهذه الأسباب تحديدًا.

الخلاصة — يعرض مولد SSG كل مسار مسبقًا في صورة HTML ثابتة وقت البناء، لذا يكون المحتوى موجودًا في الاستجابة قبل أول طلب من الزاحف، من دون Web Rendering Service أو طابور عرض أو تأخير «Wave 2». وهذه أكبر ميزة منفردة لقابلية الفهرسة يمكنك منحها لموقع. تختلف مولدات SSG عن أطر CSR (التي تبني الصفحة في المتصفح) وعن الأطر الوصفية (التي يمكنها تنفيذ SSR لكل طلب). وتنتج المولدات الستة في هذه المجموعة — Hugo وJekyll وEleventy وHexo و Gatsby وAstro — جميعها HTML ثابتًا، لكنها تختلف في اللغة وحمولة JS وأدوات خرائط الموقع والصور المدمجة. نمط الفشل الحقيقي ليس العرض بل حداثة البناء: فالموقع الثابت لا يكون أحدث من آخر بناء له، ولذلك فإن المحتوى المتغير الذي لا يؤدي إلى إعادة بناء يقدّم بصمت HTML قديمًا إلى محركات البحث. أشغّل هذا الموقع على Astro لهذه المفاضلات تحديدًا.

ما معنى «ثابت» فعليًا؟

يشغّل مولد المواقع الثابتة محتواك وقوالبك خلال خطوة بناء، ويُخرج مجلدًا من ملفات HTML وCSS والأصول المكتملة. والجزء الحاسم لتحسين محركات البحث هو متى يُنتج HTML: وقت البناء، مرة واحدة، للجميع — لا مع كل طلب ولا داخل المتصفح. تصف إرشادات Google بشأن JavaScript الزحف والعرض والفهرسة باعتبارها مراحل معالجة منفصلة. يزيل مولد SSG العرض من جهة العميل من المسار الحرج للمحتوى الذي ينشئه لأن HTML مكتمل بالفعل. دليل على هذا الادعاء Google processes JavaScript through crawling, rendering, and indexing, while pre-rendered HTML is present before client execution. النطاق: Google Search JavaScript processing; indexing is not guaranteed. مستوى الثقة: مرتفع · تم التحقق: Google: JavaScript SEO basics

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

SSG مقابل العرض من جهة العميل مقابل الأطر الوصفية

ثلاث بنى، وثلاث لحظات مختلفة يظهر فيها HTML إلى الوجود:

  • توليد الموقع الثابت (SSG). يُبنى HTML مرة واحدة وقت البناء، قبل أي طلب، ويُقدَّم كملفات ثابتة (غالبًا من CDN). المحتوى موجود في HTML الخام. وينطبق ذلك على Hugo وJekyll وEleventy وHexo، وكذلك Gatsby وAstro في وضعهما الثابت الافتراضي.
  • العرض من جهة العميل (CSR). يرسل الخادم غلافًا بسيطًا، ثم تبني JavaScript الصفحة في المتصفح وقت الطلب/التشغيل. يعتمد المحتوى على نجاح العرض. وهذا هو وضع React أو Vue SPA الافتراضي المعتمد على CSR، وهو الإعداد الأكثر خطورة لتحسين محركات البحث (راجع JavaScript SEO).
  • الأطر الوصفية (SSR / الهجينة). تستطيع أطر مثل Next.js وNuxt وSvelteKit عرض HTML على الخادم لكل طلب (SSR)، أو عرض بعض المسارات مسبقًا (SSG)، أو المزج بينهما. يكون المحتوى في HTML، لكنه يُنتج وقت الطلب، ما يضيف تكلفة خادم وزمن انتقال لا يوجدان مع مولد SSG خالص.

تتداخل الحدود عند الأطراف؛ إذ يُسمّى Gatsby وAstro أحيانًا أطرًا وصفية لأنهما يعتمدان على المكونات ويمكنهما فعل أكثر من إخراج ملفات ثابتة. لكنهما في وضعهما الأساسي مولدان ثابتان، وهكذا ينبغي التعامل معهما لتحسين محركات البحث. النموذج الذهني المهم هو: كلما وُجد HTML أبكر، قل ما يمكن أن يفسد قبل أن يراه الزاحف. وSSG هو الأبكر.

مقارنة المولدات الستة

تنتج المولدات الستة جميعها HTML ثابتًا قابلًا للفهرسة. وإليك اختلافاتها وفق المحاور التي تؤثر فعلًا في قرار تحسين محركات البحث:

المولداللغة / مبني باستخدامJS المُرسل إلى المتصفحخريطة الموقعتحسين الصورالأنسب لـ
HugoGoلا شيء افتراضيًامدمجة (يُنشأ sitemap.xml تلقائيًا)معالجة صور مدمجة (تغيير الحجم، WebP)مواقع المحتوى الكبيرة التي تحتاج بناءً سريعًا
JekyllRubyلا شيء افتراضيًاإضافة (jekyll-sitemap)إضافات (jekyll-picture-tag وغيرها)مدونات GitHub Pages؛ مولد SSG الأصلي
Eleventy (11ty)JavaScript (Node)لا شيء افتراضيًاقالب/إضافة (تنشئها بنفسك)إضافة (@11ty/eleventy-img)مطورو JS الذين يريدون مخرجات بلا JS ومرونة عالية
HexoJavaScript (Node)لا شيء افتراضيًا (بحسب القالب)إضافة (hexo-generator-sitemap)إضافاتالمدونات، ولا سيما في منظومة Node/آسيا
GatsbyJavaScript / Reactحزمة React (تنفذ hydration)إضافة (gatsby-plugin-sitemap)مدمج (gatsby-plugin-image، قوي)فرق React التي تريد موقعًا ثابتًا قائمًا على البيانات
AstroJS/TS، أي إطار واجهةلا شيء افتراضيًا (الجزر فقط)رسمية (@astrojs/sitemap)مدمج (astro:assets)مواقع المحتوى التي تريد مكونات من دون ضريبة JS

بعض النقاط الجديرة باستخلاصها من الجدول:

  • حمولة JS هي عامل التمييز المجاور لتحسين محركات البحث. لا يرسل Hugo وJekyll وEleventy و Hexo أي JavaScript تقريبًا ما لم تضفه. أما Gatsby فيعيد تهيئة حزمة React كاملة على العميل؛ ويظل قابلًا للفهرسة لأن HTML ثابت، لكنه يضيف تكلفة إلى Core Web Vitals لا توجد لدى الآخرين. ويوازن Astro بين الطرفين عبر بنية الجزر: HTML ثابت افتراضيًا، وJavaScript للمكونات التفاعلية المحددة («الجزر») التي تحتاج إليه فقط.
  • تختلف سرعة البناء مع التوسع. يشتهر Hugo (Go) بسرعته ويتعامل بسهولة مع عشرات الآلاف من الصفحات. أما المولدات القائمة على Node فأبطأ على النطاق الكبير، وكانت أزمنة بناء Gatsby تاريخيًا أكبر شكاواه.
  • حُلّت مسألة خرائط الموقع وتحسين الصور في معظم المولدات، لكن Hugo و Astro يقدمان أكثر قدر من الوظائف مباشرة، بينما يعتمد Jekyll وEleventy وHexo على إضافات جيدة الصيانة.
  • تباطأت وتيرة إصدارات Gatsby بوضوح. المشروع غير مؤرشف وما زال يصدر تصحيحات، لكن مستودع GitHub الخاص به حتى يوليو 2026 يعرض عددًا قليلًا فقط من الالتزامات خلال الأيام التسعين السابقة وإصدارًا فرعيًا واحدًا منذ فبراير. يستحق ذلك الموازنة مع خيار أكثر نشاطًا في التطوير إذا كنت تختار مولدًا اليوم، إضافةً إلى تكلفة hydration/CWV أعلاه.

لماذا بنيت هذا الموقع باستخدام Astro؟

بنيت هذا الموقع — وكذلك patrickstox.com — باستخدام Astro، والمنطق ينبع مباشرةً من هذه الصفحة. أردت التأليف باستخدام Markdown/MDX ومكونات حقيقية، لكنني لم أرد دفع ضريبة JavaScript على كل صفحة لمجرد الحصول عليها. الوضع الافتراضي في Astro هو صفر JS من جهة العميل: الصفحات التي تقرؤها تُرسل كـ HTML ثابت، ولا تُحمّل JavaScript إلا للقطع التفاعلية القليلة (مثل علامات تبويب العدسات والاختبار). يمنحني ذلك قابلية فهرسة مولد SSG كلاسيكيًا ومؤشرات Core Web Vitals جيدة، من دون التخلي عن تجربة تأليف قائمة على المكونات. لو كنت أحتاج سرعة بناء فائقة لمجموعة محتوى ضخمة بلا أي تفاعل، لكان Hugo الخيار الواضح؛ ولطبقة بيانات React، Gatsby. أما لهذا الموقع — موقع كثيف المحتوى مع بعض اللمسات التفاعلية — فإن Astro هو المفاضلة الصحيحة.

المأخذ الحقيقي الوحيد: حداثة البناء

كل ما سبق مزايا. وهذه هي العقبة التي توقع الناس في المشكلات.

الموقع الثابت لا يكون أحدث من آخر بناء له. فـ HTML لقطة مجمّدة وقت البناء. غيّر سعرًا أو صحح حقيقة أو انشر تدوينة أو حدّث وسم عنوان، ولن يصل شيء من ذلك إلى محركات البحث حتى تعيد البناء والنشر. لا يوجد خادم حي يجمع الصفحة من قاعدة بيانات عند كل طلب، ولذلك لا يوجد ما يلتقط تغييرك تلقائيًا. دليل على هذا الادعاء Static build output remains a snapshot until the project is rebuilt and redeployed. النطاق: Astro static build workflow as a representative example. مستوى الثقة: مرتفع · تم التحقق: Astro: Build and deploy

يعني هذا عمليًا ما يلي:

  • يجب أن تؤدي تعديلات المحتوى إلى بناء. إذا كنت تؤلف في CMS بلا واجهة أو Git، فاربط webhook بحيث يبدأ النشر عملية نشر جديدة. عملية البناء اليدوية فقط هي الطريقة التي تتسلل بها الأسعار القديمة وأخطاء 404 «الشبحية» إلى الفهرس.
  • البيانات كثيرة التغير محرجة. المخزون والأسعار والأعداد الحية: إذا كانت تتغير أسرع من وتيرة بنائك، تتأخر النسخة الثابتة. وهنا تبرر عمليات البناء التزايدية أو المجدولة أو النهج الهجين (إطار وصفي مع SSR/ISR للمسارات المتقلبة) وجودها.
  • الصفحات الحساسة للوقت تحتاج وتيرة محددة. إذا كانت «عروض اليوم» مدمجة وقت البناء، فيجب تشغيل البناء يوميًا على الأقل، وإلا كانت الصفحة مضللة.

لا يمثل أي من ذلك عائقًا حاسمًا، بل هو مسألة انضباط. فالسبب نفسه الذي يجعل مولدات SSG ممتازة لتحسين محركات البحث (تحديد HTML مسبقًا) هو ما يفرض عليك أن تتعمد إعادة تحديده عند تغير المحتوى.

أين تذهب بعد ذلك: مجموعة مولدات المواقع الثابتة

هذا المركز هو الخريطة. لكل مولد أدناه دليل متعمق مستقل يغطي اللغة وحمولة JS وأدوات خرائط الموقع والصور ومشكلات تحسين محركات البحث الخاصة بالإطار وكيفية إبقاء عمليات البناء حديثة:

  • Hugo SEO — يعمل بـ Go، بلا JS، وبناء فائق السرعة؛ خريطة الموقع المنشأة تلقائيًا، ومعالجة الصور المدمجة، وإدارة مجموعات المحتوى الضخمة.
  • Jekyll SEO — مولد SSG الأصلي وخيار GitHub Pages الافتراضي؛ jekyll-seo-tag وjekyll-sitemap وقيد الإضافات على GitHub Pages.
  • Eleventy (11ty) SEO — قائم على JavaScript ومخرجاته بلا JS؛ إنشاء خرائط الموقع من القوالب وeleventy-img للصور المتجاوبة.
  • Hexo SEO — مولد مدونات Node؛ إضافات خريطة الموقع والخلاصات وJS الخاص بالقالب ونظافة الروابط الدائمة/canonical.
  • Gatsby SEO — توليد ثابت قائم على React؛ مفاضلة hydration/CWV، وgatsby-plugin-image وgatsby-plugin-sitemap ومصادر البيانات وقت البناء.
  • Astro SEO — بلا JS افتراضيًا، بنية الجزر، @astrojs/sitemap، وastro:assets وView Transitions وسلوك الرجوع إلى Server Islands.

كل موضوع أعلاه متداخل ضمن هذا المركز ويظهر أيضًا في الشريط الجانبي.

للسياق الأوسع — كيف يعرض Google JavaScript، وأنماط فشل التطابق والتفاعل، وأي وضع عرض تختار عندما تحتاج إلى JS — راجع مركز JavaScript SEO الأصل.

إضافة ملاحظة خبير

تثبيت اقتباس خبير

شخص جديد؟ أنشئ ملفه الشخصي غير المُطالَب بملكيته على /admin/experts/ → تثبيت اقتباس خبير أولًا.

العربية › المحتوى

SEO في Eleventy

كيف يبني Eleventy (11ty) المحتوى في HTML ثابت من دون JavaScript من جهة العميل افتراضيًا، وكيف تضيف العناوين وأوصاف meta والوسوم الأساسية وخرائط المواقع والبيانات المنظمة بنفسك حول تتابع البيانات.

قراءة المقال →
العربية › المحتوى

تحسين SEO في Hexo

كيفية تطبيق SEO في موقع Hexo، مولّد المواقع الثابتة المبني على Node.js: مزايا HTML الثابت، وضبط خرائط الموقع وrobots.txt والأوصاف وcanonical والروابط الدائمة.

قراءة المقال →
العربية › المحتوى

تحسين محركات البحث في Gatsby

دليل لتحسين موقع Gatsby للبحث: مسارات العرض الأربعة SSG وDSG وSSR والمسارات الخاصة بالعميل، وHead API الحديثة، وخرائط الموقع ووسوم canonical وSEO الصور وكلفة React على Core Web Vitals ومخاطر الصيانة.

قراءة المقال →
العربية › المحتوى

تحسين محركات البحث في Jekyll

كيفية تحسين مواقع Jekyll للبحث — ولماذا يكون HTML الثابت فيها ملائمًا للزواحف افتراضيًا، إلى جانب إضافتي jekyll-seo-tag وjekyll-sitemap، والروابط الدائمة، والمجموعات، وrobots.txt، وقائمة إضافات GitHub Pages المسموح بها.

قراءة المقال →
العربية › المحتوى

تحسين محركات البحث لمواقع Hugo

ينشئ Hugo ملفات HTML ثابتة وقت البناء، فيظهر المحتوى في HTML الخام منذ أول جلب من دون طابور عرض. لكن ذلك لا يضمن مؤشرات أداء جيدة أو ترتيبًا، وما زال ضبط canonical وتكرار التصنيفات وفخ تحويلات aliases مقابل 301 وإعداد baseURL ضروريًا.

قراءة المقال →