بنت Younex موقع فيرست ستريت برجر (First Street Burgers) على firststreetburgers.com: موقع مطعم سماش برجر في حي النرجس شمال الرياض، بصفحة رئيسية بالإنجليزي ونسخة عربية كاملة، وصفحة منيو بلغتين بالأسعار والسعرات، ودليلين طوال بالعربي عن السماش برجر وإزاي تختار برجر في الرياض. الموقع صفحات HTML خفيفة من غير قاعدة بيانات، عليه وضع فاتح وداكن، وبيانات منظّمة لجوجل في كل صفحة، وملف llms.txt لمحركات الإجابة. ونفس المطعم عملناله قبل كده تطبيق الطابور ونقاط الولاء، والموقع بيودّي عليه.
نظرة عامة
المطعم ده مش محتاج موقع عشان يبيع أونلاين. الطلب بيحصل في الفرع، والزحمة بتتحل بالتطبيق. اللي كان ناقص هو المكان اللي بيرد على الزبون قبل ما ينزل من بيته: المطعم فين؟ بيفتح لحد إمتى؟ البرجر بكام؟ لازم أقف في الطابور؟ الأسئلة دي كانت إجاباتها متفرقة بين إنستجرام وخرائط جوجل وصفحة الطابور، ومفيش مكان واحد يجمعها ويظهر في نتايج البحث باسم المطعم.
فالموقع اتعمل على هدف واحد واضح: أي حد يكتب اسم المطعم بأي شكل، أو يكتب «سماش برجر الرياض» أو «أفضل برجر بالرياض»، يلاقي صفحة من المطعم نفسه بترد عليه بالعربي أو بالإنجليزي. وكل حاجة في الموقع، من ترتيب الأقسام لحد ملف robots، اتبنت على الهدف ده.
الموقع خمس صفحات أساسية: الرئيسية بالإنجليزي على /، والرئيسية بالعربي على /ar، والمنيو على /menu، ودليل /smash-burger-riyadh، ودليل /best-burger-riyadh. ومعاهم صفحة 404 بالعربي، وخريطة موقع، وملف robots، وملف llms.txt.
عن العميل والقطاع
فيرست ستريت برجر مطعم سماش برجر في 8448 طريق أنس بن مالك، حي النرجس، شمال الرياض. شعاره «From Cali to the Kingdom»، يعني برجر على طريقة كاليفورنيا: كورة لحمة أنجوس طازة بتتضغط على الصاج السخن أول ما تلمسه، فبتطلع قرصة رفيعة بحواف مقرمشة. المنيو قصير ومركّز: تلات أنواع برجر، تلات أنواع بطاطس، آيس كريم وميلك شيك ومشروبات، وست صوصات.
المطعم بيفتح من الواحدة الضهر لحد الواحدة بالليل من السبت للأربع، ولحد اتنين بالليل يوم الخميس والجمعة، والجمعة بيبدأ الساعة واحدة وربع. وجمهوره في الرياض بيتكلم عربي وإنجليزي، فيه سعوديين ومقيمين، وده خلّى اللغتين شرط من أول يوم مش إضافة.
وسوق البرجر في الرياض مزدحم جداً. وأي حد بيدوّر على «برجر» في جوجل بيقابل قوايم «أفضل 10 مطاعم» من مواقع مراجعات، وصفحات تطبيقات توصيل، وخرائط. المطعم اللي مالوش صفحة بتتكلم عنه بنفسها بيسيب الكلام عنه لغيره.
التحدي
أول مشكلة كانت في الاسم نفسه. «First Street» بيتكتب بالعربي فيرست ستريت وفرست ستريت، وفيه ناس بتكتب Burger من غير s. فالموقع لازم يفهّم جوجل إن كل الأشكال دي مطعم واحد.
تاني مشكلة: اللغتين. موقع إنجليزي فوقه زرار ترجمة آلية مش هيقنع زبون سعودي، وموقع عربي بس هيخسر المقيمين. وفي نفس الوقت مش منطقي نعمل نسختين منفصلتين تتعدّل كل واحدة لوحدها، لأن بعد شهرين هتلاقي النسخة العربية بسعر قديم أو بقسم ناقص.
تالت مشكلة: المحتوى. صفحة رئيسية لمطعم فيها كلام قليل بطبيعتها، وده صح، الزبون عايز يشوف الأكل مش يقرا. بس الكلام القليل مش هيظهر لوحده على كلمات زي «سماش برجر الرياض». فكان لازم نلاقي مكان للكلام الطويل من غير ما يتقل على الرئيسية.
ورابع مشكلة إن جزء كبير من الأسئلة دلوقتي بيتسأل لـ ChatGPT و Perplexity مش لجوجل بس. ولو الأدوات دي مش لاقية مصدر واضح عن المطعم، هتجاوب من أي مصدر تلاقيه، أو هتخلط بينه وبين أي حاجة اسمها smash burger.
الحل
بدأنا ببحث كلمات. الملف الخام فيه 8,485 كلمة بحث عن البرجر والسماش والمطاعم في الرياض، صفّيناها لـ 504 كلمة مستهدفة: 5 كلمات براند، و113 كلمة محلية مربوطة بالرياض والأحياء، و386 كلمة على مستوى الفئة. ومنهم 328 كلمة عربي و176 إنجليزي. ومن الخريطة دي طلع توزيع الصفحات: الرئيسية للبراند والمكان والمواعيد، المنيو للأسعار، ودليلين للكلمات العامة.
الصفحة الرئيسية بالإنجليزي هي المصدر. والنسخة العربية بيبنيها سكربت بايثون اسمه build-ar.py: بياخد الصفحة الإنجليزية ويبدّل العنوان والوصف وبيانات Open Graph والـ canonical والكلام الظاهر، ويقلب الاتجاه لـ RTL، ويسيب التصميم والسكربتات زي ما هي. فلو غيّرنا تصميم قسم في الإنجليزي، بنشغّل السكربت والعربي يتحدّث معاه من غير ما حد ينقل حاجة بإيده.
الكلام الطويل راح للدليلين. «سماش برجر الرياض» بيشرح يعني إيه سماش، وإيه الفرق بينه وبين البرجر المشوي في جدول مقارنة، وليه الضغط بيغيّر الطعم، وخمس أخطاء بتبوّظ السماش، وإزاي تعرف السماش الصح قبل أول قضمة. و«أفضل برجر بالرياض» بيبدأ بجملة صريحة: إحنا مش هنديك قايمة أفضل 10 مطاعم. بدالها بيديك سبع معايير للجودة، وأنواع البرجر، وفئات الأسعار، وإزاي تقرا تقييمات جوجل، وفين بتتجمّع مطاعم البرجر في الرياض. وفي الآخر قسم بيطبّق المعايير دي على فيرست ستريت نفسه.
ولمحركات الإجابة عملنا ملف llms.txt بيلخّص المطعم في صفحة: العنوان والإحداثيات والمواعيد، المنيو كامل بالأسعار، إزاي البرجر بيتعمل، صفحات الموقع، ولينكات حجز الطابور. وفي آخره ملاحظات صريحة، زي إن الاسم بيتكتب بشكلين، وإن «smash burger» اسم طريقة طبخ مش سلسلة مطاعم. وملف robots مفتوح بالاسم لـ GPTBot و ClaudeBot و PerplexityBot و Google-Extended وغيرهم.
المواصفات التقنية
| البند | التفاصيل |
|---|---|
| نوع المشروع | موقع تعريفي لمطعم سماش برجر في الرياض، بلغتين، مع دليلين محتوى ومطبوعات للفرع |
| البناء | صفحات HTML و CSS و JavaScript جاهزة من غير إطار عمل ولا قاعدة بيانات، والنسخة العربية بتتولّد بسكربت Python من الإنجليزية |
| الصفحات | الرئيسية بالإنجليزي، الرئيسية بالعربي على /ar، المنيو، دليل سماش برجر الرياض، دليل أفضل برجر بالرياض، وصفحة 404 بالعربي |
| اللغات | عربي وإنجليزي، مع وسوم hreflang للغتين و x-default، وخريطة موقع فيها روابط اللغة البديلة لكل صفحة |
| البيانات المنظّمة | Restaurant بالعنوان والإحداثيات والمواعيد وأشكال الاسم البديلة وإجراء حجز الدور، و WebSite و WebPage، و FAQPage، و BreadcrumbList، و Menu فيه MenuItem بسعر وسعرات كل صنف |
| الخطوط | Fjalla One و Inter و Permanent Marker من Google Fonts للرئيسية، و Careem للعربي، وفي المنيو Flavery و Lato و Myriad Pro زي المنيو المطبوع، والخطوط الخاصة مستضافة على الموقع نفسه |
| الأوضاع | فاتح وداكن بيتبعوا إعداد الجهاز ويتحفظوا في المتصفح، ولوجو لكل وضع، وفلتر للخريطة في الوضع الداكن |
| محركات الإجابة | ملف llms.txt بملخص المطعم والمنيو والصفحات، و robots.txt بيسمح بالاسم لزواحف ChatGPT و Claude و Perplexity و Google-Extended و Applebot-Extended |
| المشاركة | وسوم Open Graph و Twitter Card بصورة 1200×630 للمشاركة على واتساب والسوشيال، وأيقونات من 48 لـ 512 بكسل |
| الاستضافة | Hostinger على سيرفر LiteSpeed |
أبرز المميزات
رئيسية بتعرض الأكل قبل الكلام
أول ما الصفحة تفتح فيه شريط أحمر بيجري بشعار المطعم، وبعده اللوجو وسطر «From Cali to the Kingdom» وصورة كبيرة. بعدها صورة الصاج والبرجر بيتضغط وعليها زرار المنيو، وفيديو قصير جوه إطار موبايل، وست صور من المطبخ والفريق. الكلام في الرئيسية كله يتقري في دقيقة.
منيو بالسعر والسعرات بلغتين
صفحة المنيو فيها أربع أقسام بأزرار تنقل بينهم: البرجر، البطاطس، الحلويات والمشروبات، والصوصات. كل صنف عليه مكوّناته وسعره بالريال وسعراته، ومكتوب تحت إن كل الأسعار شاملة الضريبة. البرجر من 32 ريال للأولد سكول لحد 42 للفيرست ستريت برجر، والبطاطس من 9 ريال. وزرار واحد بيقلب الصفحة عربي أو إنجليزي، واللغة اللي اختارها الزائر بتتحفظ.
نفس خطوط المنيو المطبوع
المنيو على الموقع بيستخدم نفس خطوط المنيو المطبوع: Flavery لأسماء الأصناف والعناوين، و Lato للوصف، و Myriad Pro للسعرات، و Careem للعربي. فاللي شاف المنيو في الفرع بيعرف الصفحة من أول نظرة. والخط الأساسي بيتحمّل بالتوازي مع الصفحة عشان أسماء الأصناف ماتظهرش بخط تاني وتتبدّل.
وضع فاتح وداكن من غير ومضة
الموقع بيقرا إعداد جهاز الزائر ويفتح عليه، ولو الزائر غيّر الوضع بإيده الاختيار بيتحفظ. والكود اللي بيحدد الوضع شغال في رأس الصفحة قبل ما أي حاجة تترسم، فمفيش ومضة بيضا لما حد يفتح الموقع بالليل على وضع داكن. واللوجو ليه نسختين، وخريطة جوجل المدمجة بتتقلب ألوانها مع الوضع الداكن.
العنوان والمواعيد والتواصل في قسم واحد
قسم «زورنا» فيه العنوان بالكامل مع لينك لخرائط جوجل وخريطة مدمجة، والمواعيد لكل يوم، وحسابات إنستجرام وتيك توك. مفيش رقم تليفون منشور، والتواصل بيحصل من إنستجرام أو من تطبيق الطابور، وده مكتوب بوضوح في llms.txt عشان محدش يخترع رقم.
ست أسئلة شائعة بإجابات قصيرة
المطعم فين، بيفتح إمتى، البرجر بكام، لازم أقف في الطابور، وإيه اللي بيخلي البرجر سماش، وتقييم المطعم. كل سؤال بيفتح بإجابة قصيرة، ونفس الإجابات موجودة في بيانات FAQPage. وسؤال الطابور بيودّي على صفحة حجز الدور وعلى التطبيق في App Store و Google Play.
دليلين بالعربي حوالي ألفين كلمة
كل دليل بفهرس في أوله، وتاريخ آخر تحديث، ووقت قراءة، ومسار تنقل، وجداول، وأسئلة شائعة في آخره، وبيخلص بأزرار للمنيو والموقع على الخريطة وحجز الدور. ودليل «سماش برجر الرياض» حوالي 2,300 كلمة، ودليل «أفضل برجر بالرياض» حوالي 2,150 كلمة.
مطبوعات للفرع: قسيمة هدية وكود QR للتطبيق
جنب الموقع صمّمنا للمطعم قسايم هدية بأكتر من شكل، بالعربي والإنجليزي وبكود استخدام لمرة واحدة. وعملنا أداة داخلية بتطلّع كارت القسيمة: الموظف بيحدد قيمة الخصم ولغة الكارت ويختار من 15 تصميم، والأداة بتولّد كود من 8 خانات وبتنزّل الكارت صورة PNG، وبتحفظ سجل بالأكواد اللي اتصرفت. وعملنا بوستر «حمّل التطبيق» بكودين QR، واحد لـ App Store وواحد لـ Google Play.
مراحل التنفيذ
- البحث: سحبنا كلمات البحث عن البرجر والسماش في الرياض بالعربي والإنجليزي، وقسّمناها براند ومحلي وفئة، وطلّعنا منها 504 كلمة مستهدفة.
- خريطة الصفحات: وزّعنا الكلمات على خمس صفحات، كل صفحة ليها نية بحث واحدة، عشان مايبقاش فيه صفحتين بيتنافسوا على نفس الكلمة.
- التصميم: بنينا الرئيسية الإنجليزية على هوية المطعم: الأصفر والأسود والأحمر بتاع الشريط، وخطوط Fjalla One و Permanent Marker، وصور المطعم الحقيقية.
- النسخة العربية: كتبنا سكربت
build-ar.pyاللي بيولّد/arمن الإنجليزي، وراجعنا الكلام العربي سطر سطر عشان يتقري طبيعي مش مترجم. - المنيو: نقلنا المنيو المطبوع بخطوطه وأسعاره وسعراته لصفحة بلغتين، وكتبنا لكل صنف بيانات MenuItem بالسعر والسعرات.
- الدليلين: كتبنا دليل السماش ودليل اختيار البرجر بالعربي، بجداول وأسئلة شائعة ولينكات للمنيو.
- السيو التقني: canonical و hreflang لكل صفحة، وخريطة موقع بروابط اللغة البديلة، وبيانات منظّمة، وصورة مشاركة، وأيقونات بكل المقاسات.
- محركات الإجابة: ملف llms.txt وفتح robots بالاسم لزواحف الذكاء الاصطناعي.
- الإطلاق: رفع الملفات على استضافة Hostinger وتجربة الصفحات على الموبايل والكمبيوتر في الوضعين.
تجربة المستخدم
الزائر اللي جاي من جوجل على الموبايل بيشوف اللوجو والجملة الأولى في أول شاشة، ومنيو جانبي فيه: القائمة، الصور، الموقع، أسئلة شائعة، وزرار «تواصل معنا». وجنبهم زرار اللغة وزرار الوضع الداكن. مفيش نوافذ منبثقة ولا شريط كوكيز بيغطي الصفحة.
اللي عايز يعرف السعر بس بيدوس «القائمة» ويوصل للمنيو على طول، وأزرار الأقسام فوق بتنقله للبطاطس أو الصوصات من غير ما يسكرول. واللي عايز ييجي بيلاقي العنوان والمواعيد ولينك الخريطة في قسم واحد. واللي خايف من الطابور بيلاقي إجابة السؤال ده في الأسئلة الشائعة مع لينك حجز الدور.
والنسخة العربية مش مرآة للإنجليزية. الشريط المتحرك فيه جمل عربية زي «سماش برجر على أصوله»، والعناوين اتكتبت بالعربي من الأول زي «صور تفتّح النفس» و«زورنا» و«اقرأ أكثر». وصفحة 404 بالعربي برضه، بتقول للزائر إن الصفحة مش موجودة وبتديله لينكات للرئيسية والمنيو والدليلين والموقع وحجز الدور.
والصفحات خفيفة: مفيش إطار عمل بيتحمّل قبل المحتوى، والصور بتتحمّل لما الزائر يوصلها، والصورة الأولى بس هي اللي ليها أولوية تحميل.
النتائج والأثر
الموقع شغال على firststreetburgers.com بالعربي والإنجليزي، والخمس صفحات بيرجّعوا 200 وموجودين في خريطة الموقع، وصفحة 404 بترجّع 404 فعلاً. والبيانات المنظّمة موجودة في كل صفحة، والمنيو كله بأسعاره وسعراته مكتوب بطريقة جوجل يقدر يقراها.
مش هننشر هنا أرقام زيارات أو ترتيب في البحث، دي بيانات المطعم. اللي نقدر نقوله إن المطعم بقى عنده مصدر واحد رسمي بيتكلم عنه بلغتين، وأي تعديل في السعر أو المواعيد بيتعمل في مكان واحد. والنسخة العربية مابقتش ممكن تتأخر عن الإنجليزي لأنها بتتبني منه.
والموقع والتطبيق بقوا شغالين مع بعض: الموقع بيرد على أسئلة ما قبل الزيارة، وأول ما الزبون يقرر ييجي بيودّيه على تطبيق الطابور ياخد دوره من موبايله.
الأسئلة الشائعة
إيه هو موقع فيرست ستريت برجر؟
موقع مطعم سماش برجر في حي النرجس بالرياض، بنته Younex على firststreetburgers.com. فيه صفحة رئيسية بالإنجليزي ونسخة عربية، وصفحة منيو بالأسعار والسعرات بلغتين، ودليلين بالعربي عن السماش برجر واختيار البرجر في الرياض.
هل الموقع بيبيع أونلاين؟
لأ. الموقع بيعرّف بالمطعم ومنيوه ومكانه ومواعيده. والطلب بيحصل في الفرع، والزحمة بيتعامل معاها تطبيق الطابور اللي الموقع بيودّي عليه.
النسخة العربية بتتحدّث إزاي؟
بسكربت Python بيبني صفحة /ar من الصفحة الإنجليزية، ويبدّل الكلام والبيانات بس ويسيب التصميم. فأي تعديل في التصميم بيوصل للعربي أول ما السكربت يشتغل، من غير نسخ يدوي.
ليه الموقع من غير لوحة تحكم؟
لأن المحتوى اللي بيتغيّر قليل: سعر صنف أو ميعاد. فاخترنا صفحات جاهزة خفيفة من غير قاعدة بيانات، بتفتح بسرعة ومفيهاش حاجة تحتاج تحديثات أمان. والتعديلات بتتعمل في الكود وبتترفع.
إيه فايدة ملف llms.txt؟
ده ملف نصي على الموقع بيلخّص المطعم لأدوات زي ChatGPT و Perplexity: العنوان والمواعيد والمنيو بالأسعار والصفحات. الأدوات دي لما تتسأل عن المطعم بيبقى عندها مصدر رسمي تاخد منه بدل ما تخمّن.
إيه العلاقة بين الموقع وتطبيق فيرست ستريت؟
الاتنين لنفس المطعم ومن شغل Younex. الموقع للتعريف والمنيو والبحث، والتطبيق لحجز الدور في الطابور ونقاط الولاء. والموقع فيه لينكات للتطبيق على App Store و Google Play ولصفحة الحجز على الويب.
الموقع بيشتغل كويس على الموبايل؟
أيوه، الصفحات مصممة للموبايل الأول، بمنيو جانبي وأزرار كبيرة، والصور بتتحمّل لما الزائر يوصلها. والوضع الداكن متاح على الموبايل والكمبيوتر.
إيه المطبوعات اللي اتعملت مع الموقع؟
قسايم هدية بأكتر من تصميم، وأداة داخلية بتطلّع كارت القسيمة بكوده وقيمته ولغته وتنزّله صورة، وبوستر بكودين QR لتحميل التطبيق من App Store و Google Play.