🥣 🐌 😆 تحسين محركات البحث الحديثة: قصص AMP 👸🏿 🧘🏻 👩🏿‍🌾

نعم ، هذا عنوان هجين ، روسي-إنجليزي ... لذا دعونا نوضح شيئًا على الفور. لذا ، إذا كان تحسين محركات البحث مصطلحًا معروفًا (في الدوائر الضيقة) ، فإن AMP ليست كذلك. تم الإعلان عن Accelerated Mobile Pages من قبل Google في عام 2015 (انظر مقالة ويكيبيديا ) كأداة لتصفح صفحات الويب بسرعة على الهواتف المحمولة. بمرور الوقت ، تحولت AMP إلى إطار عمل يسمح لك بإنشاء صفحات لأي مواقع (وليس فقط أجهزة الجوال) ، ووسعت "تسمياتها": في الواقع مواقع (مواقع AMP ) ، قصص ( قصص AMP ؛ موضوع هذه المقالة) ، وحدات إعلانية ( إعلانات AMP) ورسائل البريد الإلكتروني ( AMP email ). وراء كل هذا ، كما ذكر أعلاه ، هو Google ، وإذا كنت مهتمًا بالترويج للمواقع في محرك البحث هذا - فسيكون من المفيد معالجة موضوع AMP مع الاهتمام الواجب. ولكن أولاً ، دعنا نرى كيف تبدو قصص AMP هذه ( قصص AMP ؛ تحديث: اعتبارًا من 1 مايو 2020 ، والتي أعيدت تسميتها إلى قصص الويب ) ، ثم نقرر ما إذا كنا بحاجة إليها ، وإذا اتضح أننا بحاجة إليها ، فسوف نفكر في كيفية القيام بذلك.

مثال لقصة AMP

انقر على رمز الاستجابة السريعة لرؤية الشكل الذي تبدو عليه قصة AMP على موقع حقيقي من جهاز كمبيوتر مكتبي أو كمبيوتر محمول ، أو امسحه ضوئيًا لعرض نفس الصفحة من جهاز محمول (هاتف ذكي و / أو جهاز لوحي):

ليس هذا الإعلان.

. AMP- «» . , , — , — , .

على الكمبيوتر أو الكمبيوتر المحمول ، يجب أن تشاهد هذه "القصة":

تاريخ الكمبيوتر

على جهاز لوحي وهاتف ذكي ، هذا:

التاريخ على جهاز محمول

لمن هذا

يعد استخدام قصص AMP أمرًا جيدًا حيث يمكن لبعض الإطارات (الموصى بها من 7 إلى 20 ، ولكن هذه ليست قاعدة صارمة) أن تنقل معنى وجمال الخدمة أو المنتج. على سبيل المثال ، نفس السياحة والسفر ، الفنادق (صالات العرض ، مناطق الترفيه ، SPA) ، الموضة (عرض مجموعة من الملابس) ، المطاعم والمقاهي (إظهار التصميمات الداخلية والأطباق) ، صالونات التجميل (إظهار ... الجمال). بشكل عام ، يجب أن يكون المعنى واضحًا ، وكل صاحب عمل يعرف أكثر مني ما يجب أن يظهره.

كيف تؤثر على تحسين محركات البحث (SEO)

اتجاه خوارزميات البحث في رأيي اليوم هو أن ترتيب الموقع يتأثر أقل وأقل بروابط من مواقع أخرى (على الرغم من نعم ، لا يزال يؤثر) ، والعوامل التالية (ليس بالضرورة بالترتيب المذكور) أكثر وأكثر:

سرعة تنزيل الصفحة
التكيف مع الأجهزة المحمولة
توفر البيانات المنظمة
توافر محتوى وفير
التاريخ الطويل للموقع

العناصر الثلاثة الأولى من هذه القائمة متاحة للتحسين السريع ، لذلك دعونا نلقي نظرة فاحصة عليها.

