Alejandro Rioja.
Scripts

دليل سريع حول كيفية الوصول إلى الكود المصدري للموقع

Alejandro Rioja
Alejandro Rioja
8 د قراءة
TL;DR

افتح الكود HTML الخام لأي صفحة باستخدام Ctrl/Cmd+U أو بإضافة البادئة view-source: في شريط العناوين. استخدم أدوات المطورين (F12) للفحص الحي لـ DOM المُقدَّم وCSS وطلبات الشبكة. خمسة أشياء تستحق التحقق لأغراض SEO: وسوم العنوان، والأوصاف التعريفية، وعناوين H1، وخصائص alt للصور، ومقتطفات تتبع التحليلات.

نشرة بريدية مجانية

كل أربعاء. أكثر من 28,400 مشترك. بدون حشو.

جدول المحتويات

محدَّث في مايو 2026.

TL;DR: افتح الكود HTML الخام لأي صفحة باستخدام Ctrl/Cmd+U أو بإضافة البادئة view-source: في شريط العناوين. استخدم أدوات المطورين (F12) للفحص الحي لـ DOM المُقدَّم وCSS وطلبات الشبكة. خمسة أشياء تستحق التحقق لأغراض SEO: وسوم العنوان، والأوصاف التعريفية، وعناوين H1، وخصائص alt للصور، ومقتطفات تتبع التحليلات.

الخلاصة

يكمن الكود المصدري لموقعك تحت كل رسم وعنوان ودعوة إلى اتخاذ إجراء. تقرأ محركات البحث ذلك الكود لتحديد مكان ترتيب صفحتك لاستعلام معين. القدرة على قراءته بنفسك — حتى كغير مطور — هي أحد أسرع الطرق لاكتشاف أخطاء SEO قبل أن تكلفك حركة مرور.

يوضح هذا الدليل كيفية عرض الكود المصدري على كل متصفح رئيسي ونظام تشغيل في 2026، وما هي الطريقتان الرئيسيتان (View Source مقابل DevTools) المناسبتان، وعناصر SEO الخمسة التي تستحق المراجعة بمجرد الدخول.

كيفية عرض الكود المصدري

هناك أداتان مختلفتان هنا. اعرف أيهما تستخدم:

معظم المواقع الحديثة مُقدَّمة جزئيًا أو كليًا بواسطة JavaScript، لذا أقضي معظم وقتي في DevTools.

اختصار view-source: (جميع المتصفحات)

اكتب view-source: مباشرةً قبل أي URL في شريط العناوين — مثلاً، view-source:https://example.com — واضغط Enter. يعمل هذا في Chrome وFirefox وEdge وOpera. يتطلب Safari تفعيل قائمة Develop أولاً (انظر أدناه).

اختصارات لوحة المفاتيح على الكمبيوتر الشخصي

Chrome (Windows / Linux)

Firefox (Windows / Linux)

Microsoft Edge (Windows)

Opera (Windows / Linux)

اختصارات لوحة المفاتيح على Mac

Chrome (macOS)

Firefox (macOS)

Safari (macOS)

يُخفي Safari أدوات المطورين افتراضيًا. فعِّلها مرة واحدة:

  1. افتح Safari ← الإعدادات (أو التفضيلات على macOS القديم) ← تبويب المتقدمة.
  2. ضع علامة على “إظهار ميزات مطوري الويب” (يستبدل خانة “إظهار قائمة التطوير” القديمة منذ Safari 17).
  3. الآن تطوير ← إظهار مصدر الصفحة (Cmd+Option+U) وتطوير ← إظهار مراقب الويب (Cmd+Option+I) متاحان. انقر بزر الماوس الأيمن ← فحص العنصر يعمل أيضًا.

Microsoft Edge (macOS)

الجوال

عناصر SEO المهمة للتحقق منها

بمجرد أن تتمكن من عرض المصدر، استخدم Ctrl+F / Cmd+F للبحث في HTML الخام عن المقتطفات أدناه.

1. وسوم العنوان

