website launch checklist
1.0.0
الأشياء التي يجب التحقق منها جيدًا قبل إطلاق موقع ويب
قبل إطلاق الموقع تأكد من:
العلامة البديلة ("السمة البديلة" أو "الوصف البديل") هي سمة يتم تطبيقها على الصورة والتي تعمل بمثابة وصف غير مرئي للصورة.
وهو يصف محتويات الصورة ويستخدمه قارئو الشاشة للقراءة بصوت عالٍ للمستخدمين المكفوفين. يتم استخدامه أيضًا بواسطة محركات البحث نظرًا لأنها لا تستطيع تفسير الصور، فهي تعتمد على وصف العلامة البديلة. يؤثر استخدام العلامات البديلة على الصور بشكل إيجابي على تصنيف محرك البحث، وبالتالي فهو مفيد لتحسين محركات البحث. يتم أيضًا عرض النص البديل عند فشل تحميل الصور.
يجب أن تصف علامة Alt محتويات الصورة ويوصى بأن يصل طولها إلى 125 حرفًا.
مثال:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > إذا كانت لديك بيئة "تدريجي" أو "مطور"، فمن المحتمل أنك تمنع التدريج من الفهرسة.
إذا كنت تريد أن يظهر موقع الويب الخاص بك في نتائج البحث، فسيقوم محرك البحث هذا "بفهرسة" موقع الويب الخاص بك. تمتلك محركات البحث "روبوتات" آلية تقوم بزيارة صفحات الويب، و"الزحف" إلى المحتوى وتخزينه في فهرس محرك البحث. سيسمح ذلك لمحرك البحث باسترداد نتائج البحث الأكثر صلة لاحقًا.
قبل الإطلاق، تأكد من أن الإصدار الذي سيتم نشره يسمح بفهرسة موقع الويب الخاص بك. تأكد من عدم وجود علامة وصفية كهذه في HTML الخاص بك:
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesتحقق أيضًا من ملف robots.txt الخاص بك. إذا كنت تريد السماح بفهرسة جميع صفحات موقع الويب الخاص بك، فيجب أن يحتوي ملف robots.txt الخاص بك على ما يلي:
User-agent: *
Disallow:
هناك مكان آخر يجب التحقق منه وهو تكوينات Apache/Nginx.
عند مشاركة موقع ويب على Facebook أو Twitter، فإنه يعرض صورة مصغرة وعنوانًا ووصفًا:
إذا كنت تريد أن يتم عرض موقع الويب الخاص بك مع الصورة المصغرة والعنوان والوصف الصحيح، فيجب عليك إضافة العلامات الوصفية المطلوبة بواسطة Facebook وTwitter.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->يمكنك اختبار الشكل الذي سيبدو عليه موقع الويب الخاص بك عند مشاركته على Facebook أو Twitter باستخدام هذه الأدوات:
مصحح أخطاء مشاركة الفيسبوك
مدقق بطاقة تويتر
Favicon هو الرمز الصغير الموجود بالقرب من عنوان موقع الويب في علامة تبويب المتصفح.
فهو يجعل من السهل التعرف على موقع الويب عندما تكون العديد من علامات التبويب مفتوحة، وعرض سجل المتصفح والإشارات المرجعية. تعرض بعض محركات البحث، مثل DuckDuckGo، الرمز المفضل بالقرب من عنوان URL في نتيجة البحث. وبصرف النظر عن تحسين سهولة الاستخدام، فإنه يمكن أن يساعد في جذب انتباه المستخدم في نتائج البحث، لذلك يمكننا أن نطلق عليه تقنية تحسين محركات البحث غير المباشرة.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > يمكن للمستخدمين حفظ صفحة ويب على شاشتهم الرئيسية على الأجهزة المحمولة. يؤدي ذلك إلى إنشاء رمز لموقع الويب، تمامًا مثل رمز التطبيق، سيؤدي النقر فوق هذا الرمز إلى فتح موقع الويب في المتصفح.
يتم منح المطورين بعض التحكم لجعل تجربة موقع الويب أقرب إلى تجربة التطبيق الأصلي على الهاتف المحمول. على سبيل المثال، سيقوم نظام iOS افتراضيًا بتعيين لقطة شاشة لموقع الويب كرمز. ولكن يمكنك تعيين تصميم رمز مخصص باستخدام العلامات التعريفية لـ Apple.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> سيستخدم Android قيمة "apple-touch-icon" أو الرمز المفضل (في حالة عدم وجود العلامة الوصفية) لإنشاء رمز الشاشة الرئيسية.
إذا كانت أداة التحليلات التي تستخدمها لا تحتوي على مرشح للبيئة، فسوف تقوم بتلويث تحليلات موقع الويب الخاص بك بنتائج الاختبار في بيئة غير إنتاجية. يمكنك إضافة عامل التصفية في أداة التحليلات أو تضمين التعليمات البرمجية بشكل مشروط في بيئة الإنتاج فقط.
تحدد علامة العنوان عنوان موقع الويب. تحتوي علامة الوصف التعريفي على وصف قصير للصفحة
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >العنوان هو ما يتم عرضه في نتائج محرك البحث، ويتم عرضه في علامة تبويب المتصفح وبطاقات الشبكة الاجتماعية عند المشاركة (إذا لم يتم توفير عنوان منفصل للشبكة الاجتماعية).
يتم عرض الوصف في نتائج البحث أيضًا. لا يتم استخدامه بشكل مباشر في خوارزمية التصنيف، لذا فهو لا يؤثر على فرص الظهور في نتيجة البحث، ولكنه يزيد من احتمالية قيام المستخدمين بالنقر فوق موقع الويب الخاص بك في النتائج. سيؤدي ذلك إلى زيادة نسبة النقر إلى الظهور (CTR) لصفحتك بالنسبة لجوجل، وهذا يعني أن جوجل سيعتبرها نتيجة جيدة وسيحتل مرتبة أعلى في نتائج البحث المستقبلية.
إذا كانت لديك روابط لروابط خارجية على صفحة الويب الخاصة بك، وخاصة تلك التي تفتح في علامة تبويب أو نافذة جديدة، فيجب عليك استخدام rel="noopener" .
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > هناك فوائد تتعلق بالأمان والأداء عند القيام بذلك. بدونها، يمكن للصفحة الخارجية الوصول إلى كائن النافذة الخاص بك باستخدام window.opener . يمكنك معرفة المزيد حول الثغرات الأمنية التي تم حلها باستخدام noopener هنا: حول rel=noopener
قد يعمل موقع الويب الآخر أيضًا بنفس العملية مثل صفحتك الحالية، لذلك إذا كانت الصفحة الخارجية تقوم بتشغيل بعض برامج JavaScript الثقيلة، فسيؤثر ذلك سلبًا على أداء موقع الويب الخاص بك. noopener يمنع ذلك أيضًا.
اقرأ المزيد عنها هنا: فوائد أداء rel=noopener
نظرًا لأنك تجري الكثير من التغييرات على موقع الويب الخاص بك أو عندما تستخدم الكثير من المكتبات الخارجية أو أطر عمل CSS، فمن المحتمل أن يحتوي ملف CSS الخاص بك على الكثير من الأنماط التي لا تستخدمها صفحاتك. على سبيل المثال، ربما تستخدم سمة واحدة لبعض المكونات الإضافية، لكن CSS للسمات الأخرى يبقى في ملف CSS الخاص بك غير مستخدم ويزداد حجم ملف ورقة الأنماط.
يمكنك إزالة كافة الأنماط غير المستخدمة باستخدام أداة تسمى PurgeCSS. يمكنك استخدامه مع CLI أو استخدامه في Webpack وGulp وما إلى ذلك. وسيعمل على تحليل صفحاتك ومطابقة المحددات المستخدمة في الصفحات مع تلك الموجودة في ملفات CSS وإزالة الأنماط غير المستخدمة. في مشروعي الأخير، الذي استخدم إطار عمل Tailwind CSS، كان هناك بالطبع الكثير من الأدوات المساعدة التي لم أستخدمها. قام PurgeCSS بتقليل حجم ملف app.css الخاص بي من 214 كيلو بايت إلى 45.6 كيلو بايت.
لكن كن حذرًا، إذا قام مكون إضافي بإنشاء عناصر على الصفحة ديناميكيًا، فلن يكتشف PurgeCSS أنماط هذا العنصر. ولكن يمكنك إضافة المحددات إلى القائمة البيضاء عن طريق تمرير المحددات أو أنماط المحددات في التكوين، ويمكنك أيضًا إدراج المحددات في القائمة البيضاء باستخدام تعليق خاص لإدراج قواعد محددة في القائمة البيضاء. اقرأ المزيد عن القائمة البيضاء لـ PurgeCSS.
عندما يطلب المتصفح موردًا، يمكن للخادم توجيه المتصفح إلى المدة التي يمكنه تخزين المورد فيها أو "تخزينه مؤقتًا". في المرة التالية التي يتم فيها طلب المورد، يمكنه استخدام النسخة المحلية. سيؤدي ذلك إلى تحسين السرعة بشكل كبير وتقليل الأحمال على الخادم. يمكنك تكوين الخادم الخاص بك لإرجاع رأس، يوضح المدة التي يجب أن يتم فيها تخزين الأصل مؤقتًا:
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
يجب عليك تعيين الحد الأقصى للعمر بناءً على عدد مرات تغيير الأصول الخاصة بك.
يمكنك أيضًا تكوين الخادم الخاص بك لاستخدام الضغط، مثل ضغط Gzip، مما يسمح بنقل الموارد بشكل أسرع. يؤدي ضغط ملفات CSS باستخدام gzip إلى توفير حوالي 50-70% من حجم الملف.
