اللغات

SEO في Eleventy

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

نُشر أول مرة: 26 يونيو 2026 · آخر تحديث: 22 أغسطس 2026 · Advanced
اللغات
AIمن تأليفAI v2
دليل واحد في هذه الصفحة

يخرج Eleventy HTML عاديًا بصفر JavaScript من جهة العميل افتراضيًا، فيكون المحتوى في أول بايت ولا يحتاج إلى انتظار التصيير. وهذه بداية آمنة لقابلية الفهرسة، لكن Eleventy لا ينشئ أي وسم SEO: كل عنوان ووصف ووسم أساسي وrobots وOpen Graph وخريطة موقع وJSON-LD تنفذه أنت. وتتيح بنية تتابع البيانات إعلان الإعدادات الافتراضية مرة واشتقاق الوسوم الأساسية تلقائيًا. أضف الإضافات لتسهيل التنفيذ، لا لاكتساب إمكانات جديدة، وتحقق دائمًا من الناتج المنشور، لا البناء المحلي فقط.

الخلاصة — يصدر Eleventy HTML عاديًا وقت البناء مع صفر JavaScript من جهة العميل افتراضيًا، لذلك يكون المحتوى في الاستجابة قبل أول طلب زاحف — وهو أقل إعدادات قابلية الفهرسة مخاطرة. لكنه لا يقدم أي وسم SEO: العنوان والوصف والوسم الأساسي وrobots وOG وخريطة الموقع وJSON-LD كلها عليك بناؤها. تتابع البيانات (_data/site.js → ملفات بيانات المجلد → front matter → eleventyComputed) هو البنية التي تجعل ذلك قابلًا للتوسع — صرّح بالإعدادات الافتراضية مرة واستخرج الوسوم الأساسية في eleventyComputed. وتضيف الإضافات (eleventy-plugin-seo و@11ty/eleventy-img و@quasibit/eleventy-plugin-sitemap) سهولة استخدام لا إمكانات جديدة. وrobots.txt ملف passthrough. لغة القالب مسألة ألفة الفريق لا SEO — اختر ما يعرفه الفريق. الإصدار v3 متمحور حول ESM ويجعل إضافة Image Transform الخيار الافتراضي لصور مستوفية لمتطلبات CWV. راقب ثلاث حالات: قد يفشل ترتيب تبعيات eleventyComputed بصمت، ولا تضمن عضوية المجموعة إصدار عنوان URL، والبناء المحلي لا يثبت ما يقدمه موقع الإنتاج — تحقق من الناتج المنشور مباشرة.

لماذا يمثل Eleventy أساسًا قويًا لـSEO

يبني Eleventy كل مسار إلى HTML ثابت وقت البناء، وعلى خلاف Next.js وNuxt وGatsby وAstro لا يرسل أي JavaScript إلى المتصفح ما لم تضفه. Evidence for this claim Eleventy compiles templates to static output and adds no client-side framework runtime by default. Scope: Eleventy core behavior. Confidence: high · Verified: Eleventy documentation لا يوجد رسم من جهة العميل ينتظره الزاحف، ولا أثر لميزانية الرسم، ولا حزمة hydration تثقل Core Web Vitals. وتسجل مواقع Eleventy الإنتاجية عادةً درجات Lighthouse بين 99 و100 في كل الجوانب، مع صفحات رئيسية ترسل 0 KB من JavaScript.

وهو سريع في البناء أيضًا، وهذا أهم لـSEO مما يبدو: فالبناء الأسرع يعني دورات نشر أضيق، فتصل إصلاحات المحتوى إلى محركات البحث أسرع. وفي معيار من 4 000 ملف Markdown يبني Eleventy في نحو 1,93s مقابل نحو 22,9s لـAstro و29s لـGatsby و70,6s لـNext.js، مع حجم node_modules أصغر بكثير (34 MB مقابل 583 MB لدى Gatsby).

لكن — وهذه هي فكرة الصفحة كلها — لا يمنحك أي من ذلك وسم SEO. ينشئ Eleventy HTML نظيفًا ويتوقف هناك. كل وسم <title> ووصف meta وإدخال خريطة موقع وكتلة JSON-LD شيء تنفذه أنت. والخبر الجيد أن نموذج بيانات Eleventy يجعل تنفيذها مرة واحدة وفي كل مكان مريحًا فعلًا.

تتابع البيانات: أساس بنية SEO لديك

