← Blog

ما هو Open Graph؟ دليل المبتدئين الكامل

يمكنك مشاركة رابط على وسائل التواصل الاجتماعي. المعاينة تبدو فظيعة. وإليك السبب — وكيف تقوم العلامات Open Graph بإصلاحها.

هل تريد أن ترى كيف تبدو روابطك فعليًا؟

تحقق من علامات Open Graph مجانًا باستخدام Proovd — الصق عنوان URL وشاهد المعاينة على X وLinkedIn وSlack وDiscord وWhatsApp وReddit قبل المشاركة.

إجابة سريعة

  • Open Graph عبارة عن مجموعة من علامات HTML الوصفية التي تتحكم في كيفية ظهور الروابط على وسائل التواصل الاجتماعي
  • العلامات الأساسية: og:title, og:description, og:image, og:url
  • بدون علامات OG، تخمن المنصات، ويكون تخمينها سيئًا
  • قم بتعيين علامات OG + علامات Twitter Card للتغطية الكاملة

ما هو Open Graph في الواقع

Open Graph هو بروتوكول اخترعه Facebook في عام 2010. قبل Open Graph، عندما قام شخص ما بمشاركة رابط على Facebook، كانت المعاينة غير متوقعة. Facebook سيمسح الصفحة بحثًا عن الصور والنصوص، وكانت النتيجة غالبًا عشوائية - في بعض الأحيان رمز مفضل صغير، وأحيانًا صورة عشوائية من الصفحة، وأحيانًا لا شيء على الإطلاق.

Facebook قال: "دعونا نمنح مشرفي المواقع طريقة قياسية لإخبارنا بما يجب عرضه." لقد قدموا مجموعة من العلامات الوصفية التي يمكن لأي موقع ويب إضافتها إلى HTML الخاص به. منصات أخرى – X، LinkedIn، Slack، Discord، WhatsApp، Reddit – اعتمدت نفس المعيار. اليوم، Open Graph هي اللغة العالمية لمعاينات الروابط على الإنترنت.

إنها ليست تقنية تقوم بتثبيتها. إنها مجرد علامات تعريف HTML في قسم بصفحتك. هذا كل شيء.

العلامات الأساسية Open Graph

يجب أن تحتوي كل صفحة تتم مشاركتها على وسائل التواصل الاجتماعي على العلامات الأربع التالية على الأقل:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

وإليك ما يفعله كل واحد:

هناك علامات اختيارية إضافية مثل og:type (عادةً "موقع ويب" أو "مقال")، og:site_name (اسم علامتك التجارية)، وog:locale (اللغة). لكن الأربعة المذكورة أعلاه هي الأكثر أهمية لمعاينات الارتباط.

كيف يعمل Open Graph - خطوة بخطوة

إليك ما يحدث عندما يقوم شخص ما بمشاركة رابط:

  1. يقوم شخص ما بلصق عنوان URL في X أو LinkedIn أو Slack أو Discord أو في أي مكان.
  2. يقوم روبوت النظام الأساسي بجلب عنوان URL ويقرأ HTML من الأعلى إلى الأسفل.
  3. يبحث عن og: العلامات في قسم .
  4. يقوم بإنشاء بطاقة معاينة باستخدام القيم og:title وog:description وog:image.
  5. يتم عرض البطاقة لأي شخص يرى الرابط المشترك.