سرعة تنزيل الصفحة

ألق نظرة على لقطة الشاشة هذه من وثائق Google ، واقرأ التسطير (أو انقر فوق الصورة للانتقال إلى هذا المستند): تم تصميم تقنية AMP منذ البداية خصيصًا لزيادة سرعة تحميل الصفحة على الأجهزة المحمولة. لهذه الأغراض ، يقوم Google بتنزيل صفحات AMP على الأجهزة المحمولة ليس من خادمك ، ولكن من ذاكرة التخزين المؤقت الخاصة به ( Google AMP Cache ). أي أن Google تحفظ أولاً صفحة AMP (في هذه الحالة ، سجل AMP ) في المنزل ، ثم تقدمها بسرعة إلى مستخدمي أجهزة الجوال باستخدام شبكتها العالمية القوية من الخوادم ، والتي يطلق عليها كندي

- شبكة توصيل المحتوى .

صحيح ، هذا صحيح فقط للصفحات المفتوحة على الأجهزة المحمولة (سيتم الاستمرار في تحميل الصفحات المفتوحة من جهاز الكمبيوتر من الخادم الخاص بك) ، لكننا نعلم أن التكيف مع الأجهزة المحمولة مهم جدًا ، نظرًا لأن المستخدمين يصلون اليوم إلى مواقع الويب من الأجهزة المحمولة أكثر من أجهزة الكمبيوتر وأجهزة الكمبيوتر المحمولة التقليدية. لذا ، بمساعدة تقنية AMP ، نحل مشكلة سرعة تحميل الصفحة (على الأقل على الأجهزة المحمولة) ، والتي تلبي المتطلبات الصارمة لـ Google . وهذا لا يكفي! لكن الوثائق تقول أيضًا عن: " مقالات مصورة في نتائج بحث Google " ، والتي من الواضح أن قصص AMP تسمى(ألق نظرة على الجملة الأولى في لقطة الشاشة ، أو انقر على الصورة للانتقال إلى هذا المستند): من هذا السياق ، يمكننا أن نستنتج أن Google في بحثها يمنحهم (أي " مقالات مصورة ") مكانًا خاصًا في نتائج البحث! فلماذا لا تأخذ هذا المكان وقصصك؟ لكن تقنية قصص AMP لا تزال جديدة تمامًا ، وقد أعلنت Google مرارًا وتكرارًا عن تنفيذها المرحلي في نتائج البحث - حسب منطقة العالم ومواضيع القصص نفسها. لكنني أعلم أنك تعرف متى يكون من الأفضل إعداد زلاجة ... بالإضافة إلى ذلك ، فإن التواجد على موقعك كمحتوى لقصص AMP

مع البيانات المنظمة ، لا يمكن أن تمر دون أن يلاحظها أحد (إذا فعلنا كل شيء بشكل صحيح ؛ اقرأ المزيد عن هذا) بواسطة خوارزميات Google ، ومن المحتمل جدًا أن يؤثر ذلك بشكل مفيد على موضع الموقع بأكمله في نتائج البحث.

في هذه الأثناء ، دعنا نتحقق من أداة التحقق من صفحات AMP من Google لمعرفة ما إذا كان يمكن اعتبار قصتنا صفحة AMP صالحة من وجهة نظر Google نفسها :

مدقق AMP

نعم ، كل شيء على ما يرام. يرجى ملاحظة أنه في الجزء السفلي من لقطة الشاشة هذه يقال " تم العثور على بيانات منظمة صالحة في الصفحة ". سنعود إليهم ، ولكن أولاً ، دعنا نتحقق مما إذا كانت قصة AMP لدينا متوافقة مع الأجهزة المحمولة.

التكيف مع الأجهزة المحمولة

هناك أداة أخرى من Google لهذا الاختبار - فحص التحسين لأجهزة الجوال . تحقق:

مدقق موقع ويب للجوال

