هل سبق لك أن أردت أن يظهر موقع Next.js الخاص بك ككائن غني عند مشاركته على وسائل التواصل الاجتماعي؟ إذا كان الأمر كذلك ، فأنت بحاجة إلى تنفيذ بروتوكول Open Graph.

تسهل حزمة next-seo إضافة علامات Open Graph إلى موقع Next.js الخاص بك. يمكنك أيضًا استخدام نهج يدوي أكثر للتحكم بشكل أفضل في النتيجة النهائية.

أخيرًا ، سترغب في التفكير بالضبط في المعلومات التي يجب تضمينها في علاماتك.

ما هو الرسم البياني المفتوح؟

بروتوكول Open Graph هو معيار مفتوح يسمح للمطورين بالتحكم في كيفية عرض الوسائط الاجتماعية لمحتواها. تم تطويره في الأصل بواسطة Facebook ولكن العديد من المنصات الأخرى اعتمدت البروتوكول منذ ذلك الحين. وتشمل هذه Twitter و LinkedIn و Pinterest.

يتيح لك Open Graph تحديد كيفية عرض المواقع الأخرى للمحتوى الخاص بك بدقة ، مما يضمن ظهوره بشكل جيد وسهل القراءة. كما يسمح بتحكم أكبر في كيفية عرض الروابط. هذا يجعل من السهل تتبع النقرات ومقاييس التفاعل الأخرى.

لماذا نستخدم بروتوكول Open Graph؟

هناك ثلاثة مجالات رئيسية يجب على Open Graph تحسينها: مشاركة وسائل التواصل الاجتماعي ، وتحسين محركات البحث ، وحركة مرور الموقع.

instagram viewer

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

2. تحسين السيو

يمكن أن يساعدك Open Graph أيضًا تحسين SEO الخاص بك. من خلال تحديد العنوان والوصف والصورة لكل جزء من المحتوى ، يمكنك التحكم في كيفية ظهوره في نتائج البحث. يمكن أن يساعد هذا في زيادة نسبة النقر إلى الظهور على موقع الويب الخاص بك ، وكذلك تحسين الترتيب العام الخاص بك.

3. زيادة حركة المرور على الموقع

أخيرًا ، يمكن أن يساعد Open Graph في زيادة حركة المرور على موقع الويب. من خلال تسهيل مشاركة المستخدمين للمحتوى الخاص بك ، يمكنك زيادة عدد الأشخاص الذين يشاهدونه. وهذا بدوره يمكن أن يؤدي إلى المزيد من زوار الموقع وزيادة حركة المرور.

4. تحسين تجربة المستخدم

فائدة أخرى لاستخدام بروتوكول Open Graph هي أنه يمكن أن يحسن تجربة المستخدم على موقع الويب الخاص بك. من خلال تضمين البيانات الوصفية ، يمكنك المساعدة في الوصول وإعادة استخدام البيانات ، مما يضمن رؤية المستخدمين للمعلومات الأكثر صلة. يمكن أن يؤدي ذلك إلى تجربة عامة أفضل على موقعك ، مما قد يؤدي إلى عودة المزيد من الزوار.

لماذا أستخدم Next.js؟

هناك سببان رئيسيان لاستخدام Next.js: لتحسين الأداء وتسهيل التطوير.

1. تحسين الأداء

يمكن أن يساعد Next.js في تحسين الأداء عن طريق تقسيم تطبيقك وجلب الموارد مسبقًا. يمكن أن يؤدي ذلك إلى وقت تحميل أسرع وتقليل تحميل الخادم.

2. اجعل التنمية أسهل

يمكن لـ Next.js أيضًا تسهيل التطوير من خلال توفير طريقة بسيطة لـ إنشاء تطبيقات React التي يعرضها الخادم. هذا يمكن أن يجعل تطوير ونشر تطبيقات React أسرع وأسهل.

كيفية تنفيذ بروتوكول Open Graph في Next.js

هناك طريقتان لتنفيذ بروتوكول Open Graph في Next.js: استخدام حزمة SEO التالية أو إنشاء حزمة مخصصة _document.js ملف.

الطريقة الأولى: استخدام حزمة next-seo

أسهل طريقة لتنفيذ بروتوكول Open Graph في Next.js هي استخدام حزمة SEO التالية. ستنشئ هذه الحزمة تلقائيًا العلامات الضرورية لك.

لتثبيت حزمة next-seo ، قم بتشغيل الأمر التالي:

npm تثبيتالتالي-حديث --حفظ

بعد تثبيت الحزمة ، يمكنك استخدامها عن طريق إضافة الكود التالي إلى ملف index.js ملف:

يستورد {NextSeo} من "التالي سيو" ؛
مقدار ثابت الصفحة التجريبية = () => (
<>
<التالي
 العنوان ="لقبك"
 الوصف ="هذا وصف تجريبي"
 الكنسي ="https://www.example.com"
 openGraph = {{
 عنوان url: 'https://www.example.com',
 لقب: 'افتح عنوان الرسم البياني',
 وصف: 'افتح وصف الرسم البياني',
 الصور: [
 {
 عنوان url: 'https://www.example.com/og-image01.jpg',
 العرض: 800 ،
 الارتفاع: 600 ،
 بديل: 'Og Image Alt',
 يكتب: 'صورة / jpeg',
 },
 {
 عنوان url: 'https://www.example.com/og-image02.jpg',
 العرض: 900 ،
 الارتفاع: 800 ،
 بديل: 'Og Image البديل الثاني',
 يكتب: 'صورة / jpeg',
 },
 { عنوان url: 'https: //www.example.com/og-image03.jpg '} ،
 { عنوان url: 'https: //www.example.com/og-image04.jpg '} ،
 ],
 اسم الموقع: 'YourSiteName',
 }}
 تويتر = {{
 يتعامل: '@يتعامل',
 موقع: '@موقع',
 نوع البطاقة: 'ملخص_كبير_صورة',
 }}
 />
<ص>الصفحة التجريبية</ ص>
</>
);
يصدّرإفتراضي الصفحة التجريبية

يستورد هذا الرمز مكون NextSeo من حزمة seo التالية ويستخدمه لتحديد العنوان والوصف والصورة للصفحة. كما تحدد اسم الموقع ومعرف Twitter.

قم بتشغيل الأمر التالي لبدء خادم التطوير:

npm تشغيل dev

فتح http://localhost: 3000 في متصفحك لرؤية الصفحة التجريبية.

الطريقة 2: استخدام ملف _document.js المخصص

هناك طريقة أخرى لتنفيذ بروتوكول Open Graph في Next.js وهي إنشاء ملف _document.js ملف. سيسمح لك هذا الملف بتحديد علامتي Open Graph بنفسك و إنشاء رمز قابل لإعادة الاستخدام لجميع الصفحات.

لاقامة العرف _document.js ملف ، قم بإنشاء ملف جديد في ملف الصفحات دليل بالمحتويات التالية:

يستورد مستند ، {Html ، Head ، Main ، NextScript} من 'التالي/وثيقة';
صف دراسيملفاتييمتدوثيقة{
ثابتةغير متزامن getInitialProps (ctx) {
مقدار ثابت بدلات أولية = انتظر Document.getInitialProps (ctx) ،
إرجاع {... initialProps} ؛
 }


يجعل() {
إرجاع (
<لغة البرمجة>
<رأس>
<خاصية التعريف ="og: url" المحتوى ="https://www.example.com" />
<خاصية التعريف ="og: العنوان" المحتوى ="افتح عنوان الرسم البياني" />
<خاصية التعريف ="og: الوصف" المحتوى ="افتح وصف الرسم البياني" />
<خاصية التعريف ="og: صورة" المحتوى ="https://www.example.com/og-image.jpg" />
<خاصية التعريف ="og: site_name" المحتوى ="YourSiteName" />
<اسم التعريف ="تويتر: بطاقة" المحتوى ="ملخص_كبير_صورة" />
<اسم التعريف ="تويتر: الموقع" المحتوى ="@موقع" />
<اسم التعريف ="تويتر: الخالق" المحتوى ="@يتعامل" />
</Head>
<هيئة>
<رئيسي />
<NextScript />
</body>
</Html>
 );
 }
}
يصدّرإفتراضي ملفاتي؛

أضف المحتوى أدناه إلى ملف index.js الخاص بك:

مقدار ثابت الصفحة التجريبية = () => (
<>
<ص>الصفحة التجريبية</ ص>
</>
);
يصدّرإفتراضي الصفحة التجريبية

يستورد هذا الرمز مكون المستند من المستند التالي وينشئ ملفًا مخصصًا ملفاتي مكون. تحدد العنوان والوصف والصورة لصفحتنا ، بالإضافة إلى اسم الموقع ومعرف Twitter.

قم بتشغيل الأمر التالي لبدء خادم التطوير:

npm تشغيل dev

فتح http://localhost: 3000 في متصفحك لرؤية الصفحة التجريبية.

يمكن أن تمنحك إضافة علامات Open Graph إلى موقع الويب الخاص بك مزيدًا من التحكم في كيفية ظهورها في منشورات الوسائط الاجتماعية ويمكن أن تساعد في تحسين معدلات النقر. يمكنك أيضًا تحسين طريقة ظهور موقع الويب الخاص بك في SERPs ، مما قد يؤدي في النهاية إلى تحسين ترتيب موقع الويب.

هناك أيضًا العديد من الطرق الأخرى لتحسين ترتيب الموقع. يجب عليك تحسين موقع الويب الخاص بك للأجهزة المحمولة واستخدام عناوين وأوصاف غنية بالكلمات الرئيسية. لكن استخدام علامات Open Graph يعد طريقة سريعة وسهلة للبدء.