يمكنك التأثير في طريقة ظهور موقعك الإلكتروني عند مشاركته عبر وسائل التواصل الاجتماعي من خلال إضافة بضعة أسطر من الرمز إلى كل صفحة. ويمكن أن يساعد ذلك في جذب عدد أكبر من المستخدمين إلى موقعك الإلكتروني من خلال توفير معاينات تتضمّن معلومات أكثر ثراءً مما قد تكون متاحة لولا ذلك.
يمكنك التأثير في طريقة ظهور موقعك الإلكتروني عند مشاركته على وسائل التواصل الاجتماعي من خلال إضافة بضعة أسطر من الرموز إلى كل صفحة. ويمكن أن يساعد ذلك في جذب عدد أكبر من المستخدمين إلى موقعك الإلكتروني من خلال توفير معاينات تتضمّن معلومات أكثر ثراءً مما قد تكون متاحة لولا ذلك.
ملخّص
- استخدِم بيانات schema.org الجزئية لتقديم عنوان الصفحة ووصفها وصورة إلى Google+.
- استخدم بروتوكول Open Graph (OGP) لتوفير عنوان الصفحة ووصفها وصورة لـ Facebook.
- يمكنك استخدام بطاقات Twitter لتوفير عنوان الصفحة ووصفها وصورة ومعرّف Twitter على Twitter.
يمكنك التأثير في طريقة ظهور موقعك الإلكتروني عند مشاركته على وسائل التواصل الاجتماعي من خلال إضافة بضعة أسطر من الرموز إلى كل صفحة. يمكن أن يساعد ذلك في زيادة التفاعل من خلال توفير معاينات بمعلومات أكثر ثراءً مما سيكون متاحًا لولا ذلك. فبدونه، لن توفر مواقع التواصل الاجتماعي سوى المعلومات الأساسية، بدون صور أو معلومات أخرى مفيدة.
من وجهة نظرك، أيهما يزداد احتمال النقر عليه؟ ينجذب الأشخاص إلى الصور ويشعرون بمزيد من الثقة أنهم سيحبون ما يجدونه عندما تكون لديهم معاينة مسبقة.
عندما يريد شخص ما على إحدى الشبكات الاجتماعية مشاركة موقع الويب الخاص بك مع أصدقائه، فمن المحتمل أن يضيف بعض الملاحظات التي تشرح مدى روعته، ويشاركه معك. لكن وصف موقع الويب يميل إلى أن يكون مرهقًا ويمكن أن يفوّت الموضوع من وجهة نظر مالك الصفحة. تفرض بعض الخدمات قيودًا على عدد الأحرف التي يمكن للمستخدمين إدخالها في الملاحظة.
من خلال إضافة البيانات الوصفية المناسبة إلى صفحاتك، يمكنك تبسيط عملية المشاركة للمستخدمين من خلال توفير عنوان ووصف وصورة جذّابة. هذا يعني أنه ليس عليهم قضاء وقت ثمين (أو أحرف) في وصف الرابط.
استخدام schema.org + البيانات الجزئية لتوفير مقتطفات منسقة على +Google
تستخدِم برامج الزحف العديد من الطرق لتحليل صفحة وفهم محتواها. وباستخدام microdata ومفردات schema.org، تساعد مواقع التواصل الاجتماعي ومحركات البحث في فهم محتوى الصفحة بشكل أفضل.
وفي ما يلي مثال لذلك:
<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Enjoy fireworks</h1>
<p itemprop="description">Fireworks are beautiful.
This article explains how beautiful fireworks are.</p>
<img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>
على الرغم من أنّ معظم بيانات التعريف مضمَّنة في قسم العنوان في صفحة الويب، تبقى البيانات الجزئية في المكان الذي يتوفّر فيه السياق.
إضافة itemscope لتحديد نطاق البيانات الجزئية
من خلال إضافة itemscope، يمكنك تحديد العلامة على أنها كتلة من المحتوى حول عنصر معين.
أضِف itemtype لتحديد نوع موقعك الإلكتروني.
ويمكنك تحديد نوع السلعة باستخدام السمة itemtype مع السمة itemscope. يمكن تحديد قيمة itemtype وفقًا لنوع المحتوى على صفحة الويب. من المفترض أن تتمكن من العثور على نص ذي صلة
في هذه الصفحة.
أضِف itemprop لوصف كل عنصر باستخدام مفردات schema.org.
تحدّد itemprop سمات itemtype في النطاق. لتوفير بيانات وصفية لمواقع التواصل الاجتماعي، تكون قيم itemprop النموذجية هي name وdescription وimage.
التحقق من صحة المقتطفات المنسّقة
للتحقق من صحة المقتطفات المنسّقة على +Google، يمكنك استخدام أدوات مثل:
- أداة اختبار البيانات المنظَّمة - أدوات مشرفي المواقع
استخدام بروتوكول Open Graph (OGP) لتوفير مقتطفات منسّقة على Facebook
يزوّد بروتوكول Open Graph (OGP) Facebook ببيانات التعريف اللازمة لإتاحة وظائف صفحات الويب نفسها التي تعمل بها كائنات Facebook الأخرى.
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<style>
body {
margin: 2em;
}
</style>
<meta property="og:title" content="Enjoy Fireworks">
<meta property="og:description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<meta property="og:image"
content="https://developers.google.com/web/imgs/fireworks.jpg">
<meta property="og:url"
content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
<meta property="og:type" content="website">
وعندما يتم تضمين هذه البيانات الوصفية في قسم العنوان في صفحتك، فإنها توفر معلومات مقتطف منسق عند مشاركة الصفحة.
استخدام علامات meta المسماة og: والمضمّنة في مساحات الاسم لوصف البيانات الوصفية
تتكوّن العلامة meta من السمة property والسمة content.
قد تأخذ الخصائص والمحتوى القيم التالية:
| الموقع | المحتوى |
|---|---|
og:title |
عنوان صفحة الويب. |
og:description |
وصف صفحة الويب. |
og:url |
تمثّل هذه السمة عنوان URL الأساسي لصفحة الويب. |
og:image |
عنوان URL لصورة مرفقة بالمشاركة المنشورة. |
og:type |
سلسلة تشير إلى نوع صفحة الويب. يمكنك العثور على موقع مناسب لصفحتك على الويب هنا. |
توفّر هذه العلامات الوصفية معلومات دلالية لبرامج الزحف من المواقع الإلكترونية الاجتماعية، مثل Facebook.
مزيد من المعلومات
لمعرفة المزيد من المعلومات حول الأشياء التي يمكنك إرفاقها بالمشاركة على Facebook، انتقل إلى موقع بروتوكول Open Graph الرسمي.
التحقق من صحة المقتطفات المنسّقة
للتحقق من صحة الترميز على Facebook، يمكنك استخدام أدوات مثل:
استخدام بطاقات Twitter لتوفير مقتطفات منسقة على Twitter
إنّ بطاقات Twitter هي إضافة إلى بروتوكول Open Graph المنطبق على Twitter. وهي تتيح لك إضافة مرفقات الوسائط، مثل الصور والفيديوهات، إلى التغريدات باستخدام رابط يؤدي إلى صفحة الويب. بإضافة البيانات الوصفية المناسبة، ستُضاف إلى التغريدات التي تتضمّن روابط تؤدي إلى صفحتك بطاقة تتضمّن التفاصيل الغنيّة بصريًا التي أضفتها.
استخدام العلامات الوصفية التي تشمل مساحة اسم twitter: لوصف البيانات الوصفية
لضمان عمل بطاقة Twitter، يجب أن تتم الموافقة على نطاقك وأن يحتوي على العلامة الوصفية twitter:card كسمة name بدلاً من السمة property.
وفي ما يلي مثال بسيط:
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<style>
body {
margin: 2em;
}
</style>
<meta property="og:title" content="Enjoy Fireworks">
<meta property="og:description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<meta property="og:image"
content="https://developers.google.com/web/imgs/fireworks.jpg">
<meta property="og:url"
content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="agektmr">
من خلال تعيين معرّف Twitter لقيمة twitter:site، يعمل Twitter على تضمين هذه المعلومات في المشاركة المنشورة ليتمكن الأشخاص من التفاعل بسهولة مع مالك الصفحة.
مزيد من المعلومات
لمزيد من المعلومات حول بطاقات Twitter، يمكنك الانتقال إلى:
التحقق من صحة المقتطفات المنسّقة
للتحقّق من صحة الترميز، يوفّر Twitter ما يلي:
أفضل الممارسات
في ظل جميع الخيارات الثلاثة، ننصحك بتضمين كل الخيارات في صفحة الويب. وفي ما يلي مثال لذلك:
<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
<!-- define microdata scope and type -->
<head itemscope itemtype="http://schema.org/Article">
<title>Social Site Example</title>
<!-- define ogp and itemprop of microdata in one line -->
<meta property="og:title" itemprop="name" content="Enjoy Fireworks">
<!-- define ogp image -->
<meta property="og:image"
content="https://developers.google.com/web/imgs/fireworks.jpg">
<!-- use link[href] to define image url for microdata -->
<link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
<!-- define ogp and itemprop of microdata in one line -->
<meta property="og:url"
content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
<!-- define ogp type -->
<meta property="og:type" content="website">
<!-- define twitter cards type -->
<meta name="twitter:card" content="summary_large_image">
<!-- define site's owner twitter id -->
<meta name="twitter:site" content="agektmr">
<!-- define description for ogp and itemprop of microdata in one line -->
<meta property="og:description" itemprop="description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<!-- general description (separate with ogp and microdata) -->
<meta name="description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<style>
body {
margin: 2em;
}
</style>
</head>
لاحظ أن البيانات الجزئية وOGP يتشاركان بعض الترميز:
- يقع "
itemscope" في علامةhead. - تتم مشاركة
titleوdescriptionبين البيانات الجزئية وOGP. - يستخدم
itemprop="image"العلامةlinkمع السمةhrefبدلاً من إعادة استخدام العلامةmetaمعproperty="og:image".
أخيرًا، احرص على التأكد من أنّ صفحة الويب تظهر كما هو متوقع على كل موقع من مواقع التواصل الاجتماعي قبل نشرها.