أنشاء صور OG بأستعمال ال Edge Function

Mohanad Alrwaihy

February 21, 2023

198

صور ال Open Graph (OG) مهمة لأي موقع لزيادة التفاعل في الموقع عندما يتم نشر رابط لصفحة من موقعك على مواقع التواصل الاجتماعي وزيادة الزوار

5 دقائق للقراءة

في هذه المقالة سوف نتعلم عن الOpen Graph (OG) وكيف نستخدمها في اي صفحة وكيف بأمكاننا أنشاء صور بشكل تلقائي بأستعمال Vercel Edge Functions

ما هيا الOpen Graph (OG)؟

الخصائص الخاصة بOG مسوؤلة عن كيفية ظهور الموقع عند نشر الرابط على مواقع التواصل الأجتماعي.

عند نشر رابط على فيسبوك, تويتر, واتس اب, أو اي موقع تواصل أجتماعي أحيانا يمكنك أن ترى انه هناك صورة على الرابط الذي تريد نشره وذلك يجعل الرابط أكثر جاذبية و لكن أحيانا لا يمكنك ان ترى أي صورة وهذا بسبب انه لا يوجد OG Meta Tags في الHead الخاص بالصفحة.

الفرق بين OG و No OG:

بالأسفل مثال على نشر رابط لواحد من مقالاتي في تويتر ويمكن رؤية الفرق عند نشر رابط يوجد به أوسمة meta يوجد فيها خصائص الOG ورابط لا يوجد به.

يوجد صورة OG:

لا توجد صورة OG:

كيف نستعمل خصائص OG؟

علينا أن نعرف أولا أوسمة meta المستخدمة في الhead الخاص بالHTML ويمكننا أستخدام الOG في الproperty الخاص بوسام meta ويمكننا تحديد اذا كان هذا خاص بالOG او لا عن طريق رؤية :og قبل اسم الproperty.

الخصائص الخاصة بOG:

`og:title`

هذه تستعمل لتحديد عنوان للمحتوى.

CSHTML

<meta property="og:title" content="Generate OG Image" />

`og:description`

هذه تستعمل لكتابة المزيد من المعلومات عن المحتوى.

CSHTML

<meta property="og:description" content="Open Graph (OG) Images are important for any site to increase interactivity when the link of your site is linked around the web..." />

`og:url`

الرابط الخاص بالمحتوى.

CSHTML

<meta property="og:url" content="https://mohanad.in/blog/generate-og-image" />

`og:image`

هنا نضع الصورة المراد عرضها عند نشر هذه الصفحة.

CSHTML

<meta property="og:image" content="https://imageURL.jpg" />

`og:image:type`

تحديد صيغة الصورة.

CSHTML

<meta property="og:image:type" content="image/jpeg" />

`og:image:width`

تحديد عرض الصورة.

CSHTML

<meta property="og:image:width" content="800" />

`og:image:heigh`

تحديد طول الصورة.

CSHTML

<meta property="og:image:heigh" content="600" />

`og:type`

نوع المحتوى المنشور.

CSHTML

<meta property="og:type" content="article" />

`og:locale`

تحديد لغة المحتوى في الصفحة.

CSHTML

<meta property="og:locale" content="en" />

أستخدام Vercel Edge Functions

أستخدام دوال الEdge والتي هيا عبارة عن دوال مخزنة في سيرفرات قريبة من المستخدم و Vercel يساعدنا على القيام بهذه العملية بشكل أسهل لخدمة المستخدمين من أستقبال البيانات عن طريق سيرفرات أقرب لهم.

سوف نقوم بأستخدام Vercel لأنشاء الدوال العالمية بشكل تلقائي عن طريق Next JS في هذا المثال لكن هناك العديد من الطرق لأنشاء صور OG بشكل تلقائي وهذه بعض الأمثلة 👇

الخطوات 🪜

الخطوة 1: إنشاء تطبيق Next JS

سوف اقوم بإنشاء تطبيق Next JS مع TailwindCSS 👇

POWERSHELL

npx create-next-app next-og -e with-tailwindcss

الخطوة 2: مجلد الAPI في NEXT JS:

في مجلد pages/api/ انشئ ملف بهذا الأسم og.tsx

سوف نقوم بأستخدام هذا الAPI في الواجهة الأمامية لأنشاء الصور.

علينا القيام بتنزيل vercel/og@ عن طريق القيام بهذا الأمر 👇

POWERSHELL

npm install @vercel/og

بداخل ملف og.tsx أستدعي imageResponse من vercel/og@ وسوف نقوم بتفعيل Edge Runtime في خيارات التعديل عن طريق كتابة 'runtime:'edge

TYPESCRIPT

import { ImageResponse } from '@vercel/og'

export const config = {
 runtime: 'edge',  
}

الخطوة 3: انشاء صور جامدة

لأنشاء صور جامدة بأمكاننا تصدير دالة وبأستخدام imageResponse يمكننا نرجع JSX الذي سوف يتحول في النهاية الى صورة عند استدعاء الAPI ويجب ان نحدد الطول والعرض الخاص بالصورة.

TSX

