تنزيل next seo - تنزيل كود مصدر next seo

هل شاهدت النشرة الإخبارية Next.js الجديدة؟

لافتة NextjsWeekly

أدوات مفيدة

أطلقت dub مؤخرًا أداة إنشاء UTM مجانية ومفيدة! يمكنك استخدامه هنا

تحسين محركات البحث التالي

Next SEO هو مكون إضافي يجعل إدارة SEO الخاصة بك أسهل في مشاريع Next.js.

طلبات السحب هي موضع ترحيب كبير. تأكد أيضًا من مراجعة مشكلات طلبات الميزات إذا كنت تبحث عن الإلهام بشأن ما تريد إضافته.

هل ترغب في دعم هذا البرنامج المساعد المجاني؟

يستغرق الحفاظ على مشروع مفتوح المصدر الكثير من الوقت، لذا فإن أي مساهمة صغيرة موضع تقدير كبير.

ترميز وقود القهوة ☕️

Next-seo.wallet (ERC20 وSOL)

ملاحظة على دليل التطبيق

هذه الملاحظة ذات صلة فقط في حالة استخدام دليل app .

بالنسبة لبيانات التعريف القياسية (على سبيل المثال، <title>)، يوصى بشدة باستخدام طريقة generateMetaData المضمنة. يمكنك التحقق من المستندات هنا

بالنسبة لـ JSON-LD، التغيير الوحيد المطلوب هو إضافة useAppDir={true} إلى مكون JSON-LD قيد الاستخدام. يجب عليك إضافة استخدام هذا المكون في page.js الخاص بك وليس head.js الخاص بك.

 <ArticleJsonLd
  useAppDir={true}
  url="https://example.com/article"
  title="Article headline" <- required for app directory
  />

إذا كنت تستخدم دليل pages ، فإن NextSeo هو بالضبط ما تحتاجه لاحتياجات تحسين محركات البحث الخاصة بك!

جدول المحتويات

الاستخدام
- يثبت
- إضافة SEO إلى الصفحة
- التكوين الافتراضي لكبار المسئولين الاقتصاديين
- خيارات السيو التالي
  - قالب العنوان
  - العنوان الافتراضي
  - لا يوجد فهرس
  - DangerlySetAllPagesToNoIndex
  - لا متابعة
  - DangerlySetAllPagesToNoFollow
  - robotsProps
  - تغريد
  - فيسبوك
  - عنوان URL الأساسي
  - البديل
  - العلامات التعريفية الإضافية
  - علامات الارتباط الإضافية
افتح الرسم البياني
- افتح أمثلة الرسم البياني
  - أساسي
  - فيديو
  - صوتي
  - شرط
  - كتاب
  - حساب تعريفي
JSON-LD
- أمان JSON-LD
- التعامل مع حالات متعددة
- شرط
- مسار التنقل
- مدونة
- المخيم
- وصفة
- مربع البحث في روابط أقسام الموقع
- دورة
- مجموعة البيانات
- الاتصال بالشركة
- صفحة الأسئلة الشائعة
- كيف
- نشر الوظيفة
- الأعمال المحلية
- الشعار
- منتج
- الملف الاجتماعي
- مقالة إخبارية
- حديقة
- فيديو
- لعبة فيديو
- حدث
- سؤال وجواب
- صفحة التجميع
- صفحة الملف الشخصي
- دائري
  - الافتراضي (قائمة التلخيص)
  - دورة
  - فيلم
  - وصفة
  - مخصص
- تطبيق البرمجيات
- منظمة
- ماركة
- صفحة على الإنترنت
- البيانات الوصفية للصورة
المساهمين

الاستخدام

يعمل NextSeo من خلال تضمينه في الصفحات التي ترغب في إضافة سمات تحسين محركات البحث إليها. بمجرد تضمينها في الصفحة، يمكنك تمرير كائن تكوين لها مع خصائص تحسين محركات البحث الخاصة بالصفحة. يمكن إنشاء هذا ديناميكيًا على مستوى الصفحة، أو في بعض الحالات، قد تقوم واجهة برمجة التطبيقات (API) الخاصة بك بإرجاع كائن SEO.