ابحث عن <title. يجب أن يكون لكل صفحة واحدة بالضبط، ويجب أن يكون النص بداخلها فريدًا عبر موقعك. وسوم العنوان هي الإشارة الأهم على الصفحة لإخبار كل من المستخدمين ومحركات البحث عمَّ تتحدث الصفحة. تُعدّ وسوم العنوان المكررة أو المفقودة من بين أكثر أخطاء SEO شيوعًا التي أجدها خلال عمليات التدقيق.

2. الأوصاف التعريفية

ابحث عن <meta name="description". خاصية المحتوى هي المقتطف الذي يعرضه Google في كثير من الأحيان في نتائج البحث — احتفظ به تحت 160 حرفًا تقريبًا. إنها ليست عاملاً مباشرًا في الترتيب، لكنها تؤثر على معدل النقر، وهذا ما يهم. تحقق من أن لا صفحتين تشتركان في الوصف نفسه.

3. عناوين H1

ابحث عن <h1. أفضل الممارسات هو عنوان H1 واحد لكل صفحة. يجب أن يصف الموضوع الرئيسي بوضوح ويتضمن كلمتك المفتاحية الأساسية بشكل طبيعي. حشو كلمات مفتاحية متعددة في H1 يُقرأ كبريد عشوائي من قبل المستخدمين والخوارزميات على حد سواء.

4. وسوم Alt للصور

ابحث عن <img. يجب أن تحتوي كل صورة على خاصية alt تصف محتواها. نص Alt هو ما يُعلنه قارئو الشاشة للمستخدمين ضعاف البصر، وهو الإشارة الوحيدة التي تملكها محركات البحث لفهم محتوى الصورة. وسوم alt المفقودة مكاسب سهلة — ضع لها علامة واملأها.

5. كود تتبع التحليلات

ابحث عن معرّف قياس GA4 (التنسيق: G-XXXXXXXXXX) أو معرّف حاوية Google Tag Manager (GTM-XXXXXXX). إذا كنت تستخدم تنسيق Universal Analytics القديم UA-، فلاحظ أن Google أوقفت خصائص UA القياسية في يوليو 2023 — هذه المعرّفات لم تعد تجمع البيانات. تحقق من أنك انتقلت إلى GA4 أو بديل (Plausible وFathom وPostHog وغيرها).

أسباب قراءة الكود المصدري للموقع

لا تحتاج إلى أن تكون مطورًا للحصول على قيمة من هذه المهارة. إليك الأسباب الرئيسية التي تجعلني أعود إليها:

1. التحقق من وسوم Meta Robots

سيؤدي <meta name="robots" content="noindex"> واحد في مكان خاطئ إلى إزالة فهرسة الصفحة بصمت. ابحث في المصدر عن robots للتأكد من أنك لا تحجب الصفحات عن الزحف عن طريق الخطأ.

2. مراجعة بنية العناوين

تساعد التسلسل الهرمي الجيد للعناوين (H1 ← H2 ← H3) كلاً من إمكانية الوصول وSEO. يُظهر فحص view-source السريع ما إذا كانت العناوين متداخلة بشكل منطقي أو ما إذا كان شخص ما قد استخدم وسوم H بغرض التنسيق فقط.

3. التحقق من تحسين الصور

بعيدًا عن وسوم alt، انظر إلى خاصية src. هل تُقدَّم الصور من شبكة CDN؟ هل هي بتنسيقات حديثة (WebP وAVIF)؟ هل تم تعيين خصائص width وheight (يمنع تحوّل التخطيط)؟ تظهر هذه التفاصيل بوضوح في المصدر.

4. اكتشاف المحتوى المخفي أو المُحقَن

في بعض الأحيان يُحقن مكوّن إضافي أو نص من طرف ثالث أو جهة خبيثة محتوى في صفحة يكون غير مرئي في العرض المُقدَّم لكنه مرئي لمحركات البحث. الأنماط الشائعة: divs بـ display:none محشوة بكلمات مفتاحية غير مرغوب فيها، وروابط مخفية خارج الشاشة، أو نص يطابق لون الخلفية. سيكشف فحص المصدر الخام عن هذه الأشياء.

5. التحقق من بنية الروابط الداخلية