export default function () {
 return new ImageResponse(
  (
   <div
    style={{
     fontSize: 128,
     color: 'white',
     background: 'linear-gradient(90deg, #3fedfb, #8046fc)',
     width: '100%',
     height: '100%',
     display: 'flex',
     textAlign: 'center',
     alignItems: 'center',
     justifyContent: 'center',
    }}
   >
    Hello world!
    <span>I'm an Image!</span>
   </div>
  ),
  {
   width: 1200,
   height: 600,
  }
 )
}

الأن عند إستدعاء الAPI سوف نرى الصورة التالية 👇

لأستعمال الOG هذه في الصفحة الرئيسية يجب إتباع الخطوات التالية 👇

انشئ </meta> داخل ال </head> في الصفحة المرادة.
أضيف خاصية od:image والcontent يجب ان يكون الرابط للصورة.

ضيف OG للصفحة الرئيسية 👇

TSX

<Head>
  <title>Generate OG Images</title>
  <meta
    property='og:image'
    content='https://[URL]/api/og'
  />
  <link rel='icon' href='/favicon.ico' />
</Head>

هذه الصورة سوف تكون نفسها طوال الوقت لكن بأمكاننا تغيير محتوى الصورة ونجعلها Dynamic.

الخطوة 4: أنشاء صور ديناميكية

العنصر المطلوب لجعل الصور ديناميكية هوا العوامل (paramters) المطلوبة لملئ الصورة.

دعنا نبدء بأستدعاء NextRequest 👇

TSX

import {NextRequest} from 'next/server';

ونقوم بهذه التعديلات على الدالة 👇

TSX

export default function handler(req: NextRequest){
	try {
 return new ImageResponse(
   (
    <div>
	  {/* ... */}
    </div>
   ),
   {
    width: 1200,
    height: 600,
   }
  )
	} catch (e: any) {
	 return new Response('Failed to generate the image', {
	 status: 500,
  })

 }
}

بداخل الtry بأمكاننا معرفة العوامل في رابط البحث 👇

TSX

const {searchParams} = new URL(req.url)

أستخراج العنوان من العوامل اذا كان موجود 👇

TSX

// ?title = <title/>
const title = searchParams.get('title') || "Hello World!"

استبدل Hello World بالمتغير title 👇

TSX

<h1>{title}</h1>

الأن استعدي الAPI وضف معه العنوان المراد وضعه على الصورة لكي ترى النتيجة.

مثال 👈 api/og?title=Home Page/

استبدل محتوى الcontent في الصفحة الرئيسية بالرابط الجديد.

التعديلات

بأمكاننا القيام بالكثير من التعديلات الخاصة بالتصميم وكيف ستظهر الصورة النهائية.

جرب OG Image Playground المقدم من Vercel.

أستخدام الايموجيات

جرب ان تضيف ايموجي بجانب العنوان لترى كيف سيظهر:

TSX

<h1>{title} 👋</h1>

بعد اضافة معلومات الطول والعرض الخاصة بالصورة بأمكانك أضافة emoji وتختار واحدة من هذه الأنواع من الايموجيات 👇

twemoji - الأفتراضي
blobmoji
noto
openmoji
fluent
fluentFlat

مثال👇

TSX

{
   width: 1200,
   height: 600,
   emoji: 'fluent',
}

أضافة خط خاص

لأضافة خط خاص على الصورة علينا اولا أن نظيف الخط المراد في مجلد /public/assets في المجلد الرئيسي للمشروع.

بأمكانك البحث عن خطوط هنا 👈 Google Fonts

سوف اقوم بأستخدام هذا الخط Rancho Regular وهذا اسمه بعد التحميل وحفظه Rancho-Regular.ttf

الان في ملف api/og.tsx/ قبل الدالة أضف هذا الكود لأستدعاء الخط من مجلد الassets/

TSX

const font = fetch(
&nbsp; new URL('../../public/assets/Rancho-Regular.ttf', import.meta.url)
).then((res) => res.arrayBuffer())

ضف معلومات الخط في أعدادات الصورة المنشئة 👇

TSX

{
   width: 1200,
   height: 600,
   emoji: 'fluent',
   fonts: [
	{
	name: 'Rancho',
	data: fontData,
	style: 'normal',
    },
   ]
}

الأن جميع الخطوط في الصورة ستكون بأستخدام الخط الذي اخترته بشكل تلقائي و لكن اذا كان هناك اكثر من خط تريد أستعماله يمكنك تحديد نوع الخط بالطريقة هذه 👇

TSX

<h1 style={{fontFamily: '"Rancho"'}}>{title} 👋</h1>

مثال 👈 api/og?title=Home Page/

أستخدام TailwindCSS

بأمكاننا استبدال طريقة التصميم التقليدية بTailwindCSS

الغلاف المحيط بالعناصر يجب ان يتم تحديد display: flex وإلى لن يتم أنشاء الصورة بالشكل المطلوب.

بأمكاننا استخدام الميزة tw بدل عن className والقيام بأستخدام TailwindCSS

TSX

<div
  style={{ background: 'linear-gradient(90deg, #3fedfb, #8046fc)'}}
  tw='text-[128px] text-white w-full h-full flex text-center items-center justify-center'
  >
  <h1 tw='uppercase'>{title} 👋</h1>
</div>

عليك الحذر لأنه ليست جميع كلاسات TailwindCSS مدعومة ولهذا السبب استعملت linear-gradient بطريقة الستايل التقليدية وقم بالتجربة هنا لترى النتائج 👈 Vercel OG Playground