كل شيء على ما يرام. وبصراحة ، لسبب ما كنت أعرف ذلك مسبقًا.

توفر البيانات المنظمة

إذا نظرت في وثائق Google ، يمكنك العثور على قسم كبير إلى حد ما حول البيانات المنظمة (انقر على الصورة للانتقال إلى هذا المستند): من الواضح أن Google تعلق أهمية كبيرة عليها. نظرًا لأننا مهتمون بجوجل ليس أقل مما هو فينا ، دعونا لا نرفض مثل هذه التفاهات ، وسنفعل ما يحلو له. اذا نظرتم الى رمز لدينا قصة AMP ، ثم هناك، في رأس القسم ، يمكنك العثور على القطعة التالية: وكما ترون - شيء معقد. تقول وثائق Google أن تنسيق JSON-LD المفضل جيد ، نحن نفعل ذلك .

type="application/ld+json"

علاوة على ذلك ، تقول الوثائق أن المعيار المفضل http://schema.orgمقبول.

ثم كل شيء واضح وبديهي. سأشرح فقط:
- يمكن تحديد مسارات الملفات هنا نسبيًا ومطلقًا ؛
- datePublished و تتزامن dateModified في أول نشر، وفي حالة تغيير المحتوى - نحن فقط تغيير قيمة dateModified المجال .
- شكل datePublished و والحقول dateModified بالضبط كما هو مبين، و +3 هي المرة تعويض ساعات من غرينتش وقت Mean ( GMT - توقيت غرينتش )، في هذه الحالة يعني بتوقيت موسكو.
- مثلصورة (هنا هو ملف poster.jpg ) يوصى باستخدام صورة ذات نسب عرض إلى ارتفاع (عرض / طول) 3: 4 ، بحجم 696 × 928 بكسل على الأقل ، موصى به: 960 × 1200 أو 1200 × 1600 ؛
- كشعار (هنا هو ملف thumb.png ) ، يوصى باستمرار باستخدام نفس الصورة المربعة (لموقع معين أو علامة تجارية) بحجم 112 × 112 بكسل على الأقل (أعتقد أن 200 × 200 أو 256 × 256 ستكون على ما يرام )

أثناء التحقق من صلاحية AMP ، رأينا بالفعل أن: " تم العثور على بيانات منظمة صالحة على الصفحة " ، ولكن دعنا نتحقق منها باستخدام أداة خاصة من Google Checking data Organized:

مدقق البيانات المنظمة

كما ترى ، في الركن الأيمن العلوي من الأحرف الكبيرة ، تقول: لا أخطاء ، لا تحذيرات - يبدو أن Google سعيدة. لذلك نحن أيضا.

اختياري: بيانات الشبكات الاجتماعية

على الرغم من أن هذا لا علاقة له بتقنيات البحث ، ولكن نظرًا لأننا ندرك جيدًا دور الشبكات الاجتماعية ، فلنفعل شيئًا مفيدًا لها أيضًا (ولكننا نعلم أنه في النهاية سوف يتحول كل ذلك لصالحنا). لذلك ، في القسم الرئيسي من سجل AMP (مثل أي صفحة أخرى على الموقع) ، يمكنك أيضًا وضع ترميز لإبلاغ الشبكات الاجتماعية مثل Facebook و Twitter و Pinterest و VKontakte بمعلومات إضافية حول سجل AMP . الآن ، إذا شارك مستخدم إحدى الشبكات الاجتماعية رابطًا إلى صفحتنا ، فإن صورة وعنوانًا آخر (وأحيانًا أيضًا وصف) "تسحب" ، كما هو الحال في المثال من VKontakte في لقطة الشاشة هذه:

في تواصل مع

وإليك كيفية ظهور هذا الترميز في رمز الصفحة:

ترميز الشبكة الاجتماعية

هنا ، أعتقد أن كل شيء بديهي أيضًا. ولكن سأشرح ما يلي.