يثبت

أولاً قم بتثبيته:

npm install next-seo

أو

yarn add next-seo

إضافة SEO إلى الصفحة

هل تستخدم دليل تطبيق Next.js المقدم في Next.js 13؟

إذا كنت تستخدم دليل تطبيق Next.js، فمن المستحسن بشدة استخدام طريقة generateMetaData المضمنة. يمكنك التحقق من المستندات هنا

إذا كنت تستخدم دليل pages ، فإن NextSeo هو بالضبط ما تحتاجه لاحتياجات تحسين محركات البحث الخاصة بك!

بعد ذلك، تحتاج إلى استيراد NextSeo وإضافة الخصائص المطلوبة. سيؤدي هذا إلى عرض العلامات الموجودة في <head> لتحسين محركات البحث. كحد أدنى، يجب عليك إضافة عنوان ووصف.

مثال مع العنوان والوصف فقط:

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      title = "Simple Usage Example"
      description = "A short description goes here."
    / >
    < p > Simple Usage < / p >
  < / >
) ;

export default Page ;

لكن NextSeo يمنحك العديد من الخيارات التي يمكنك إضافتها. انظر أدناه للحصول على مثال نموذجي للصفحة.

مثال الصفحة النموذجية:

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      title = "Using More of Config"
      description = "This example uses more of the available config options."
      canonical = "https://www.canonical.ie/"
      openGraph = { {
        url : 'https://www.url.ie/a' ,
        title : 'Open Graph Title' ,
        description : 'Open Graph Description' ,
        images : [
          {
            url : 'https://www.example.ie/og-image-01.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt' ,
            type : 'image/jpeg' ,
          } ,
          {
            url : 'https://www.example.ie/og-image-02.jpg' ,
            width : 900 ,
            height : 800 ,
            alt : 'Og Image Alt Second' ,
            type : 'image/jpeg' ,
          } ,
          { url : 'https://www.example.ie/og-image-03.jpg' } ,
          { url : 'https://www.example.ie/og-image-04.jpg' } ,
        ] ,
        siteName : 'SiteName' ,
      } }
      twitter = { {
        handle : '@handle' ,
        site : '@site' ,
        cardType : 'summary_large_image' ,
      } }
    / >
    < p > SEO Added to Page < / p >
  < / >
) ;

export default Page ;

ملاحظة على تويتر العلامات

إن Props cardType و site و handle تعادل twitter:card و twitter:site و twitter:creator . يمكن العثور على الوثائق هنا.

سيقرأ تويتر العلامات og:title og:image و og:description لبطاقته. يحذف next-seo twitter:title و twitter:image و twitter:description لتجنب التكرار.

قد تقوم بعض الأدوات بالإبلاغ عن هذا كخطأ. انظر العدد رقم 14

التكوين الافتراضي لكبار المسئولين الاقتصاديين

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

لتحقيق ذلك، سوف تحتاج إلى إنشاء <App> مخصص. في دليل صفحاتك، قم بإنشاء ملف جديد، _app.js . راجع مستندات Next.js هنا لمزيد من المعلومات حول <App> المخصص.

ستحتاج ضمن هذا الملف إلى استيراد DefaultSeo من next-seo وتمرير الدعائم إليه.

هنا مثال نموذجي:

 import App , { Container } from 'next/app' ;
import { DefaultSeo } from 'next-seo' ;

// import your default seo configuration
import SEO from '../next-seo.config' ;

