مولّد Open Graph

حول هذه الأداة

انظر، لقد كنت أقوم ببناء المواقع الإلكترونية لسنوات، وهناك شيء واحد لا يزال يزعجني هو مدى تكرار منصات التواصل الاجتماعي في تشويه معاينة الروابط الخاصة بك. تضع رابطًا في فيسبوك أو تويتر، وبدلًا من عرض الصورة الجميلة والعنوان النظيف، تحصل على صورة مصغرة ضبابية ونص ناقص. إنه مزعج. لهذا السبب بنيت مولّد Open Graph هذا — لأنني تعبت من التخمين بشأن وسوم الـ meta التي يجب كتابتها وما إذا كانت الصورة ستظهر فعلاً أم لا. ليست أداة فاخرة. لا ذكاء اصطناعي، ولا اشتراكات، ولا نوافذ منبثقة. مجرد أداة بسيطة تساعدك على إنشاء وسوم Open Graph الصحيحة حتى تبدو روابطك جيدة عند مشاركتها. سواء كنت تنشر مدونة، أو صفحة منتج، أو مجرد مشروع عشوائي، فإن هذه الأداة تُخرج الكود الذي تحتاجه. قم بلصقه في ملف HTML الخاص بك، وانتهى الأمر.

الميزات الرئيسية

• تُنشئ جميع وسوم Open Graph الأساسية (العنوان، الوصف، الصورة، الرابط، النوع، إلخ)
• تسمح لك بمعاينة كيف سيبدو الرابط الخاص بك على فيسبوك، تويتر، ولينكدإن
• تدعم تحميل الصور المخصصة — لأن الصور الجاهزة لا تكفي
• تتحقق من أبعاد الصورة وتحذرك إذا كان هناك خطأ ما
• تُخرج وسوم HTML النظيفة الجاهزة للاستخدام
• لا حاجة للتسجيل. لا تتبع. لا تعقيدات.

الأسئلة الشائعة

لماذا أحتاج وسوم Open Graph أصلاً؟
لأن منصات التواصل الاجتماعي لا تقرأ صفحتك مثل المتصفح. إنها تستخرج وسوم الـ meta المحددة لبناء بطاقة المعاينة. بدونها، يبدو رابطك معطلاً أو عامًّا. هذه الوسوم تخبر فيسبوك، تويتر، إلخ، بالضبط ما هي الصورة والعنوان والوصف التي يجب عرضها.

هل سيعمل هذا مع الصفحات الديناميكية (مثل React أو WordPress)؟
نعم — ولكن ستحتاج إلى حقن الوسوم المُنشأة ديناميكيًا داخل الصفحة. الأداة توفر لك الكود؛ وكيفية استخدامك له تعتمد على إعداداتك. بالنسبة للمواقع الثابتة، ما عليك سوى لصقه. أما بالنسبة للإطارات البرمجية، فقد تستخدم قالبًا أو إضافة.