ينقسم الترميز في أسطر فارغة إلى ثلاثة أقسام.

Facebook (يستخدم مساحة الاسم og - Open Graph ) و Twitter (يستخدم مساحة الاسم twitter ) و VKontakte (يستخدم مساحة الاسم vk ).

يجب أن أقول أن Open Graph هو المعيار الفعلي لمثل هذا الترميز ، وتستخدمه الشبكات الاجتماعية الأخرى أيضًا. علاوة على ذلك ، إذا لم تحدد بشكل منفصل لكل من Twitter و VKontakte ، فسيحاولون أيضًا استخدام Open Graph . لكننا أشرنا إلى نتيجة أكثر رقابة.

وتجدر الإشارة أيضًا إلى أن المسارات إلى الموارد هنا يجب أن تكون مسجلة بشكل مطلق ، باستثناء فكونتاكتي - هنا يمكن تسجيل مسار الصورة على حد سواء مطلق ونسبية (في المثال أعلاه - نسبي :) content="./hero_vk.jpg".

بالإضافة إلى ذلك ، يتطلب Facebook إنشاء ما يسمى ب تطبيق الويب ، واستخدام معرفه ( property="fb:app_id"انظر السطر الأول) ، ربما للتحكم في توزيع محتوى الطرف الثالث من خلال شبكته (وتكون قادرة على إغلاق هذا المتجر في أي وقت إذا لم يعجبه شيء).

لإنشاء مثل هذا التطبيق ، انتقل إلى صفحة التطبيق لحساب المطور (الذي يجب إنشاؤه ، إذا لم يكن قد تم إنشاؤه بالفعل) Facebook for Developers وانقر على المربع: " إضافة تطبيق جديد". امنح تطبيقك أي اسم (دعوت" القصص المرئية ") ، وبعد الإنشاء مباشرةً سترى معرّف تطبيقك ، كما هو موضح في لقطة الشاشة أدناه:

تطبيق ويب Facebook

من السهل فهم المزيد من الإعدادات ، وليست ضرورية لأغراضنا.

لا تستخدم المعرف الموضح هنا

, Facebook-, — ! , .

الآن دعونا نتحقق من صحة ترميزنا للشبكات الاجتماعية.

Facebook repost debugger :

مدقق الفيسبوك

يبدو أن كل شيء على ما يرام مع Facebook .
الآن مدقق بطاقة Twitter :

مدقق تويتر

ومعها ، يبدو أن كل شيء على ما يرام. تحقق

الآن على Pinterest ، في ما يسمى مدقق الدبابيس الغنية :

مدقق دبابيس غنية

بالإضافة إلى العلامات الخضراء الجميلة ، فهو مكتوب أيضًا أدناه: AMP صالح؟ صحيح . ولكن الأهم من ذلك ، تجدر الإشارة هنا إلى أن عنوان URL الأساسي هو عنوان قصة AMP نفسها . هذا أمر بالغ الأهمية للفهرسة على Google ، وسنعود إلى هذا في نهاية المقالة.

فيما يتعلق فكونتاكتيعلى حد علمي ، ليس لديهم مثل هذا المدقق (أو يقول هذا: لا أعرف أن فكونتاكتي لديه مثل هذا المدقق) ، لكننا قمنا بفحصهم في البداية عمليًا - كل شيء يعمل هناك أيضًا.

كيف نفعل