export default class MyApp extends App {
  render ( ) {
    const { Component , pageProps } = this . props ;
    return (
      < Container >
        < DefaultSeo
          openGraph = { {
            type : 'website' ,
            locale : 'en_IE' ,
            url : 'https://www.url.ie/' ,
            siteName : 'SiteName' ,
          } }
          twitter = { {
            handle : '@handle' ,
            site : '@site' ,
            cardType : 'summary_large_image' ,
          } }
        / >
        < Component { ... pageProps } / >
      < / Container >
    ) ;
  }
}

لكي يعمل بشكل صحيح، يجب وضع DefaultSeo فوق (قبل) Component بسبب سلوك مكونات Next.js الداخلية.

وبدلاً من ذلك، يمكنك أيضًا إنشاء ملف تكوين لتخزين القيم الافتراضية مثل next-seo.config.js

 export default {
  openGraph : {
    type : 'website' ,
    locale : 'en_IE' ,
    url : 'https://www.url.ie/' ,
    siteName : 'SiteName' ,
  } ,
  twitter : {
    handle : '@handle' ,
    site : '@site' ,
    cardType : 'summary_large_image' ,
  } ,
} ;

أو هكذا، إذا كنت تستخدم TypeScript

 import { DefaultSeoProps } from 'next-seo' ;

const config : DefaultSeoProps = {
  openGraph : {
    type : 'website' ,
    locale : 'en_IE' ,
    url : 'https://www.url.ie/' ,
    siteName : 'SiteName' ,
  } ,
  twitter : {
    handle : '@handle' ,
    site : '@site' ,
    cardType : 'summary_large_image' ,
  } ,
} ;

export default config ;

قم بالاستيراد في الجزء العلوي من _app.js

 import SEO from '../next-seo.config' ;

ويمكن استخدام مكون DefaultSeo بهذه الطريقة بدلاً من ذلك

 < DefaultSeo { ... SEO } / >

من الآن فصاعدًا، سيتم تطبيق الإعدادات الافتراضية المذكورة أعلاه على جميع صفحاتك.

لاحظ أنه تم إهمال Container في Next.js v9.0.4 لذا يجب عليك استبدال هذا المكون هنا بـ React.Fragment في هذا الإصدار والإصدارات الأحدث - انظر هنا

خيارات السيو التالي

