البيانات الوصفية (Metadata)
البيانات الوصفية هي ملخص لمحتوى الموقع وتُستخدم لإرفاق عنوان ووصف وصورة للموقع.
العنوان
علامة العنوان هي أحد أهم عناصر تحسين محركات البحث (SEO) لسببين رئيسيين:
أولاً، إنها ما يراه المستخدمون عند النقر للدخول إلى موقعك من نتائج البحث.
ثانياً، إنها أحد العناصر الرئيسية التي تستخدمها جوجل لفهم محتوى صفحتك. يُنصح باستخدام الكلمات المفتاحية في العنوان لأنها عادةً ما تؤدي إلى تحسين الترتيب في محركات البحث.
إليك مثالاً:
<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>تحتوي هذه الصفحة على جميع الكلمات المفتاحية الرئيسية وتجعلها جذابة للمستخدمين من خلال عرض قيمة واضحة: الخصومات!
الوصف
علامة الوصف الوصفية (meta description) هي عنصر آخر مهم في تحسين محركات البحث، لكنه أقل أهمية من العنوان. وفقًا لجوجل، لا يُؤخذ هذا العنصر في الاعتبار لأغراض الترتيب، لكنه قد يؤثر على معدل النقر في نتائج البحث.
استخدم علامة الوصف الوصفية لإكمال المعلومات في عنوانك. أضف المزيد من الكلمات المفتاحية هنا إذا كانت هناك كلمات لم تتسع في العنوان. ستظهر هذه الكلمات المفتاحية بخط عريض إذا كانت موجودة في بحث المستخدم.
مثال على علامة وصف وصفية في HTML:
<meta
name="description"
content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>هكذا تبدو في الصفحة عندما تكون جزءًا من صفحة نتائج محرك البحث (SERP):
مثال على جزء من صفحة نتائج البحث مع عنوان ووصف
في Next.js، نضع العنوان والوصف في مكون Head. هكذا قد تبدو علامات العنوان والوصف الوصفية في Next.js:
import Head from 'next/head';
function IndexPage() {
return (
<div>
<Head>
<title>
iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple
</title>
<meta
name="description"
content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
key="desc"
/>
</Head>
<h1>iPhones for Sale</h1>
<p>insert a list of iPhones for sale.</p>
</div>
);
}
export default IndexPage;يمكن استخدام مكون Head في أي صفحة في تطبيقك لوصف أو توفير معلومات عن محتوى الصفحة.
Open Graph
بروتوكول Open Graph، الذي طورته فيسبوك في الأصل، يقوم بتوحيد طريقة استخدام البيانات الوصفية في أي صفحة ويب. يمكنك تقديم القليل أو الكثير من المعلومات كما تريد، لكن جميع أجزاء Open Graph تتكامل معًا لإنشاء تمثيل للموقع المرفق به.
قد تستخدم شركات وسائل التواصل الاجتماعي الأخرى (مثل Pinterest، تويتر، LinkedIn، إلخ) أيضًا Open Graph لعرض بطاقات غنية عند مشاركة عنوان URL. لدى تويتر أيضًا علامات خاصة بـ بطاقات تويتر (Twitter Cards).
على الرغم من أن علامات Open Graph هذه لها الكثير من أوجه التشابه مع العلامات المتعلقة بـ SEO، إلا أنها لا توفر أي فائدة لترتيب محركات البحث، لكن لا يزال يُنصح باستخدامها لأن الأشخاص قد يشاركون محتواك على وسائل التواصل الاجتماعي أو أدوات المراسلة الخاصة مثل WhatsApp أو Telegram.
يمكنك إضافة علامات Open Graph عن طريق تعريف سمة property في العلامات الوصفية داخل مكون Head. على سبيل المثال:
import Head from 'next/head';
function IndexPage() {
return (
<div>
<Head>
<title>Cool Title</title>
<meta name="description" content="Checkout our cool page" key="desc" />
<meta property="og:title" content="Social Title for Cool Page" />
<meta
property="og:description"
content="And a social description for our cool page"
/>
<meta
property="og:image"
content="https://example.com/images/cool-page.jpg"
/>
</Head>
<h1>Cool Page</h1>
<p>This is a cool page. It has lots of cool content!</p>
</div>
);
}
export default IndexPage;وجود رابط قابل للمشاركة يقدم وصفًا وعنوانًا، جنبًا إلى جنب مع صورة تمثل محتوى الصفحة، ليس له تأثير مباشر على ترتيب SEO، لكنه يزيد بشكل غير مباشر من قابلية النقر على الرابط، مما سيؤدي في النهاية إلى زيادة عدد الزوار لموقعك.
البيانات المنظمة و JSON-LD
تسهل البيانات المنظمة فهم صفحاتك لمحركات البحث. على مر السنين، كانت هناك عدة مفردات قيد الاستخدام، لكن حاليًا المفردات الرئيسية هي schema.org.
وفقًا للموقع، فإن schema.org هي "نشاط تعاوني مجتمعي يهدف إلى إنشاء وصيانة وتعزيز مخططات للبيانات المنظمة على الإنترنت، وصفحات الويب، ورسائل البريد الإلكتروني، وما بعدها."
يمكن استخدام مفردات schema.org مع العديد من التشفيرات المختلفة، بما في ذلك RDFa، وMicrodata، وJSON-LD.
قد تعتمد محركات البحث المختلفة مفردات مختلفة ضمن schema.org، ولا يغطي أي محرك بحث جميع حالات الاستخدام الموصوفة في مفردات الموقع. تأكد من التحقق من المفردات المقبولة في كل حالة.
مثال على كيف قد تبدو صفحة منتج مع إضافة بيانات مخطط المنتج JSON-LD:
import Head from 'next/head';
function ProductPage() {
function addProductJsonLd() {
return {
__html: `{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Executive Anvil",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
"sku": "0446310786",
"mpn": "925872",
"brand": {
"@type": "Brand",
"name": "ACME"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Fred Benson"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/anvil",
"priceCurrency": "USD",
"price": "119.99",
"priceValidUntil": "2020-11-20",
"itemCondition": "https://schema.org/UsedCondition",
"availability": "https://schema.org/InStock"
}
}
`,
};
}
return (
<div>
<Head>
<title>My Product</title>
<meta
name="description"
content="Super product with free shipping."
key="desc"
/>
<script
type="application/ld+json"
dangerouslySetInnerHTML={addProductJsonLd()}
key="product-jsonld"
/>
</Head>
<h1>My Product</h1>
<p>Super product for sale.</p>
</div>
);
}
export default ProductPage;في هذا المثال، يتم ترميز البيانات كسلسلة نصية، ولكن يمكنك بسهولة تمرير البيانات إلى طريقة addProductJsonLd لجعلها ديناميكية بالكامل.
قراءة إضافية
- بروتوكول Open Graph: التوثيق
- جوجل: مقدمة إلى البيانات المنظمة
- جوجل: بيانات المنتج المنظمة
- جوجل: أداة اختبار النتائج الغنية