1.2الودجات الأساسية: عنوان، نص، صورة، زر
الأساسي في 30 ثانية
- الودجات الأساسية (منذ Free): عنوان، محرّر نص، صورة، زر، أيقونة.
- ودجة العنوان تحمل مستوى دلاليًا (H1 إلى H6): H1 واحد لكل صفحة، ثم H2، H3… في تراتُب.
- الزر هو الدعوة إلى الفعل (نصّ + رابط)؛ والصورة يجب أن يكون لها نصّ بديل (alt).
الخيط الناظم — نادية تملأ الصفحة الرئيسية
البنية موجودة؛ تضع نادية الآن المحتوى: عنوان «نجارة بن علي»، فقرة تعريف، صورة ورشة جميلة، وزر «طلب عرض سعر». تتردّد في مستوى العنوان وتنسى في البداية alt الصورة. يُثبّت هذا القسم العادات الصحيحة.
تكملة 1.1 — بعد البنية، المحتوى.
1. العنوان والنص والصورة
ودجة العنوان (Heading) تعرض عنوانًا بمستواه H1 إلى H6 — مهمّ للـ SEO والوصولية: H1 واحد (العنوان الرئيسي للصفحة)، ثم H2 للأقسام الكبرى، H3 تحتها. ويُدير محرّر النص الفقرات الغنيّة (عريض، قوائم، روابط). وتُدرِج ودجة الصورة صورة: يُملأ دائمًا النصّ البديل (alt)، الذي يصف الصورة للمحرّكات وقارئات الشاشة.
بالنسبة لنادية: «نجارة بن علي» في H1، فقرة تعريف في محرّر النص، صورة ورشة مع alt «ورشة نجارة في وهران».
2. الزر والأيقونة
الزر هو العنصر القابل للنقر في الدعوة إلى الفعل: يُضبَط نصّه، ورابطه (صفحة، مرساة، هاتف، بريد) وربّما أيقونة. والأيقونة (ودجة أو داخل زر) تُعزّز الرسالة بصريًا.
تضع نادية زر «طلب عرض سعر» مرتبطًا بصفحة التواصل (أو برقم هاتف «tel:» على الجوّال)، مع أيقونة هاتف صغيرة. الزر الجيّد يقول بوضوح ما سيحدث.
🔎 مثال ملموس — ملء الصفحة الرئيسية (حالة نادية)
H1: «نجارة بن علي»
محرّر النص: تعريف (2-3 جمل)
صورة: صورة ورشة — alt «ورشة نجارة في وهران»
زر: «طلب عرض سعر» → رابط إلى /contact (أو tel: على الجوّال)
→ H1 واحد، alt مملوء، فعل واضح.النتيجة: صفحة رئيسية مقروءة ومُبنيّة جيدًا.
الدرس: تراتُب العناوين + alt = أساس SEO/وصولية.
مفردات القسم
- ودجة العنوان (Heading)
- تعرض عنوانًا بمستواه الدلالي H1 إلى H6.
مثال بسيط: «نجارة بن علي» في H1، «أعمالنا» في H2.
ما ليس كذلك: وضع عدّة H1 أو اختيار المستوى حسب الحجم المطلوب.
رد فعل: H1 واحد؛ التراتُب يبني، والحجم يُضبَط على حدة.
- محرّر النص
- ودجة للفقرات الغنيّة (عريض، قوائم، روابط).
مثال بسيط: فقرة تعريف الورشة.
ما ليس كذلك: وضع عنوان مهمّ فيه (استخدم ودجة العنوان لذلك).
رد فعل: نصّ جارٍ → محرّر النص.
- الصورة + alt
- تُدرِج صورة؛ النصّ البديل (alt) يصفها للمحرّكات وقارئات الشاشة.
مثال بسيط: صورة ورشة، alt «ورشة نجارة في وهران».
ما ليس كذلك: ترك alt فارغًا أو وضع «image1.jpg».
رد فعل: كل صورة مفيدة لها alt وصفيّ.
- الزر
- عنصر قابل للنقر في دعوة إلى الفعل: نصّ + رابط (+ أيقونة اختيارية).
مثال بسيط: «طلب عرض سعر» → صفحة التواصل أو «tel:» على الجوّال.
ما ليس كذلك: زر «انقر هنا» دون قول ما سيحدث.
رد فعل: نصّ الزر يُعلن الفعل.
- الأيقونة
- رمز صغير، وحده (ودجة أيقونة) أو في زر، لتعزيز الرسالة.
مثال بسيط: أيقونة هاتف في زر العرض.
ما ليس كذلك: تكديس أيقونات زخرفية بلا معنى.
رد فعل: يجب أن توضّح الأيقونة، لا أن تُزخرِف عشوائيًا.
في التطبيق — وضع محتوى صفحة
- أضف ودجة عنوان في H1 (العنوان الرئيسي للصفحة).
- أضف محرّر نص لفقرة تعريف.
- أدرِج صورة واملأ نصّها البديل (alt).
- أضف زرًا بنصّ واضح ورابط (صفحة، هاتف، بريد).
نصّ جاهز للقول — شرح زر الفعل للزبون (20 ث)
«زر «طلب عرض سعر» ظاهر جيدًا: على الجوّال، نقرة تُطلِق المكالمة مباشرة؛ وعلى الحاسوب، يفتح صفحة تواصلك. النصّ يقول تمامًا ما سيحدث، لطمأنة الزائر وحثّه على التواصل معك.»
الزر الجيّد يُعلن الفعل؛ على الجوّال، فضّل «tel:» للاتصال بنقرة.
قالب للنسخ واللصق — تحقّق محتوى صفحة
عنوان H1 (واحد): _______________
عناوين فرعية (H2/H3، تراتُب): _______________
فقرات (محرّر نص): _______________
صور + ALT (لكلٍّ): _______________
زر: النصّ = ___________ → الرابط = ___________
أيقونة (إن كانت مفيدة): _______________صفحة رئيسية
H1 = اسم الشركة؛ الزر الرئيسي = تواصل/عرض سعر.
صفحة خدمة
H1 = الخدمة؛ H2 لكل فائدة؛ زر = حجز/تواصل.
الجوّال أولًا
زر بـ «tel:» للاتصال بنقرة، نصّ قصير مقروء.
صورة ثقيلة
اضغطها قبل الإدراج (انظر 5.1) واملأ alt دائمًا.
✓ ممارسات جيدة
- H1 واحد لكل صفحة، ثم تراتُب H2/H3.
- املأ alt لكل صورة مفيدة.
- أعطِ الزر نصًّا يُعلن الفعل.
✗ أخطاء شائعة
- اختيار مستوى العنوان حسب الحجم المطلوب.
- ترك alt فارغًا.
- أزرار غامضة («انقر هنا»).
النقاط الأساسية
- الودجات الأساسية: عنوان، نص، صورة، زر، أيقونة.
- H1 واحد، تراتُب H2/H3 (SEO/وصولية).
- alt وصفيّ على كل صورة.
- زر = نصّ واضح + رابط مفيد.
تحدّي 48 ساعة — طبّق غدًا
ألّف صفحة بسيطة: H1، فقرة، صورة بـ alt، زر بنصّ صريح مرتبط بصفحة/هاتف. تحقّق من وجود H1 واحد فقط. 15 دقيقة.
- أضع H1 واحدًا وتراتُب عناوين.
- أملأ alt لصوري.
- أزراري تُعلن الفعل بوضوح.
أسئلة شائعة
كم H1 لكل صفحة؟
واحد فقط: العنوان الرئيسي. العناوين الأخرى H2 (أقسام كبرى) ثم H3، إلخ، في تراتُب — مهمّ للـ SEO والوصولية.
لماذا أملأ النصّ البديل (alt)؟
يصف الصورة لمحرّكات البحث وقارئات الشاشة (الوصولية). صورة مفيدة بلا alt فرصة ضائعة وعيب في الوصولية.
كيف أصنع زرًا يتّصل بالهاتف؟
في رابط الزر، استخدم «tel:+213…»: على الجوّال، نقرة تُطلِق المكالمة مباشرة. مفيد لحرفيّ يُتواصَل معه هاتفيًا.
تضع نادية «نجارة بن علي»، ثم «أعمالنا» و«تواصل». أي تراتُب عناوين صحيح؟