أهلًا و سهلًا بكـ يشرفنا تسجيلك و مشاركتك معنا .
.png)
.png)
.png)
|
||||||
 |
|
|
أدوات الموضوع | انواع عرض الموضوع |
|
#1
08-05-2015, 10:54 PM
|
|||
|
|||
اجعل موقعك مُنسق في جوجل و اجعل موقعك في أوائل نتائج محركات البحث حصريا
سوف نتكلم عن مجموعة أكواد تُسمي Schema Markup .. هل سمعت بها من قبل ؟ تابع معي سوف نقوم بشرح كل شئ فيها بالتفصيل ..
ماذا يكون Schema Markup و ماذا يفعل ؟ اقتباس اجعل موقعك مُنسق في جوجل و اجعل موقعك في أوائل نتائج محركات البحث حصريا لترايدنت - مكتبة ترايدنت التعليمية أن Schema Markup او السكيما عبارة عن مجموعة أكواد HTML تٌقدم موقعك بشكل أفضل و أسرع لجميع محركات البحث .. و تقوم بإعطاء جميع معلومات موقعك بشكل سليم و صحيح 100% لمحركات البحث . و أيضا تقوم بتحسين شكل موقعك في محركات البحث . ثبت بالدليل القاطع أن عدد النقرات التى تحصل عليها من محرك البحث كفيلة بدفعك للصفحة الأولى فى جوجل خلال أيام إن لم يكن ساعات قليلة ! .. لذا سبيلك نحو تحقيق عدد ضغطات أكبر من المواقع المنافسة لك فى محركات البحث هو تحسين شكل نتائج موقعك وهذا يتم عن طريق ما يعرف بإسم Schema Markup . و السكيما تقوم محركات البحث المُختلفة مثل Google, Yahoo, Bing و ايضا محرك البحث الروسي Yandex بالإعتماد علي السكيما فى قراءة محتوى الصفحات على الإنترنت وعرض معلومات أكثر عنها للمستخدم . دعنى أريك بعض الأمثلة لكود سكيما :- كود Schema review  يستخدم هذا الكود في وضع تقييم للموضوع كما موضح بالصورة التي بالاعلي .. و يمكنك استخدامها في موضوع عن (لعبة , برنامج , نظام تشغيل .. الخ ) . كود Schema Event  سوف نستخدم هذا الكود لنشر معلومات عن اسم و موعد و مكان انعقاد المناسبة كما موضح بالصورة التي بالاعلي . كود Schema Product  يستخدم هذا الكود للتعريف بإسم المنتج الذى تقوم ببيعه وسعره ويمكنك أيضاً إضافة التقييم عن طريق مراجعات المستخدمين . كود Schema Movie  يستخدم هذا الكود لإظهار المعلومات المتعلقة بالأفلام من الإخراج والممثلين وتقييم المشاهدين ليه إن أراد الموقع إظهار ذلك . كود Schema Organization  يستخدم هذا الكود لإظهار عنوان شركتك أو مؤسستك على جوجل بجانب خريطة خاصة بمكانك زائد مراجعات عملائك على صفحتك على Google Business . ويوجد الكثير والكثير من الـ Schema markups الأخرى مثل :- - توصيل الطلبات - رحلات الطيران - الوظائف المتاحة - حجوزات المطاعم - الأدوية الطبية وقائمة كبيرة تطول إلى أكثر من 500 كود Schema إطلع عليهم من هنا شرح طريقة تضيف كود السكيما المناسب لموقعك ؟ إذا انت من مستخدمين سكربت الـ Wordpress فإن العملية بسيطة نوعاً ما :- تابع معي أولاً : قم بتنصيب هذا الـ Plugin من داخل لوحة التحكم 1 . عندما تقوم بالضغط على أيقونة SC يمكنك إضافة كود سكيما لموضوعك أو لصفحتك  2 . قم بإختيار نوع الـ Schema التى ستستخدمها وإملئ باقى البيانات المطلوبة  3 . بعد الإنتهاء سيظهر لك كود الـ Schema ويمكنك إضافته للـ HTML الخاص بصفحتك  أما إذا كان لديك مدونة أو موقع يستخدمون منصة غير الوورد بريس سوف تستخدم كود الـ Schema وتضيفه لصفحة موقعك بشكل يدوى لنفترض أن لديك موقع عن الطبخ كما هو موضح فى الصورة التالية :-  ستقوم بإضافة كافة الأكواد التابعة لـ Schema Recipe وهى كالتالى :- - cookTime - cookingMethod - ingredients - nutrition - prepTime - recipeCategory - recipeCuisine - recipeInstructions - recipeYield - totalTime وعند تجميعها ستصبح كما الكود الظاهر أمامك سوف تقوم بوضعه داخل كود الـ HTML الخاص بصفحتك مع تغيير ما يلزم بما يناسبك . رمز Code: <div itemscope itemtype="http://schema.org/Recipe"> <span itemprop="name">Mom's World Famous Banana Bread</span> By <span itemprop="author">John Smith</span>, <meta itemprop="datePublished" content="2009-05-08">May 8, 2009 <img itemprop="image" src="bananabread.jpg" alt="Banana bread on a plate" /> <span itemprop="description">This classic banana bread recipe comes from my mom -- the walnuts add a nice texture and flavor to the banana bread.</span> Prep Time: <meta itemprop="prepTime" content="PT15M">15 minutes Cook time: <meta itemprop="cookTime" content="PT1H">1 hour Yield: <span itemprop="recipeYield">1 loaf</span> <div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Nutrition facts: <span itemprop="calories">240 calories</span>, <span itemprop="fatContent">9 grams fat</span> </div> Ingredients: - <span itemprop="ingredients">3 or 4 ripe bananas, smashed</span> - <span itemprop="ingredients">1 egg</span> - <span itemprop="ingredients">3/4 cup of sugar</span> ... Instructions: <span itemprop="recipeInstructions"> Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the flour last. Pour the mixture into a loaf pan and bake for one hour. </span> 140 comments: <meta itemprop="interactionCount" content="UserComments:140" /> From Janel, May 5 -- thank you, great recipe! ... </div> ملحوظة : يمكنك أن تطلب من المُبرمج أن يضيف هذه الخانات بشكل أوتوماتيكى فى لوحة تحكم موقعك حتى تقوم بإستخدام الـ Schema بشكل أوتوماتيكى فيما بعد . أما إذا كنت تريد أن تُظهر مراجعات وتقييم الزوار لمنتج أو برنامج أو خدمة داخل موقعك أن تضيف بلوك خاص بالتعليقات به خاصية تقييم الوصفة عن طريق النجوم . يُمكنك فعل هذا عن طريق اللجوء إلى مبرمج متخصص والتنويه عليه على أن يقوم بعمل Markup للتعليقات والتقييم بإستخدام Schema Aggregate rating أو يُمكنك إضافة هذا الكود مباشرة إلى الـ HTML الخاص بصفحتك مع تغيير ما يلزم ولكننى لا أنصحك بالتلاعب بأكواد الـ Schema قم بتغيير القيم ذات اللون الأحمر فى الكود التالى بما يناسب موقعك مع مراعاة توضيح توضيح نوع الـ Schema عن طريق تغيير الرابط الأول فى الكود برابط الـ Schema المناسبة لما تقدمه داخل موقعك على سبيل المثال الرابط الموجود حالياً هو رابط Product أى منتج أو برنامج إذا كنت تقدم محتوى أخر عليك إستبدال هذا الرابط بما يناسب محتوى صفحتك من صفحة أكواد السكيما على موقع Schema.org رمز Code: <div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">ورشة لونك</span><br> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> Rating: <span itemprop="ratingValue">5</span><br> Votes: <span itemprop="ratingCount">50</span><br> Reviews: <span itemprop="reviewCount">60</span> </div> </div> بعد تطبيق كل شئ بشكل صحيح يُفترض أن تظهر لك النتيجة كالتالى :-  ولكن كما نوهت من قبل ... "التلاعب بأكواد السكيما فى محتوى غير متعلق بالكود يؤدى إلى عقابك من محركات البحث" أما إذا كان لديك موقع عن البرامج فيجب عليك إستخدام Schema Software ، فى حالة إستخدامك للورد بريس الأمر بسيط كما أشرنا من قبل فسوف تلجئ إلى الـ Plugin أما فى حالة إستخدامك لأى منصة إخرى سيتوجب عليك القيام بهذا الأمر بشكل يدوى لكى يظهر البرنامج بالتقييم وعدد التقييمات التى قام بها الزوار كما فى الصورة التالية  عليك أن تقوم بإعداد كود Schema Software أو نسخ الكود التالى إلى صفحة البرنامج مع تغيير ما يلزم بما يناسب موقعك رمز Code: <div itemscope itemtype="http://schema.org/SoftwareApplication"> <span itemprop="name">Angry Birds</span> - REQUIRES <span itemprop="operatingSystem">ANDROID</span> <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/> RATING: <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">4.6</span> ( <span itemprop="ratingCount">8864</span> ratings ) </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> Price: $<span itemprop="price">1.00</span> <meta itemprop="priceCurrency" content="USD" /> </div> </div> كما أشرت فى البداية هنالك العديد من أكواد الـ Schema المختلفة التى إن أردنا شرحها جميعاً علينا أن نخصص لها موقع كامل ... لذا أنصحك بمتابعة المصادر التالية :- Schema.org Google Rich Snippets وبعد الإنتهاء من إضافة أى كود من أكواد الـ Schema قم بالتأكد من نجاح تركيبه عن طريق أداة Structured data testing tool وإتبع الصور :-  ثم أضف رابط صفحتك داخل تاب " جلب عنوان URL " وإضغط على زر الجلب والتحقق  إذا كنت قد ضمّنت كود الـ Schema بشكل صحيح داخل صفحتك سيظهر لك على اليسار مع علامة صح باللون الأخضر كما ترى فى الصورة . أخيراً وليسَ أخراً كَيف تُظهر محرك بحث داخلى مع نتائج موقعك فى محركات البحث كما فى الصورة التالية  تستخدم هذه الخاصية من قبل بعض المواقع فى عمليات البحث الداخلية فقط على موقعك الشخصى ، تركيب هذا الكود أمر بسيط ولكن الأهم هو العمل على إضافة محتوى بشكل دورى حتى يفعل جوجل " صندوق البحث " بجانب نتائج موقعك . سوف تقوم بنسخ الكود التالى وإضافته أسفل تاج <head> فى صفحتك الرئيسية الـ Homepage فقط . رمز Code: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "https://www.seos7.com/", "potentialAction": { "@type": "SearchAction", "target": "http://www.yourcolor.net/search?q={إبحث من هنا ...}", "query-input": "required name=إبحث من هنا ..." } } </script> قم بتغيير الرابط المقابل لكلمة "url/" برابط موقعك وقم بتغيير الرابط المقابل لكلمة " target " برابط إجراء عمليات البحث داخل موقعك على سبيل المثال فى سيو صح سوف نستخدم هذا الرابط :- رمز Code: http://www.yourcolor.net/search?q={إبحث من هنا ...} Placeholder مع تغيير الكلمة المظللة باللون الأخضر بالكلمة التى تستخدمها كـ فى صندوق البحث الخاص بموقعك كما فى الصورة التالية  Query input tag والتأكد من نقل نفس الكلمة إلى وبعد الإنتهاء من إضافة الكود عليك أن تنتظر عدة أيام حتى يُظهر جوجل صندوق البحث الخاص بموقعك بجانب صفحتك الرئيسية فى محركات البحث هنالك عدة أدوات تساعدك على إنشاء Schema أو ما يعرف بإسم Microdata بشكل أوتوماتيكى عن طريق ملئ الخانات المطلوبة والحصول على Code مثل Ranksider و Clixlogix يمكنك إستخدامهم فى تهيئة بعض أكواد الـ Schema بشكل سريع وسهل . بعض التوضيحات المهمة لك الخاصة بالـ Schema Markups س . هل يجب عليك أن تضيف أكواد الـ Schema داخل موقعك ؟ - يفضل أن تكون كل صفحة داخل موقعك مُعرفة بأكواد Schema ليس بغرض تحسين شكل نتائجك فى محركات البحث ولكن بغرض تسهيل عملية تصنيف محتوى موقعك وترتيبه من روبوتات جوجل س . هل تساعد الـ Schema فى تحسين ترتيبى فى محركات البحث ؟ - نعم تساعد الـ Schema الصحيحة الغير متلاعب بها فى تحسين ترتيبك فى محركات البحث بشكل غير مباشر عن طريق زيادة نسبة الـ CTR الخاصة بنتائجك فى محركات البحث . س . ما هو الضرر الذى سيعود علي إذا تلاعبت بأكواد Schema ؟ - بمجرد تلقى جوجل بعض البلاغات ضد نتائج موقعك التى تتلاعب بأكواد السكيما سوف يقوم بعمل de-index لصفحتك ومحوها من أرشيف جوجل لأنها تظهر بعض الأكواد المغلوطة بغرض جلب المزيد من الزيارات ودعنى إخبرك أن هذا الأمر قد يعرض حسابك فى جوجل أدسنس للخطر . س . كيف يُمكننى تعلم المزيد عن أكواد الـ Schema ؟ - يُمكنك مشاهدة سلسلة فيديوهات جوجل عن الـ Rich snippets و مراجعة دليل Schema و قراءة المزيد عن ما يُعرف بإسم " Semantic web " . و بالتوفيق .. المصدر
__________________
|
|
|
|
العرض العادي