أهم مفهوم في SEO القابل للتوسع لدى Eleventy هو تتابع البيانات — ترتيب حل Eleventy للقيمة، من الأولوية الأقل إلى الأعلى: Evidence for this claim Eleventy's data cascade resolves data from multiple sources according to a documented priority order. Scope: Eleventy data cascade. Confidence: high · Verified: Eleventy: Data cascade

  1. البيانات العامة التي يوفرها Eleventy
  2. ملفات البيانات العامة في _data/ (مثل _data/site.js الذي يحتوي على title وdescription وurl وauthor)
  3. ملفات بيانات المجلد (مثل blog/blog.11tydata.js — تمنح كل منشور مدونة og:type: article)
  4. Front matter القالب (تجاوزات لكل صفحة)
  5. eleventyComputed (الأعلى — اشتق القيم من بيانات أخرى)

عمليًا:

  • صرّح بإعدادات SEO الافتراضية مرة واحدة في _data/site.js.
  • تجاوزها على مستوى المجلد لنوع محتوى (تحصل كل المنشورات على نوع OG للمقال، ويحصل قسم noindex على noindex، وهكذا).
  • تجاوزها لكل صفحة في front matter عندما تكون الصفحة خاصة.
  • استخدم eleventyComputed للقيم المشتقة — والوسم الأساسي هو المثال الأوضح:
// _data/eleventyComputed.js  (or eleventyComputed in a layout data file)
module.exports = {
  canonical: (data) => `${data.site.url}${data.page.url}`,
};

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

تستحق حالة خاصة الاختبار لا الافتراض: يمكن لقيم eleventyComputed أن تعتمد على قيم محسوبة أخرى (كعنوان يغذي وصفًا محسوبًا)، وعلى Eleventy حل مخطط التبعيات قبل تصيير أي شيء. تعمل السلاسل المباشرة جيدًا، لكن القيمة المحسوبة التي تعتمد على نفسها عرضًا — مباشرة أو عبر حقل محسوب آخر — مرجع دائري، وقد تظهر مشكلات الترتيب بصمت في صورة قيمة مفقودة أو خاطئة بدل خطأ بناء واضح. إذا اعتمدت على حقول eleventyComputed متعددة الطبقات، فتحقق من القيم الدقيقة في الناتج المصيّر، لا من نجاح البناء فقط. Evidence for this claim Computed Data values can derive from other computed values, so dependency ordering and circular references need testing against the rendered output. Scope: Eleventy eleventyComputed resolution. Confidence: high · Verified: Eleventy: Computed Data

وسوم meta في التخطيط الأساسي

البنية المعتادة هي تخطيط أساسي يملك عنصر <head>، مع تخطيطات المحتوى التي تمده:

_includes/
  layouts/
    base.njk      ← <head> with all SEO meta tags
    post.njk      ← extends base, adds BlogPosting schema
_data/
  site.js         ← sitewide SEO defaults

وسوم meta التي تحتاج إلى تنفيذها بنفسك، في الحد الأدنى:

  • <title> — فريد لكل صفحة
  • <meta name="description"> — فريد لكل صفحة
  • <link rel="canonical"> — لا يملك Eleventy وسمًا أساسيًا مدمجًا؛ أضفه صراحة
  • <meta name="robots"> — noindex لصفحات المسودة/المعاينة (ولصفحات الترقيم الرقيقة إن وجدت)
  • Open Graph — og:title وog:description وog:image وog:url وog:type
  • بطاقات Twitter/X — twitter:card وtwitter:title وtwitter:description وtwitter:image

تخطيط Nunjucks أدنى يسحب من <head> والتتابع:

<title>{{ title }} | {{ site.title }}</title>
<meta name="description" content="{{ description or site.description }}">
<link rel="canonical" href="{{ canonical }}">
<meta property="og:title" content="{{ title }}">
<meta property="og:image" content="{{ ogImage or site.defaultImage }}">
<meta name="twitter:card" content="summary_large_image">

مقارنة إضافات SEO

