تحكّم في كيفية معاينة صفحاتك على الشبكات الاجتماعية بواسطة Open Graph، واسعَ إلى النتائج الغنية بواسطة schema.org بصيغة JSON-LD.
افتح هذا الدرس في Kodokonحين يُشارَك رابط على شبكة اجتماعية أو في تطبيق مراسلة، يقرأ زاحف شيفرة HTML لبناء بطاقة المعاينة. يوجّه بروتوكول Open Graph تلك البطاقة: og:title وog:description وog:type وog:url، وقبل كل شيء og:image التي يجب أن تكون رابطًا مطلقًا (تتجاهل معظم المنصات المسارات النسبية). فخ من الواقع العملي: هذه الزواحف لا تنفّذ JavaScript. إذا كانت وسومك تُحقن من جانب العميل بواسطة إطار عملك، فستكون المعاينة فارغة؛ يجب أن تكون حاضرة في شيفرة HTML المقدَّمة أوليًا (التصيير من الخادم أو التوليد الساكن).
<meta property="og:title"
content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
content="https://example.com/cafe-filtre">
<meta property="og:image"
content="https://example.com/cover-1200.jpg">
<meta property="og:description"
content="Ratios and techniques for a clean cup.">إضافتان تُكملان الأساس. <link rel="canonical"> تعيّن الرابط المرجعي حين تكون الصفحة قابلة للوصول من عدة عناوين (معاملات التتبّع، الترقيم): إنه دفاعك ضد المحتوى المكرَّر. ثم وسوم Twitter Cards: تعود المنصة إلى Open Graph للمحتوى، لكن twitter:card لا تزال ضرورية لاختيار صيغة العرض، ولا سيما summary_large_image.
<link rel="canonical"
href="https://example.com/cafe-filtre">
<meta name="twitter:card"
content="summary_large_image">تصف البيانات المهيكلة في schema.org معنى محتواك لمحركات البحث: مقال، منتج، وصفة، مسار تنقّل، أسئلة شائعة. توجد ثلاث صياغات (microdata وRDFa وJSON-LD)، لكن Google توصي بـ JSON-LD: كتلة مكتفية بذاتها داخل <script type="application/ld+json">، منفصلة عن الترميز البصري، ومن ثمّ سهلة التوليد والصيانة. هذا الترميز هو ما يجعل صفحتك مؤهّلة للنتائج الغنية: نجوم التقييم، والأسعار، وتواريخ الفعاليات مباشرةً في صفحة النتائج.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "The filter coffee guide",
"datePublished": "2026-05-12",
"author": {
"@type": "Person",
"name": "Ana Costa"
}
}
</script>