ملكية	يكتب	وصف
`titleTemplate`	خيط	يسمح لك بتعيين قالب العنوان الافتراضي الذي سيتم إضافته إلى عنوانك مزيد من المعلومات
`title`	خيط	قم بتعيين عنوان التعريف للصفحة
`defaultTitle`	خيط	إذا لم يتم تعيين عنوان على الصفحة، فسيتم استخدام هذه السلسلة بدلاً من `titleTemplate` الفارغ
`noindex`	منطقية (خطأ افتراضي)	يضبط ما إذا كان يجب فهرسة الصفحة أم لا مزيد من المعلومات
`nofollow`	منطقية (خطأ افتراضي)	يضبط ما إذا كان يجب متابعة الصفحة أم لا مزيد من المعلومات
`robotsProps`	هدف	قم بتعيين المزيد من المعلومات التعريفية لـ `X-Robots-Tag` More Info
`description`	خيط	قم بتعيين الوصف التعريفي للصفحة
`canonical`	خيط	قم بتعيين عنوان URL الأساسي للصفحة
`mobileAlternate.media`	خيط	قم بتعيين حجم الشاشة التي يجب أن يتم عرض موقع الويب للجوال منها
`mobileAlternate.href`	خيط	قم بتعيين عنوان URL البديل لصفحة الهاتف المحمول
`languageAlternates`	صفيف	قم بتعيين لغة عناوين URL البديلة. يتوقع مجموعة من الكائنات ذات الشكل: `{ hrefLang: string, href: string }`
`themeColor`	خيط	يشير إلى اللون المقترح الذي يجب على وكلاء المستخدم استخدامه لتخصيص عرض الصفحة أو واجهة المستخدم المحيطة. يجب أن يحتوي على لون CSS صالح
`additionalMetaTags`	صفيف	يسمح لك بإضافة علامة وصفية غير موثقة هنا. مزيد من المعلومات
`additionalLinkTags`	صفيف	يسمح لك بإضافة علامة ارتباط غير موثقة هنا. مزيد من المعلومات
`twitter.cardType`	خيط	نوع البطاقة الذي سيكون `summary` أو `summary_large_image` أو `app` أو `player`
`twitter.site`	خيط	@اسم المستخدم لموقع الويب المستخدم في تذييل البطاقة
`twitter.handle`	خيط	@ اسم المستخدم لمنشئ المحتوى / المؤلف (الإخراج كـ `twitter:creator` )
`facebook.appId`	خيط	يُستخدم في Facebook Insights، ويجب عليك إضافة معرف تطبيق facebook إلى صفحتك للحصول على مزيد من المعلومات
`openGraph.url`	خيط	عنوان URL الأساسي للكائن الخاص بك والذي سيتم استخدامه كمعرف دائم له في الرسم البياني
`openGraph.type`	خيط	نوع الكائن الخاص بك. اعتمادًا على النوع الذي تحدده، قد تكون هناك حاجة أيضًا إلى خصائص أخرى، مزيد من المعلومات
`openGraph.title`	خيط	عنوان الرسم البياني المفتوح، يمكن أن يكون مختلفًا عن عنوان التعريف الخاص بك.
`openGraph.description`	خيط	وصف الرسم البياني المفتوح، يمكن أن يكون مختلفًا عن الوصف التعريفي الخاص بك.
`openGraph.images`	صفيف	مجموعة من الصور (الكائن) التي سيتم استخدامها بواسطة منصات الوسائط الاجتماعية وSlack وما إلى ذلك كمعاينة. إذا تم توفير عدة، يمكنك اختيار واحد عند المشاركة. انظر الأمثلة
`openGraph.videos`	صفيف	مجموعة من مقاطع الفيديو (الكائن)
`openGraph.locale`	خيط	المكان الذي تم وضع علامات الرسم البياني المفتوحة به. بالتنسيق language_TERRITORY. الافتراضي هو en_US.
`openGraph.siteName`	خيط	إذا كان الكائن الخاص بك جزءًا من موقع ويب أكبر، فيجب عرض الاسم للموقع بأكمله.
`openGraph.profile.firstName`	خيط	الاسم الأول للشخص.
`openGraph.profile.lastName`	خيط	الاسم الأخير للشخص.
`openGraph.profile.username`	خيط	اسم المستخدم الخاص بالشخص.
`openGraph.profile.gender`	خيط	جنس الشخص.
`openGraph.book.authors`	خيط[]	كاتب المقال. انظر الأمثلة
`openGraph.book.isbn`	خيط	رقم ISBN
`openGraph.book.releaseDate`	التاريخ والوقت	تاريخ إصدار الكتاب.
`openGraph.book.tags`	خيط[]	الكلمات الدلالية المرتبطة بهذا الكتاب.
`openGraph.article.publishedTime`	التاريخ والوقت	عندما تم نشر المقال لأول مرة. انظر الأمثلة
`openGraph.article.modifiedTime`	التاريخ والوقت	متى تم تغيير المقالة آخر مرة.
`openGraph.article.expirationTime`	التاريخ والوقت	عندما تكون المقالة قديمة بعد.
`openGraph.article.authors`	خيط[]	كاتب المقال.
`openGraph.article.section`	خيط	اسم القسم عالي المستوى. على سبيل المثال التكنولوجيا
`openGraph.article.tags`	خيط[]	الكلمات الدلالية المرتبطة بهذه المقالة.

قالب العنوان

يستبدل %s بسلسلة العنوان الخاصة بك

 title = 'This is my title' ;
titleTemplate = 'Next SEO | %s' ;
// outputs: Next SEO | This is my title

 title = 'This is my title' ;