إذا لم تعثر المنصة على علامات og:، فإنها ترجع إلى أساليبها الاستدلالية - مثل اختيار صور عشوائية، واستخدام العلامة </code>، وما إلى ذلك. وهذا السلوك الاحتياطي هو السبب وراء ظهور العديد من الروابط المشتركة بشكل فظيع.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph مقابل Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>أنشأ تويتر نظام العلامات الخاص به المسمى "Twitter Cards" قبل وجود Open Graph. Twitter Cards استخدم السمات <code>twitter:card</code> و<code>twitter:title</code> و<code>twitter:description</code> و<code>twitter:image</code> بدلاً من <code>og:</code> البادئات.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>اليوم، تدعم معظم المنصات كلا الأمرين. لكن X/Twitter لا يزال يفضل علامات <code>twitter:card</code> على علامات OG. لهذا السبب فإن أفضل الممارسات هي تعيين <strong>كلاهما</strong>:</p> <pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) --> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" /> <!-- Twitter/X (works on X/Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">لماذا هذا مهم لموقع الويب الخاص بك</h2> <p data-i18n="b.what-is-open-graph.35">إذا كنت تشارك المحتوى الخاص بك في أي مكان على وسائل التواصل الاجتماعي - وهو ما تفعله على الأرجح إذا كان لديك موقع ويب - فإن معاينات الارتباط الخاصة بك هي أول انطباع لك. تؤدي المعاينة المصممة جيدًا بعنوان واضح ووصف مقنع وصورة جيدة إلى زيادة معدلات النقر إلى الظهور بشكل كبير.</p> <p data-i18n="b.what-is-open-graph.36">المعاينة المعطلة - صورة مفقودة، أو عنوان مقطوع، أو وصف مشوه - تجعل المحتوى الخاص بك يبدو غير احترافي. يمر الناس عبره.</p> <p data-i18n="b.what-is-open-graph.37">العلامات Open Graph هي الفرق بين الاثنين. يستغرق إعدادها 5 دقائق ويكون لها تأثير غير متناسب على أداء المحتوى الخاص بك على وسائل التواصل الاجتماعي.</p> <h2 data-i18n="b.what-is-open-graph.38">قائمة مرجعية سريعة</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>أضف <code>og:title</code>، <code>og:description</code>، <code>og:image</code>، و <code>og:url</code> إلى كل صفحة</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>أضف <code>twitter:card</code> و <code>twitter:image</code> للتوافق مع X/Twitter</li> <li data-i18n="b.what-is-open-graph.41">اضبط حجم الصورة على 1200 × 630 بكسل</li> <li data-i18n="b.what-is-open-graph.42">استخدم عناوين URL المطلقة (https://...) لجميع مسارات الصور</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>اختبر باستخدام <a href="https://proovd.in/ar/">Proovd</a> لترى كيف تبدو صفحتك على جميع المنصات</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">الأسئلة المتداولة</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">هل أحتاج إلى علامات Open Graph إذا لم أشاركها على وسائل التواصل الاجتماعي؟</h3> <p data-i18n="b.what-is-open-graph.46">إذا لم تقم بمشاركة الروابط في أي مكان، فلن تحتاج إليها. ولكن إذا كان لديك موقع ويب وقمت بمشاركته ولو لمرة واحدة على وسائل التواصل الاجتماعي، فإن علامات OG ضرورية.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">هل تؤثر علامات Open Graph على تصنيفات Google؟</h3> <p data-i18n="b.what-is-open-graph.48">ليس مباشرة. لا تستخدم Google علامات OG كعامل تصنيف. ولكنها يمكن أن تؤثر على معدلات النقر إلى الظهور من نتائج البحث والمشاركات الاجتماعية، مما يؤثر بشكل غير مباشر على حركة المرور والرؤية.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">هل يمكنني تعيين علامات OG مختلفة لصفحات مختلفة؟</h3> <p data-i18n="b.what-is-open-graph.50">نعم. يجب أن تحتوي كل صفحة على علامات OG الخاصة بها والتي تتوافق مع محتواها. يجب أن يكون منشور المدونة الخاص بالكلاب og:title وog:image مختلفًا عن الصفحة المتعلقة بالقطط.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">مقالات ذات صلة</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/ar/blog/discord-link-preview-not-working">Discord رابط المعاينة لا يعمل؟ 7 إصلاحات للتجربة (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/ar/blog/how-to-add-open-graph-tags">كيفية إضافة Open Graph العلامات إلى أي موقع</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/ar/blog/open-graph-vs-twitter-card">Open Graph مقابل Twitter Card: ما الفرق؟</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/ar/blog/og-image-size-guide">Open Graph حجم الصورة: الدليل الكامل لعام 2026</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>تحقق من علامات Open Graph الخاصة بك في ثوانٍ</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>تحقق من علامات Open Graph مجانًا باستخدام <a href="https://proovd.in/ar/">Proovd</a> — الصق عنوان URL وشاهد المعاينة على X وLinkedIn وSlack وDiscord وWhatsApp وReddit.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>