لا تحتاج إلى إضافة — يمنحك التخطيط الأساسي اليدوي مع تتابع البيانات سيطرة كاملة بلا تبعيات، ويفضل كثير من الممارسين ذلك تحديدًا. لكن يجدر معرفة إضافتين:

  • eleventy-plugin-seo (artstorm) — الأكثر نضجًا وانتشارًا. يصدر shortcode واحد {% seo %} (Liquid) / {% seo "" %} (Nunjucks) العنوان والوصف والوسم الأساسي وrobots وOpen Graph وبطاقة Twitter والمؤلف من كتلة إعداد (عنوان الموقع والوصف وعنوان URL والمؤلف ومعرف Twitter والصورة الافتراضية). كما يتعامل مع توجيهات الروبوت في الصفحات المرقمة وفاصل العنوان ووضع الحد الأدنى. التثبيت: npm install eleventy-plugin-seo.
  • eleventy-plugin-metagen (tannerdolby) — أكثر تفصيلًا، مع معاملات shortcode مسماة؛ ينشئ charset وviewport والعنوان والمؤلف والوصف والمولد وOG وTwitter Card والوسم الأساسي ووسوم CSS/JS.

القاعدة التقريبية: الإضافات تسهّل التنفيذ، لكنها لا تضيف إمكانات جديدة. كل ما تفعله يمكنك فعله في التخطيط الأساسي. استخدم واحدة إذا كنت تفضل عدم صيانة القالب المتكرر.

robots.txt

لا ينشئ Eleventy ملف robots.txt تلقائيًا. توجد طريقتان:

1 — Passthrough ثابت (الأبسط). ضع ملف robots.txt في المصدر وانسخه حرفيًا:

eleventyConfig.addPassthroughCopy("src/robots.txt");

2 — إنشاء بالقالب (للناتج الخاص بالبيئة — احجب كل شيء في staging واسمح به في الإنتاج):

---
permalink: /robots.txt
eleventyExcludeFromCollections: true
---
User-agent: *
{% if environment == "production" %}
Allow: /
Sitemap: {{ site.url }}/sitemap.xml
{% else %}
Disallow: /
{% endif %}

تذكر القاعدة العامة: Disallow يحجب الزحف لا الفهرسة — ووسم noindex في عنوان URL محجوب بالزحف لن تراه Google أبدًا.

إنشاء خريطة الموقع

ليست مدمجة أيضًا. الخيار الأكثر تحكمًا هو قالب يدوي — أنشئ sitemap.xml.njk مع permalink: /sitemap.xml وeleventyExcludeFromCollections: true، وكرر collections.all، واستبعد الصفحات، وأصدر إدخالات <loc> و<lastmod>:

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
  {% if not page.data.excludeFromSitemap %}
  <url>
    <loc>{{ site.url }}{{ page.url }}</loc>
    <lastmod>{{ page.date | dateToISO }}</lastmod>
  </url>
  {% endif %}
{% endfor %}
</urlset>

أو استخدم @quasibit/eleventy-plugin-sitemap (اضبط hostname؛ وهو يدعم أيضًا الروابط البديلة متعددة اللغات). وفي كلتا الحالتين، ضع للصفحات المساعدة eleventyExcludeFromCollections: true حتى لا تتسرب إلى الخريطة.

هناك نقطة ينبغي ضبطها بدقة: التكرار على collections.all يمر على عناصر المجموعة، ولا يضمن إنشاء الناتج. قد ينتمي قالب إلى مجموعة ولا يصدر عنوان URL — غالبًا لأن permalink مضبوط على false، أو لأن ملفًا للبيانات فقط لم يُقصد به أصلًا إنشاء صفحة. عضوية collections.all ليست دليلًا على أن العنصر يجب أن يدخل خريطة الموقع؛ افحص إدخالات <loc> المصيّرة مقابل الصفحات التي تتوقع فعلًا أن تكون قابلة للزحف. Evidence for this claim Collection membership does not by itself guarantee that an item emits a URL or belongs in the sitemap. Scope: Eleventy collections and permalink interaction. Confidence: high · Verified: Eleventy: Collections

تحسين الصور من أجل Core Web Vitals

HTML الموقع الثابت سريع، لكن الصور غير المحسنة ستظل تضر LCP وCLS. الإصلاح هو @11ty/eleventy-img، وفي v3 المسار الموصى به هو إضافة Image Transform التي تعالج كل وسم <img> في HTML المبني تلقائيًا — من دون حاجة إلى shortcode لكل صورة:

const { eleventyImageTransformPlugin } = require("@11ty/eleventy-img");

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
  formats: ["avif", "webp", "jpeg"],
  defaultAttributes: {
    loading: "lazy",
    decoding: "async",
  },
});