titleTemplate = '%s | Next SEO' ;
// outputs: This is my title | Next SEO

العنوان الافتراضي

 title = undefined ;
titleTemplate = 'Next SEO | %s' ;
defaultTitle = 'Next SEO' ;
// outputs: Next SEO

لا يوجد فهرس

سيؤدي ضبط هذا على true إلى تعيين noindex,follow (لتعيين nofollow ، يرجى الرجوع إلى nofollow ). وهذا يعمل على أساس صفحة تلو الأخرى. تعمل هذه الخاصية جنبًا إلى جنب مع الخاصية nofollow وتقوم معًا بملء العلامة الوصفية robots .

ملاحظة: تختلف خصائص noindex و nofollow قليلاً عن جميع الخصائص الأخرى، بمعنى أن تعيينها كإعداد افتراضي لا يعمل كما هو متوقع. ويرجع ذلك إلى حقيقة أن Next SEO يحتوي بالفعل على فهرس index,follow لأن next-seo هو مكون إضافي لتحسين محركات البحث بعد كل شيء. لذلك، إذا كنت ترغب في تعميم هذه الخصائص، فيرجى الاطلاع على DangerlySetAllPagesToNoIndex وdangerlySetAllPagesToNoFollow.

مثال لا يوجد فهرس في صفحة واحدة:

إذا كانت لديك صفحة واحدة لا تريد فهرستها، فيمكنك تحقيق ذلك عن طريق:

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo noindex = { true } / >
    < p > This page is no indexed < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="noindex,follow">
*/

DangerlySetAllPagesToNoIndex

تحتوي على البادئة dangerously لأنها لن noindex جميع الصفحات. نظرًا لأن هذا مكون إضافي لتحسين محركات البحث، فهذا إجراء خطير نوعًا ما. ليس سيئا استخدام هذا. فقط يرجى التأكد من أنك تريد noindex كل صفحة. لا يزال بإمكانك تجاوز هذا على مستوى الصفحة إذا كانت لديك حالة استخدام index الصفحة. يمكن القيام بذلك عن طريق تعيين noindex: false .

الطريقة الوحيدة لإلغاء تعيين ذلك هي إزالة الدعامة من DefaultSeo في <App> المخصص لديك.

لا متابعة

سيؤدي ضبط هذا على true إلى تعيين index,nofollow (لتعيين noindex ، يرجى الرجوع إلى noindex ). وهذا يعمل على أساس كل صفحة على حدة. تعمل هذه الخاصية جنبًا إلى جنب مع خاصية noindex ، وتقوم معًا بملء العلامة الوصفية robots .

ملاحظة: على عكس الخصائص الأخرى، فإن تعيين noindex و nofollow بشكل افتراضي لا يعمل كما هو متوقع. وذلك لأن Next SEO يحتوي على مؤشر index,follow ، نظرًا لأن next-seo هو مكون إضافي لتحسين محركات البحث بعد كل شيء. إذا كنت ترغب في السماح بهذه الخصائص عالميًا، فراجعangerlySetAllPagesToNoIndex وdangerlySetAllPagesToNoFollow.

مثال لا يوجد متابعة في صفحة واحدة:

إذا كانت لديك صفحة واحدة لا تريد فهرستها، فيمكنك تحقيق ذلك عن طريق:

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo nofollow = { true } / >
    < p > This page is not followed < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="index,nofollow">
*/

DangerlySetAllPagesToNoFollow

يحتوي على البادئة dangerously لأنه nofollow جميع الصفحات. نظرًا لأن هذا مكون إضافي لتحسين محركات البحث، فهذا إجراء خطير نوعًا ما. ليس سيئا استخدام هذا. فقط يرجى التأكد من أنك تريد nofollow كل صفحة. لا يزال بإمكانك تجاوز هذا على مستوى الصفحة إذا كانت لديك حالة استخدام follow الصفحة. يمكن القيام بذلك عن طريق تعيين nofollow: false .