ابحث عن <a href= وافحص أهداف الروابط. يمكن أن تُستنزف PageRank بصمت بسبب المسارات النسبية المعطوبة، أو الروابط الداخلية التي تم تعيينها بـ nofollow عن طريق الخطأ، أو سلاسل إعادة التوجيه داخل تسلسل الموقع الهرمي. View Source أسرع من انتظار زحف Screaming Frog كامل عندما تحتاج فقط إلى فحص سريع.

الخلاصة

عرض المصدر هو عادة مدتها ثلاثون ثانية تكتشف مشكلات SEO مكلفة قبل أن تتراكم. سواء استخدمت Ctrl+U للكود HTML الخام أو DevTools لـ DOM الحي يعتمد على ما إذا كانت الصفحة مُقدَّمة من الخادم أو مُقدَّمة بواسطة JavaScript — لمعظم مواقع 2026 تحتاج إلى كليهما.

تحقق من هذه المقالات التي قد تجدها مفيدة لـ SEO:

عرض الكود المصدري للموقع — الأسئلة الشائعة لعام 2026

هل لا يزال view-source يعمل على المواقع المُقدَّمة بواسطة JavaScript؟

جزئيًا. يُظهر view-source: الكود HTML الذي أرسله الخادم — وهو في حالة React وNext.js وAstro (العميل فقط) أو أطر عمل مماثلة في الغالب هيكل شبه فارغ مع وسوم script. يعيش المحتوى المُقدَّم في DOM الحي، الذي تصل إليه عبر DevTools ← لوحة Elements. بالنسبة للمواقع المُقدَّمة من جانب الخادم (SSR) أو المولّدة بشكل ثابت، يُظهر view-source: محتوى الصفحة الكامل لأن HTML مكتمل قبل وصوله إلى المتصفح.

هل يمكنني عرض مصدر صفحة تتطلب تسجيل دخول؟

نعم، طالما أن جلسة المتصفح مصادق عليها. يعمل كلٌّ من view-source: وDevTools على ما يملكه المتصفح بالفعل. إذا كنت تستطيع رؤية الصفحة، يمكنك فحص مصدرها. لا يمكنك عرض مصدر صفحة لم تقم بتحميلها.

هل مشاهدة الكود المصدري لشخص آخر قانونية؟

في كل تقريبًا كل الولايات القضائية، قراءة HTML الذي يرسله خادم الويب طوعًا إلى متصفحك قانوني — اختار الخادم إرساله. الاستخراج الآلي على نطاق واسع، أو تجاوز ضوابط الوصول (مثل، التحايل على جدار دفع)، أو استخدام الكود المصدري تجاريًا دون ترخيص هي أسئلة منفصلة ذات إجابات قانونية مختلفة. لعمليات تدقيق SEO الروتينية والبحث التنافسي، قراءة المصدر المُقدَّم علنًا هو أمر معيارى وغير مثير للجدل.

ما هي أسرع طريقة للتحقق مما إذا كان الموقع يستخدم تقنية معينة في 2026؟

ثلاثة خيارات: (1) تحقق من المصدر بحثًا عن سلاسل مميزة (مثلاً، __NEXT_DATA__ لـ Next.js، وastro-island لـ Astro، وwp-content لـ WordPress)؛ (2) ثبِّت امتداد متصفح Wappalyzer الذي يحدد أطر العمل وشبكات CDN وأدوات التحليل، ومنذ عام 2025 بعض مكونات مجموعة AI (LangChain وLlamaIndex)؛ (3) شغِّل URL من خلال BuiltWith للحصول على تقرير مفصل لمجموعة التقنيات.

قراءات ذات صلة:

هذا الدليل جزء من alejandrorioja.com — كتبه Alejandro Rioja، الذي يبني الآن أنظمة عملاء AI للمؤسسين. بما في ذلك العميل الذي يُبقي هذا الموقع محدَّثًا. كيف يعمل ←

محدَّث لمايو 2026

بعض التحديثات لعام 2026 على النصائح المحددة في هذا المنشور:

تابع القراءة

احصل على دليل الذكاء الاصطناعي في صندوق بريدك

كل أربعاء. أكثر من 28,400 مشترك. بدون حشو.

⌕
↵ ↵ لعرض كل النتائج esc esc للإغلاق