يمكن إنشاء قصة AMP ... يدويًا. على الرغم من أن بعض أنظمة إدارة المحتوى تحتوي على امتدادات لإنشاء صفحات AMP ، إلا أن قصص AMP هي على وجه التحديد التي لم يتم دعمها بعد. هناك أيضًا العديد من الخدمات عبر الإنترنت لإنشاء قصص AMP ، على سبيل المثال ، MakeStories ، لكنني لم أختبرها ، لأنني لا أحب هذه التبعيات من أطراف ثالثة ، من حيث نظافة الشفرة واكتمال الوظائف وتوقيت التحديثات. لذلك ، إليك رابط لنموذج في مستودع GitHub الذي يحتوي على الوظائف الأساسية (الصور والفيديو والرسوم المتحركة - كل شيء يشبه قصة Low Stars of Summer AMP)) ، وهو ما يكفي لمعظم الحالات ، ولكن يمكن توسيعه بسهولة باستخدام الكتالوج الرسمي للمكونات . يمكن أيضًا استنساخ القالب: لكن الكود لن يعمل بشكل صحيح إذا تم تشغيله مباشرة من نظام الملفات. لأغراض التطوير والاختبار ، يجب عليك أولاً تشغيل الخادم المحلي. إذا لم يكن لديك برنامج مثبت وموثوق ومألوف لك ، ولديك متصفح Chrome - يمكنني أن أوصي خادم الويب لمتصفح Chrome . ما عليك سوى البدء وتحديد المجلد الذي يحتوي على الملفات ( amp-story-template-ru ) وفتح العنوان المحلي - كل شيء كما هو موضح في لقطة الشاشة: نظرًا لأننا نتحدث بالفعل عن متصفح Chrome ، يمكنني أيضًا أن أوصي بالامتداد من المطورين

git clone https://github.com/stmike/amp-story-template-ru.git
cd amp-story-template-ru

AMP - مدقق AMP . يعد استخدامه أمرًا بسيطًا للغاية: إذا كنت في صفحة AMP صالحة ، فسيتم إضاءة رمز أخضر في لوحة Chrome ؛ إذا لم يكن الأمر كذلك ، فهو أحمر ، وعند النقر عليه ، فإنه يعرض أرقام الأسطر التي بها أخطاء.
إضافة مدقق AMP لمتصفح Chrome

تم التعليق على رمز القالب بشكل جيد - بحيث يمكنك قراءته مثل حكاية Andersen ، ولكن ما زلت أريد الانتباه إلى بعض الفروق الدقيقة.

1. سيعتبر محرك بحث Google سجل AMP (مثل أي صفحة AMP ) صالحًا فقط إذا تم استخدام البروتوكول الآمن HTTPS (وليس HTTP ) للوصول إليه .

2. في مستودع جيثبإلى جانب ملف index.html المألوف ، ستجد ملف bookend.json . في قصص AMP ، هو المسؤول عن النهاية الرشيقة للقصة: كرر ، شارك من خلال الشبكات الاجتماعية ، روابط مفيدة. كل شيء ، كما هو موضح في لقطة الشاشة: يمكن أن تكون

الانتهاء من القصة

مسارات الموارد في ملف bookend.json مطلقة ونسبية.

3. يجب أن تشير قصص AMP في العلامة <link rel="canonical"...إلى نفسها. صفحات أخرى من الموقع لا يجب أن تشير إليها. وهذا يميزها (من حيث تحسين محركات البحث ) عن صفحات AMP العادية . إليك ما يكتبه Google حول هذا الموضوع :

حدد الصفحة الأساسية

بعد فهرسة صفحة AMP واحدة على الأقل على موقعك(بما في ذلك قصص AMP ) في القائمة (قسم التحسينات ) في Google Search Console ، يظهر العنصر: صفحة AMP . يجب ألا تكون هناك أخطاء:

تقرير حالة AMP

استنتاج

هذا كل شيء لهذا اليوم. يتبع مواد أخرى. لمن يهمك قراءته ، اشترك في إشعارات المنشورات الجديدة. يمكنك الاشتراك في هذا الموقع ( الاشتراك الزر أدناه)، أو على برقية قناة IT دروس زاخار ، أو على المجتمع من نفس الاسم على VK أو تويتر mikezaharov .

دوناتس

تحسين محركات البحث الحديثة: قصص AMP