الطريقة الوحيدة لإلغاء تعيين ذلك هي إزالة الخاصية من DefaultSeo في <App> المخصص لديك.

`noindex`	`nofollow`	المحتوى `meta` `robots`
--	--	`index,follow` (افتراضي)
خطأ شنيع	خطأ شنيع	`index,follow`
حقيقي	--	`noindex,follow`
حقيقي	خطأ شنيع	`noindex,follow`
--	حقيقي	`index,nofollow`
خطأ شنيع	حقيقي	`index,nofollow`
حقيقي	حقيقي	`noindex,nofollow`

robotsProps

بالإضافة إلى index, follow تقبل العلامة الوصفية robots المزيد من الخصائص لأرشفة زحف أكثر دقة وتقديم مقتطفات أفضل لروبوتات تحسين محركات البحث التي تزحف إلى صفحتك.

مثال:

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      robotsProps = { {
        nosnippet : true ,
        notranslate : true ,
        noimageindex : true ,
        noarchive : true ,
        maxSnippet : - 1 ,
        maxImagePreview : 'none' ,
        maxVideoPreview : - 1 ,
      } }
    / >
    < p > Additional robots props in Next-SEO!! < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
*/

الخصائص المتاحة

ملكية	يكتب	وصف
`noarchive`	منطقية	لا تعرض الرابط المخبأ في نتائج البحث.
`nosnippet`	منطقية	لا تعرض مقتطفًا نصيًا أو معاينة فيديو في نتائج البحث لهذه الصفحة.
`max-snippet`	رقم	استخدم [number] من الأحرف كحد أقصى كمقتطف نصي لنتيجة البحث هذه. اقرأ المزيد
`max-image-preview`	"لا شيء"، "قياسي"، "كبير"	قم بتعيين الحد الأقصى لحجم معاينة الصورة لهذه الصفحة في نتائج البحث.
`max-video-preview`	رقم	استخدم [number] ثانية كحد أقصى كمقتطف فيديو لمقاطع الفيديو الموجودة على هذه الصفحة في نتائج البحث. اقرأ المزيد
`notranslate`	منطقية	لا تعرض ترجمة هذه الصفحة في نتائج البحث.
`noimageindex`	منطقية	لا تقم بفهرسة الصور في هذه الصفحة.
`unavailable_after`	خيط	لا تظهر هذه الصفحة في نتائج البحث بعد التاريخ/الوقت المحدد. يجب تحديد التاريخ/الوقت بتنسيق معتمد على نطاق واسع، بما في ذلك، على سبيل المثال لا الحصر، RFC 822 وRFC 850 وISO 8601.

لمزيد من المراجع حول X-Robots-Tag تفضل بزيارة Google Search Central - التحكم في الزحف والفهرسة

تغريد

سيقرأ تويتر علامات og:title og:image و og:description لبطاقته، ولهذا السبب يحذف next-seo twitter:title و twitter:image و twitter:description حتى لا يتم تكرارها.

قد تقوم بعض الأدوات بالإبلاغ عن هذا كخطأ. انظر العدد رقم 14

فيسبوك

 facebook = { {
  appId : '1234567890' ,
} }

أضف هذا إلى تكوين SEO الخاص بك لتضمين fb:app_id meta إذا كنت بحاجة إلى تمكين رؤى Facebook لموقعك. يمكن العثور على المعلومات المتعلقة بهذا في وثائق الفيسبوك

عنوان URL الأساسي

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

 canonical = 'https://www.canonical.ie/' ;

البديل

تُستخدم علاقة الارتباط هذه للإشارة إلى العلاقة بين موقع ويب سطح المكتب والجوال ومحركات البحث.

مثال:

 mobileAlternate = { {
  media : 'only screen and (max-width: 640px)' ,
  href : 'https://m.canonical.ie' ,
} }

 languageAlternates = { [ {
  hrefLang : 'de-AT' ,
  href : 'https://www.canonical.ie/de' ,
} ] }