ما الذي يقدمه ذلك لـSEO:

  • إضافة width وheight تلقائيًا → تمنع تحرك التخطيط (CLS)
  • srcset بعروض متعددة → صور متجاوبة
  • <picture> مع بدائل AVIF وWebP وJPEG
  • لا تكبير للصورة

بالنسبة إلى صور البطل فوق الطية، تجاوز الإعداد الكسول الافتراضي حتى تُحمل فورًا:

<img src="hero.jpg" loading="eager" fetchpriority="high" eleventy:widths="800,1200">

الروابط الدائمة وعناوين URL النظيفة

الإعداد الافتراضي في Eleventy هو عناوين URL نظيفة مع شرطة مائلة لاحقة: about.njk → _site/about/index.html → /about/. تجاوز ذلك في front matter:

permalink: "/blog/{{ title | slugify }}/"

علامات مفيدة: يعالج permalink: false القالب للمجموعات لكنه يتخطى كتابته إلى القرص (مفيد لقوالب البيانات فقط)، ويعامل dynamicPermalink: false سلسلة permalink حرفيًا. الشيء الوحيد في SEO الذي يجب الانضباط فيه هو اتساق الشرطة المائلة اللاحقة — فخلط /page و/page/ يخلق بنفسه مشكلة محتوى مكرر.

يجدر قول ذلك صراحة لأنه يوقع الناس: permalink: false يمنع الناتج بالكامل — يُترجم الملف المصدر ويمكنه الاستمرار في تغذية المجموعات والبيانات، لكن لا تُكتب صفحة HTML ولا يوجد عنوان URL للزحف. ووجود ملف مصدر في مجلد المحتوى ليس دليلًا على أن صفحة مقابلة نُشرت؛ إذا غابت صفحة من البحث، افحص ناتج _site المبني قبل افتراض أنها مشكلة فهرسة لا permalink. Evidence for this claim A permalink value of false suppresses page output entirely, so a source file's existence is not proof of a crawlable page. Scope: Eleventy permalink output control. Confidence: high · Verified: Eleventy: Permalinks

SEO للترقيم

يقسم ترقيم Eleventy مجموعة إلى ملفات خرج. تكون الصفحة الأولى /blog/، ثم /blog/1/ و/blog/2/ وهكذا (ويمكن تخصيص ذلك عبر permalink). تحتاج كل صفحة في المجموعة إلى عنوان URL فريد وpagination.alias لإتاحة بيانات الصفحة. قرارات SEO هي:

  • الوسوم الأساسية. مدرستان: توجيه كل صفحة إلى الصفحة 1 (يجمع الإشارات لكنه يدفن محتوى الصفحات العميقة المشروع)، أو وسوم أساسية تشير إلى الصفحة نفسها بحيث يكون لكل صفحة وسم عنوانها — وهو النهج المفضل لدى Google في الوثائق الحالية. أستخدم الافتراضي الذاتي ما لم تكن الصفحات العميقة لا تحتوي فعلًا على ما يستحق الفهرسة.
  • rel="prev" / rel="next". أكدت Google في 2019 أنها لم تعد تستخدمهما إشارات ترتيب. وما زال بعض المواقع يضيفهما لمساعدة الزواحف على فهم بنية السلسلة؛ وإذا فعلت، فصلهما من pagination.href.previous وpagination.href.next.
  • noindex للصفحات الرقيقة. إذا كان محتوى الصفحات اللاحقة غير كافٍ، فأضف noindex (عبر حقل noindex عند استخدام eleventy-plugin-seo، أو يدويًا في الرأس).

البيانات المنظمة / JSON-LD

الأسلوب اليدوي أكثر مرونة: عرّف كائن schema في eleventyComputed أو ملف بيانات مجلد، ثم حوّله إلى سلسلة في التخطيط. الأنواع الأنظف لموقع محتوى هي Organization وWebSite على مستوى الموقع في التخطيط الأساسي، وBlogPosting وArticle لكل منشور، وBreadcrumbList إذا كانت لديك مسارات تنقل، وFAQPage لأقسام الأسئلة الشائعة. تقدم @quasibit/eleventy-plugin-schema shortcode لـBlogPosting وWebPage إذا كنت تفضل عدم كتابته يدويًا (وتتوقع تواريخ ISO 8601، فأنشئ مرشح تاريخ).

Eleventy v2 مقابل v3 — ما الذي تغير لـSEO

