الرمز المفضل هو الصورة الصغيرة التي تحدد موقع الويب في علامات تبويب المتصفح والإشارات المرجعية. الاسم يأتي من "الرمز المفضل". فهو يوفر للقراء طريقة مرئية للعثور على موقع ما بين الصفحات المفتوحة، حتى عندما تكون علامة التبويب ضيقة جدًا بحيث لا يمكن إظهار عنوانها. يمكن لمحركات البحث أيضًا عرض الرمز المفضل للموقع بجانب النتيجة. تعريف الأيقونة المفضلة لـMDN يصف هذه الاستخدامات الشائعة للمتصفح.
تعتبر دائرةSearchVector البرتقالية المقسمة أحد الأمثلة. يستخدم مخطط الغلاف أصول الأيقونة الفعلية الخاصة به لشرح العلاقة بين ملف الصورة وHTML للصفحة والمتصفح. إنه رسم تخطيطي تعليمي، وليس لقطة شاشة لنتيجة بحث.
هل أنت جاهز للتنفيذ؟ انتقل إلى إعداد HTML أو استكشاف أخطاء الرمز المفقود وإصلاحها.
الرمز المفضل والشعار والصورة الاجتماعية: ما هو؟
الشعار هو الهوية المرئية الأوسع للأعمال التجارية. قد يتضمن رمزًا واسمًا كاملاً وشعارًا. الرمز المفضل هو تطبيق صغير لتلك الهوية، وعادةً ما يكون رمزًا مبسطًا يظل من الممكن التعرف عليه بأحجام صغيرة. غالبًا ما يؤدي تقليص العلامة النصية بالكامل إلى عدم إمكانية تمييز حروفها.
| Asset | Main وظيفة |
|---|---|
| Favicon | تحديد الصفحة في علامة تبويب المتصفح أو الإشارة المرجعية |
| شعار العنوان | تحديد العلامة التجارية داخل تخطيط الصفحة |
| المعاينة الاجتماعية صورة | توضيح رابط مشترك بصورة أكبر |
| رمز الشاشة الرئيسية | تمثل موقع ويب محفوظًا أو تطبيق و��ب مثبتًا على الجهاز |
لا يؤدي تغيير شعار الرأس بالضرورة إلى تحديث الرمز المفضل. قد تكون هذه ملفات منفصلة يتم التحكم فيها بواسطة إعدادات مختلفة. وبالمثل، فإن استبدال صورة المعاينة الاجتماعية لا يؤدي إلى إصلاح رمز علامة التبويب المفقودة. ابدأ بتحديد السطح الخطأ، ثم ابحث عن الإعداد الذي يوفره.
اختر رمزًا يتحمل الأحجام الصغيرة
ابدأ بلوحة قماشية مربعة وصورة ظلية بسيطة. قم بتصدير صورة مصدر كبيرة، ثم قم بمعاينتها بمقاس 16×16 و32×32 كفحص عملي للتصميم. تختبر هذه المعاينات الوضوح؛ إنها ليست ادعاءً بأن كل متصفح يعرض الرمز بحجم ثابت واحد. ابحث عن الخطوط المختفية وال��روف المزدحمة والمناطق الشفافة التي تندمج مع خلفية علامة التبويب.
راجع العلامة على الخلفيات الفاتحة والداكنة. يمكن أن يختفي الخطوط العريضة الداكنة على علامة تبويب داكنة، بينما يمكن أن يختفي الرمز الشاحب على علامة تبويب فاتحة. غالبًا ما يكون من الأسهل التعرف على الشكل الصلب ذي التباين المتعمد. لا تعتمد على اللون وحده: لا يزال المخطط التفصيلي المميز يساعد عندما تكون الرموز متشابهة بصريًا.
احتفظ بالملف المصدر الذي يمكن لفريقك تحريره. لا يؤدي تصدير نسخة أكبر من الصورة المصغرة الباهتة إلى استعادة تفاصيلها. لتغيير العلامة التجارية، قم بالموافقة على الأيقونة الصغيرة بجانب الشعار الرئيسي حتى يشعر موقع الويب والإشارات المرجعية والاختصارات المحفوظة بالارتباط.
أضف أيقونة مفضلة تحتوي على مثال HTML حقيقي
يقدمSearchVector صور�� PNG حقيقية بحجم 512×512 على عنوان URL للصورة المفضلة. يشير هذا التصريح البسيط إلى الأصل الموجود على موقع SearchVector:
ضع الإقرار داخل في المستند. يتم تحديد المسار النسبي للجذر من اسم المضيف الحالي: على SearchVector يطلب /favicon.png من SearchVector؛ على المجال الخاص بك فإنه يطلب هذا الملف من المجال الخاص بك. بالنسبة لموقعك الخاص، قم بتحميل أصول علامتك التجارية واستخدم مسارها الفعلي. يؤدي نسخ العلامة دون تحميل الصورة إلى ترك مرجع معطل.
تحدد ��لسمة rel المورد كرمز. يحدد href موقعها، ويصف type تنسيقها، ويصف sizes أبعاد الصورة. كتابة "512x512" لا تؤدي إلى تغيير حجم الملف. افحص الصورة المصدرة وحافظ على دقة الإعلان.
SearchVector أيضًا عن بدائل SVG وICO. يمكن للمتصفحات الاختيار بين إعلانات الأيقونات باستخدام سمات مثل النوع والحجم، كما هو موضح في مرجع رابط أيقو��ة MDN. وبالتالي فإن الإعلانات المتعددة لا تمثل مشكلة تلقائيًا، ولكن البدائل القديمة يمكن أن تفسر المظاهر غير المتناسقة.
إذا كنت تستخدم نظام إدارة المحتوى (CMS)، فابدأ بإعداد رمز الموقع الخاص به. إذا كنت تستخدم إطار عمل، فاستخدم آلية البيانات التعريفية المنشأة به. ثم افحص ملف HTML الناتج: يعد التحميل الناجح في شاشة الإدارة جزءًا واحدًا فقط من المهمة. تجنب إضافة إعداد منافس ثانٍ قبل التحقق من ما يخرجه القالب الموجود بالفعل.
ما يحتاجه Google لظهور البحث
تتطلب وثائق الأيقونة المفضلة الخاصة بـGoogleT24｠T25｠ صورة مربعة لا تقل عن 8×8 بكسل وتوصي بحجم أكبر من 48×48. تتضمن تنسيقاتها المدرجة PNG وICO. لا تفترض أن SVG الذي يعمل في المتصفح ينشئ دعمًا في عرض البحث الخاص بـ Google.
يجب أن تعلن الصفحة الرئيسية عن الرمز. يحتاج Googlebot إلى الوصول إلى تلك الصفحة الرئيسية، ويحتاج Googlebot-Image إلى الوصول إلى ملف الرمز. حافظ على ثبات عنوان URL للرمز واستخدم علامة ممثل للموقع. Google يدعم أيقونة مفضلة واحدة لكل اسم مضيف: يمكن أن يكون للنطاق الفرعي خاص به، لكن الدليل الفرعي لا يحصل على أيقونة مفضلة منفصلة للبحث.
｟T29��الأهلية لا تضمن العرض. بعد التغيير، يحتاج Google إلى إعادة الزحف إلى الصفحة الرئيسية ومعالجتها؛ تقول وثائقها أن هذا قد يستغرق أيامًا إلى أسابيع. يمكن لمالكي الموقع طلب فهرسة الصفحة الرئيسية من خلال فحص عنوان URL. إعادة تسمية الصورة بشكل متكرر ليست بديلاً مفيدًا للتحقق من الوصول والسماح بوقت المعالجة.استكشاف أخطاء الرمز المفضل المفقود أو القديم وإصلاحه
افصل بين ثلاث ملاحظات: ما يعلنه HTML، وما يعرضه عنوان URL للصورة، وما يعرضه المتصفح. يخبرك عدم التطابق بينهما بمكان التحقيق. احتفظ بسجل قصير لعنوان URL للصفحة وعنوان URL للرمز والنتيجة بدلاً من تغيير عدة إعدادات في وقت واحد.
| الأعراض | التالي تحقق |
|---|---|
| لا يوجد رمز في أي صفحة | افحص الرأس بحثًا عن إعلان الرمز؛ افتح عنوان URL الخاص بالصورة مباشرة |
| الصفحة الرئيسية تعمل، المقالة لا | مقارنة القوالب والنسبية للجذر مقابل الصفحة النسبية المسارات |
| رمز قديم في متصفح واحد | مقارنة ملف تعريف متصفح جديد وفحص جميع البدائل المعلنة |
| يفتح عنوان URL للصورة صفحة الويب | التحقق من إعادة التوجيه أو تحدي الوصول أو استجابة HTML الاحتياطية |
| المتصفح يعمل، البحث لا يعمل | راجع إعلان الصفحة الرئيسية والوصول إلى الزحف وأهلية البحث بشكل منفصل |
الاستجابة التي تحمل العلامة 200 غير كافية إذا أرسل الخادم صفحة تسجيل دخول أو بديل HTML عام. في لوحة الشبكة بالمتصفح، افحص عنوان URL النهائي لطلب الرمز ونوع محتوى الاستجابة ومعاينته. يجب أن يتم فك تشفير PNG فعليًا كـ PNG. تحقق أيضًا مما إذا كانت شبكة CDN لا تزال تخدم ملفًا قديمًا بعد تحديث الأصل.
للتحقق من ذاكرة التخزين المؤقت، افتح الصورة مباشرة وقارنها بملف تعريف متصفح جديد. يمكن أن يساعد مسح ذاكرة التخزين المؤقت في تحديد السبب، ولكن لا ينبغي أن يحتاج المستخدمون إلى إجراء إعادة تعيين خاصة حتى يعمل موقع الويب. تحقق من تكوين الأصول وذاكرة التخزين المؤقت المنشورة قبل التعامل مع التحديث المحلي كإصلاح دائم.
مثال عملي: تفقد الصفحة المتداخلة الرمز الخاص بها
تخيل موقعًا خياليًا تعرض صفحته الرئيسية الرمز الصحيح، في حين أن المقالة الموجودة تحت /blog/ لا تظهر ذلك. يحتوي كلا القالبين على href="favicon.png"، بدون شرطة مائلة بادئة. بافتراض عدم وجود تجاوز لعنوان URL الأساسي، يتم حل هذا المسار النسبي بجانب الصفحة الحالية. قد يعمل في الجذر أثناء طلب موقع مختلف للمقال.
يفتح المطور طلب رمز المقالة ويجد أنه يُرجع احتياطي HTML للموقع بدلاً من الصورة. الإصلاح هو التأكد من وجود الصورة في جذر الموقع وتغيير الإعلان المشترك إلى href="/favicon.png". ثم يقومون بعد ذلك بالتحقق من الصفحة الرئيسية والمقال مرة أخرى. كلاهما يطلب الآن نفس الأصل.
هذا مثال تشخيصي عملي، وليس حادثة SearchVector تم الإبلاغ عنها. الدرس المستفاد منه هو فحص عنوان URL المطلوب قبل استبدال العمل الفني. لا يمكن للصورة الصالحة تمامًا أن تساعد إذا طلب قالب متداخل ملفًا خاطئًا.
فحص نهائي قبل إغلاق المهمة
- افتح الصفحة الرئيسية وصفحة واحدة متداخلة؛ قم بتأكيد الإعلان عن الأيقونة المقصودة.
- افتح كل بديل معلن وتأكد من أنه ينتمي إلى العلامة التجارية الحالية.
- تأكد من تحميل الصورة المقصودة دون مصادقة أو احتياطي HTML.
- افحص الرمز الصغير في المتصفح الفاتح والداكن المظاهر.
- راجع الأهليةGoogle بشكل منفصل، ثم سجل التغيير واسمح بوقت المعالجة.
لمراجعة موقع الويب على نطاق أوسع، تابع استخدام SearchVectorWebsite Checker أو Web Page Crawler. احتفظ بالصورة المباشرة وفحوصات HTML أعلاه كدليل على الأيقونة المفضلة لديك؛ لا تضمن المراجعة العامة للصفحة كيفية عرض محرك البحث لعلامتك التجارية.
تحتوي مهمة الأيقونة المفضلة المنتهية على صورة يمكن التعرف عليها وإعلان صحيح وعنوان URL لمورد العمل عبر قوالب الصفحة. تحقق من تلك القطع الخرسانية أولاً. ثم قم بمراقبة مظهر البحث دون الخلط بين التحديث المؤجل وتنفيذ المتصفح المعطل.