العلامات التعريفية الإضافية

يتيح لك هذا إضافة أي علامات وصفية أخرى لم يتم تغطيتها في config ويجب استخدامها بدلاً من دعم children .

content مطلوب. ثم إما name أو property أو httpEquiv . (واحد فقط في كل منهما)

مثال:

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Jane Doe'
} , {
  name : 'application-name' ,
  content : 'NextSeo'
} , {
  httpEquiv : 'x-ua-compatible' ,
  content : 'IE=edge; chrome=1'
} ] }

أمثلة غير صالحة:

هذه غير صالحة لأنها تحتوي على أكثر من name و property و httpEquiv في نفس الإدخال.

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  name : 'dc:creator' ,
  content : 'Jane Doe'
} , {
  property : 'application-name' ,
  httpEquiv : 'application-name' ,
  content : 'NextSeo'
} ] }

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

السلوك الافتراضي (بدون خاصية keyOverride ) هو عرض علامة واحدة لكل name / property / httpEquiv فريد. سيتم تقديم آخر تعريف.

على سبيل المثال، إذا قمت بتمرير علامتين بنفس property :

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Joe Bloggs'
} , {
  property : 'dc:creator' ,
  content : 'Jane Doe'
} ] }

سيؤدي إلى تقديم هذا:

 < meta property =" dc:creator " content =" Jane Doe " />

توفير خاصية keyOverride إضافية مثل هذا:

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Joe Bloggs' ,
  keyOverride : 'creator1' ,
} , {
  property : 'dc:creator' ,
  content : 'Jane Doe' ,
  keyOverride : 'creator2' ,
} ] }

يؤدي إلى عرض HTML الصحيح:

 < meta property =" dc:creator " content =" Joe Bloggs " />
< meta property =" dc:creator " content =" Jane Doe " />

علامات الارتباط الإضافية

يتيح لك هذا إضافة أي علامات ارتباط أخرى لم يتم تغطيتها في config .

مطلوب rel و href .

مثال:

 additionalLinkTags = { [
  {
    rel : 'icon' ,
    href : 'https://www.test.ie/favicon.ico' ,
  } ,
  {
    rel : 'apple-touch-icon' ,
    href : 'https://www.test.ie/touch-icon-ipad.jpg' ,
    sizes : '76x76'
  } ,
  {
    rel : 'manifest' ,
    href : '/manifest.json'
  } ,
  {
    rel : 'preload' ,
    href : 'https://www.test.ie/font/sample-font.woof2' ,
    as : 'font' ,
    type : 'font/woff2' ,
    crossOrigin : 'anonymous'
  }
] }

سيؤدي إلى تقديم هذا:

 < link rel =" icon " href =" https://www.test.ie/favicon.ico " />
< link
  rel =" apple-touch-icon "
  href =" https://www.test.ie/touch-icon-ipad.jpg "
  sizes =" 76x76 "
/>
< link rel =" manifest " href =" /manifest.json " />
< link
  rel =" preload "
  href =" https://www.test.ie/font/sample-font.woof2 "
  as =" font "
  type =" font/woff2 "
  crossorigin =" anonymous "
/>

افتح الرسم البياني

للحصول على المواصفات الكاملة يرجى مراجعة http://ogp.me/

يدعم Next SEO حاليًا:

أساسي
فيديو
شرط
كتاب
حساب تعريفي

افتح أمثلة الرسم البياني

أساسي

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      openGraph = { {
        type : 'website' ,
        url : 'https://www.example.com/page' ,
        title : 'Open Graph Title' ,
        description : 'Open Graph Description' ,
        images : [
          {
            url : 'https://www.example.ie/og-image.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt' ,
          } ,
          {
            url : 'https://www.example.ie/og-image-2.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt 2' ,
          } ,
        ] ,
      } }
    / >
    < p > Basic < / p >