الإصدار v3 الحالي المستقر متمحور حول ESM: يحتاج ملف إعداد يستخدم require() الآن إلى امتداد .cjs، أو تضبط "type": "module" في package.json وتستخدم import. وما يزال CommonJS مدعومًا بالكامل — فقط كن متعمدًا. والفائدتان المرتبطتان بـSEO هما:

  • عمليات بناء من الصفر أسرع بنحو 38% في المواقع التي تتجاوز 500 صفحة → نشر أسرع وفهرس أحدث.
  • إضافة Image Transform هي الخيار الافتراضي — معالجة لاحقة تصريحية لكل <img>، تجعل تقديم صور متجاوبة ومستوفية لمتطلبات CLS أسهل من معالجة كل صورة يدويًا.

تحقق من ناتج الإنتاج، لا البناء المحلي فقط

كل ما سبق يتعلق بإتقان المصدر — تتابع البيانات والتخطيط والإضافات. لكن لا يثبت أي منه ما يُنشر فعلًا. فبناء محلي لـ_site (أو eleventy --serve) لا يخبرك بما يقدمه الإنتاج: المضيف والمسار اللذان تستخدمهما منصة النشر، وإعادات التوجيه التي تحقنها، والرؤوس التي تضبطها، أو ما إذا كان CDN/proxy يعيد كتابة شيء في الطريق. أكد أن إصدار Eleventy المثبت يطابق ما تختبره، ثم افحص الموقع المنشور مباشرة، لا ناتج البناء فقط:

  • HTML الخام — افحص مصدر عنوان URL الحي، لا _site/index.html فقط؛ وتأكد من وجود العنوان ووصف meta والوسم الأساسي وصحتها.
  • مضيف الوسم الأساسي المطلق — قد تُستخدم قيمة localhost أو site.url خطأً في الإنتاج إذا لم تُستبدل حسب البيئة.
  • XML لخريطة الموقع — اجلب /sitemap.xml الحية وتأكد من أنها تعمل وتستخدم مضيف الإنتاج وتسرد عناوين URL المتوقعة (راجع أعلاه أن عضوية المجموعة لا تضمن الإدخال).
  • الصفحات المحجوبة/المساعدة — افحص عينة من صفحات permalink: false وeleventyExcludeFromCollections: true لتتأكد من غيابها عن الموقع الحي، لا البناء المحلي فقط.
  • الأصول — يجب أن تحل CSS وJS والصور المشار إليها في HTML المبني على مضيف الإنتاج (ومن السهل تفويت عدم تطابق المسار النسبي والمطلق محليًا).
  • رموز الحالة وإعادات التوجيه — اطلب عناوين URL الحية مباشرة وأكد استجابات 200s حيث تتوقع 200s؛ فقواعد إعادة التوجيه في منصة النشر قد تحول صفحة أساسية بصمت إلى سلسلة 301 لا تظهر في بناء محلي.

تثبيت إضافة من طرف ثالث ليس دليلًا على صحة الناتج أيضًا — فهو يغير ما يُولد، لا ما تفعله بيئة نشر معينة به. تعامل معه كعنصر في قائمة فحص الإصدار، لا إعدادًا لمرة واحدة. Evidence for this claim Local build output does not by itself prove production hostnames, redirects, headers, or canonical behavior; the deployed artifact needs its own verification pass. Scope: Eleventy production deployment verification. Confidence: medium · Verified: Patrick Stox: Eleventy SEO

أخطاء SEO الشائعة في Eleventy

  • افتراض أن Eleventy «يتولى SEO» — فهو يتولى HTML؛ ووسوم SEO كلها عليك.
  • نسيان الوسم الأساسي تمامًا (لا يوجد مدمجًا).
  • نشر موقع بلا خريطة موقع لأنك افترضت أنها تلقائية.
  • ترك الصور غير المحسنة تلغي ميزة السرعة.
  • إنشاء شرطات مائلة لاحقة غير متسقة فتتولد عناوين URL مكررة.
  • استخدام Disallow في robots.txt لمحاولة إلغاء فهرسة صفحة (استخدم noindex بدلًا منه).
  • ترك صفحات المسودة/المعاينة قابلة للفهرسة لأنك لم تضع noindex على القسم.

لمعرفة موضع Eleventy بين المولدات الأخرى، راجع مركز Static Site Generators؛ ولنظرية الرسم التي تشرح لماذا يكون الناتج الثابت منخفض المخاطر، راجع مركز JavaScript SEO.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.