كيفية تصدير البيانات الوصفية من MDX لتحسين محركات البحث في Next.js
بيانات MDX الوصفية هي كيف يخبر كل مقال Next.js — ومحركات البحث — بعنوانه ووصفه ورابطه الأساسي.
تقني١٥ يناير ٢٠٢٦٤ دقائق قراءة
تصدير البيانات الوصفية من MDX يعني إعلان كائن metadata في الملف حتى يقود Next.js وسوم SEO من المحتوى نفسه. مصدر واحد للقارئ وللآلة.
الطريقة
أضف كائن metadata مُصدَّراً أعلى ملف MDX:
<span class="sh__line"><span class="sh__token--keyword" style="color:var(--sh-keyword)">export</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--keyword" style="color:var(--sh-keyword)">const</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">metadata</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--sign" style="color:var(--sh-sign)">=</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--sign" style="color:var(--sh-sign)">{</span></span>
<span class="sh__line"><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">title</span><span class="sh__token--sign" style="color:var(--sh-sign)">:</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--string" style="color:var(--sh-string)">عنوان المقال</span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--sign" style="color:var(--sh-sign)">,</span></span>
<span class="sh__line"><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">description</span><span class="sh__token--sign" style="color:var(--sh-sign)">:</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--string" style="color:var(--sh-string)">وصف مختصر</span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--sign" style="color:var(--sh-sign)">,</span></span>
<span class="sh__line"><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">authors</span><span class="sh__token--sign" style="color:var(--sh-sign)">:</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--sign" style="color:var(--sh-sign)">[</span><span class="sh__token--sign" style="color:var(--sh-sign)">{</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">name</span><span class="sh__token--sign" style="color:var(--sh-sign)">:</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--string" style="color:var(--sh-string)">Author</span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--sign" style="color:var(--sh-sign)">,</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">url</span><span class="sh__token--sign" style="color:var(--sh-sign)">:</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--string" style="color:var(--sh-string)">https://example.com</span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--sign" style="color:var(--sh-sign)">}</span><span class="sh__token--sign" style="color:var(--sh-sign)">]</span><span class="sh__token--sign" style="color:var(--sh-sign)">,</span></span>
<span class="sh__line"><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">alternates</span><span class="sh__token--sign" style="color:var(--sh-sign)">:</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--sign" style="color:var(--sh-sign)">{</span></span>
<span class="sh__line"><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--identifier" style="color:var(--sh-identifier)">canonical</span><span class="sh__token--sign" style="color:var(--sh-sign)">:</span><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--string" style="color:var(--sh-string)">/blog/my-article</span><span class="sh__token--string" style="color:var(--sh-string)">'</span><span class="sh__token--sign" style="color:var(--sh-sign)">,</span></span>
<span class="sh__line"><span class="sh__token--space" style="color:var(--sh-space)"> </span><span class="sh__token--sign" style="color:var(--sh-sign)">}</span><span class="sh__token--sign" style="color:var(--sh-sign)">,</span></span>
<span class="sh__line"><span class="sh__token--sign" style="color:var(--sh-sign)">}</span></span>
<span class="sh__line"></span>ماذا يفعل Next.js
عند التصيير يغذي التصدير مسار Metadata في App Router. تحصل على عنوان ووصف ديناميكيين دون صف قاعدة بيانات منفصل لكل حقل.
| الحقل | لماذا يهم |
|---|---|
title | نتائج البحث وعلامة التبويب |
description | المقتطف / سياق المشاركة |
canonical | التحكم في التكرار |
| JSON-LD | فهم آلي أغنى |
البيانات الوصفية أساسية. الكتابة الواضحة والفائدة الحقيقية هي الاستراتيجية.
قائمة تحقق
- وصف فريد لكل مقال
- رابط أساسي لكل مقال
- بيانات منظمة (Article و FAQ عند الحاجة)
- حقول Open Graph للمشاركة
publishedTimeلصفحات المقال
تصدير البيانات الوصفية من MDX بسيط ويستحقه كل مقال. يبقي SEO بجانب الكلمات — حيث ينتمي.
أسئلة شائعة
كائن metadata مُصدَّر من ملف MDX يستخدمه Next.js للعنوان والوصف والرابط الأساسي والمؤلفين وحقول Open Graph — بنفس شكل Metadata API.
About the author
mosh
mosh is a product designer and design engineer working with design systems, LLM-powered prototypes, agent-safe interfaces, production UI, and automated workflows.
Keep reading
- The last 20% is the whole point
AI nails the first 80% of a product in minutes. The last 20% — hierarchy, edge cases, copy, point of view — is where taste lives, and it is still your job.
- Somebody still has to care
AI can write your code, but it cannot care. The human filter — nitpicking, obsessing, fixing — is what makes an app memorable.
- AI Design Engineering: How Product Teams Ship Faster Without Losing Quality
A practical guide to LLM workflows, agent-safe design systems, production UI, and human quality gates.