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

القسم التالي-seo

مكون إضافي SEO بسيط وخفيف الوزن لتطبيقات Next.js.

⚡ <1kb gzipped
التبعيات الصفر
✍ مصمم على أساس إرشادات مشرفي المواقع على Google
؟ دعم TypeScript

على الرغم من أن next-head-seo يدعم خصائص كبار المسئولين الاقتصاديين الأساسية فقط ، إلا أنه سيكون كافياً لمعظم مواقع الويب.

إذا كنت بحاجة إلى إعدادات SEO متقدمة مثل البيانات المنظمة ، فاستخدم SEO التالي بدلاً من ذلك.

ثَبَّتَ

$ npm install next-head-seo
# or with yarn
$ yarn add next-head-seo

الاستخدام

استيراد next-head-seo على كل مكون صفحة وأضف الخصائص المطلوبة.

مثال:

 // pages/example.tsx
import NextHeadSeo from 'next-head-seo' ;

const Page = ( ) => (
  < >
    < h1 > Hello! </ h1 >
    < NextHeadSeo
      title = "Hello!"
      description = "Some description"
      canonical = "https://example.com/hello"
      og = { {
        title : "Open graph title" ,
        image : "https://example.com/og.png" ,
      } }
    />
  </ >
) ;

export default Page

// Output:
// <head>
//   <title>Hello!</title>
//   <meta name="description" content="Some description" />
//   <link rel="canonical" href="https://example.com/hello"/>
//   <meta property="og:title" content="Open graph title"/>
//   <meta property="og:image" content="https://example.com/og.png"/>
// </head>

إعدادات SEO الافتراضية

هناك خياران لتكوين SEO المناسبة الافتراضية.

ضع الافتراضي `<NextHeadSeo />` على `_app.tsx`

الخيار الأول هو وضع <NextHeadSeo /> مع القيم الافتراضية على _app.tsx .

 // pages/_app.tsx
import type { AppProps } from 'next/app'
import NextHeadSeo from 'next-head-seo' ;

function MyApp ( { Component , pageProps } : AppProps ) {
  return (
    < >
      { /* Default SEO configuration */ }
      < NextHeadSeo
        og = { {
          image : "https://example.com/default-og.png" ,
          type : 'article' ,
          siteName : 'Your app name' ,
        } }
        twitter = { {
          card : "summary"
        } }
      />
      { /* Place <Component /> after <NextHeadSeo /> */ }
      < Component { ... pageProps } />
    </ >
  ) ;
}

export default MyApp

تأكد من وضع <NextHeadSeo /> قبل <Component {...pageProps} /> منذ أن احترم الرؤوس التالية القيمة الأخيرة لنفس اسم الخاصية.

قم بإنشاء مكون Wrapper لـ Head-Seo التالي

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

فيما يلي مثال على مكون الغلاف:

 // components/MyPageSeo.tsx
import NextHeadSeo from 'next-head-seo' ;

// types
export type MyPageSeoProps = {
  path : string ;
  title ?: string ;
  description ?: string ;
  ogImagePath ?: string ;
  noindex ?: boolean ;
  noTitleTemplate ?: boolean ;
} ;

export const MyPageSeo : React . FC < MyPageSeoProps > = ( props ) => {
  const {
    path ,
    title = "Default title" ,
    description = "Default description" ,
    ogImagePath = "/default-og.png" ,
    noindex ,
    noTitleTemplate ,
  } = props ;

  // Set APP_ROOT_URL on enviroment variables
  // e.g. APP_ROOT_URL=https://example.com
  // https://nextjs.org/docs/basic-features/environment-variables
  const APP_ROOT_URL = process . env . NEXT_PUBLIC_APP_ROOT_URL ;

  // Absolute page url
  const pageUrl = APP_ROOT_URL + path
  // Absolute og image url
  const ogImageUrl = APP_ROOT_URL + ogImagePath

  return (
    < NextHeadSeo
      title = { noTitleTemplate ? title : ` ${ title } - MyAppName` }
      canonical = { pageUrl }
      description = { description }
      robots = { noindex ? 'noindex, nofollow' : undefined }
      og = { {
        title ,
        description ,
        url : pageUrl ,
        image : ogImageUrl ,
        type : 'article' ,
        siteName : 'MyAppName' ,
      } }
      twitter = { {
        card : "summary_large_image" ,
      } }
    />
  ) ;
} ;

ثم ، ضع <MyPageSeo /> في كل مكون صفحة.

 // pages/example.tsx
import { MyPageSeo } from "../components/MyPageSeo"

const Page = ( ) => (
  < >
    < h1 > Hello! </ h1 >
    < MyPageSeo
      path = "/example"
      title = "Hello!"
      noindex = { true }
    />
  </ >
) ;
export default Page

// Output:
// <head>
//   <title>Hello! - MyAppName</title>
//   <meta name="robots" content="noindex, nofollow"/>
//   <meta name="description" content="Default description" />
//   <link rel="canonical" href="https://example.com/example"/>
//   <meta property="og:url" content="https://example.com/example"/>
//   <meta property="og:title" content="Hello!"/>
//   <meta property="og:description" content="Default description"/>
//   <meta property="og:image" content="https://example.com//default-og.png"/>
//   <meta property="og:type" content="article"/>
//   <meta property="og:site_name" content="MyAppName"/>
//   <meta name="twitter:card" content="summary_large_image"/>
// </head>

خيارات

جميع الدعائم next-head-seo هي اختيارية.

دعم	وصف	يكتب
عنوان	✅ موصى به لتعيين جميع الصفحات. عنوان الصفحة.	خيط
الكنسي	✅ موصى به لتعيين جميع الصفحات. عنوان URL الكنسي للصفحة.	خيط
الروبوتات	اضبط `noindex, nofollow` فقط عندما لا تريد فهرسة الصفحة على محركات البحث. وإلا فلن تضطر إلى استخدام هذا الدعامة.	`"noindex, nofollow"` `"index, follow"` `"noindex"` `"nofollow"`
وصف	✅ موصى به لتعيين جميع الصفحات. وصف الصفحة. سيتم اقتطاع النص بعد 150 حرفًا كما تفعل Google.	خيط
Twitter.card	نوع صورة بطاقة Twitter. تعيين جنبا إلى جنب مع `og:image` الدعامة. انظر التفاصيل: بطاقات Twitter	`"summary"` `"summary_large_image"` `"player"` `"app"`
twitter.site	اسم مستخدم Twitter بدءًا من `@`	خيط
og.title	ل OG: العنوان. استخدم قيمة `title` تلقائيًا إذا كانت فارغة. انظر التفاصيل: فتح بروتوكول الرسم البياني	خيط
OG.Description	لـ OG: الوصف. استخدم قيمة `description` تلقائيًا إذا كانت فارغة.	خيط
og.url	لـ OG: URL. استخدام القيمة `canonical` تلقائيًا إذا كانت فارغة.	خيط
OG.IMAGE	لـ OG: الصورة. تعيين عنوان URL للصور.	خيط
og.type	ل OG: اكتب.	`"article"` `"book"` `"website"` `"profile"`
og.sitename	لـ OG: site_name	خيط
custommetAgs	مجموعة من الكائن لعلامات التعريف المخصصة. انظر قسم CustommetAtags.	مجموعة من الأشياء
CustomLinktags	مجموعة من الكائن لعلامات الارتباط المخصصة. انظر قسم CustomLinkTags.	مجموعة من الأشياء

علامات التعريف المخصصة

يمكنك تعيين علامات ميتا إضافية. مثال:

 < NextHeadSeo
  customMetaTags = { [
    {
      name : 'foo' ,
      content : 'foo-content'
    } ,
    {
      property : 'bar' ,
      content : 'bar-content'
    }
  ] }
/>
// Output:
// <head>
//   <meta name="foo" content="foo-content"/>
//   <meta name="bar" content="bar-content"/>
// </head>

إذا كنت ترغب في تجاوز علامات التعريف المخصصة من مكون صفحة أخرى ، فاستخدم نفس المفاتيح لكلا المكون.

مثال:

 // in /pages/_app.tsx
< NextHeadSeo
  customMetaTags = { [
    {
      key : "custom-meta" ,
      name : 'foo' ,
      content : 'foo-content'
    }
  ] }
/>

// in /pages/example.tsx
< NextHeadSeo
  customMetaTags = { [
    {
      key : "custom-meta" ,
      name : 'bar' ,
      content : 'bar-content'
    }
  ] }
/ >

// Output:
// <head>
//   <meta name="bar" content="bar-content"/>
// </head>

علامات الارتباط المخصصة

يمكنك تعيين علامات ارتباط إضافية. مثال:

 < NextHeadSeo
  customLinkTags = { [
    {
      rel : 'foo' ,
      href : 'https://example.com/foo'
    } ,
     {
      rel : 'bar' ,
      type : 'bar-type' ,
      href : 'https://example.com/bar'
    } ,
  ] }
/>
// Output:
// <head>
//   <link rel="foo" content="https://example.com/foo"/>
//   <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>

إذا كنت ترغب في تجاوز علامات الارتباط المخصصة من مكون صفحة أخرى ، فاستخدم نفس المفاتيح لكلا المكون. مثال:

 // in /pages/_app.tsx
< NextHeadSeo
  customLinkTags = { [
    {
      key : "custom-link" ,
      rel : 'foo' ,
      content : 'https://example.com/foo'
    }
  ] }
/>

// in /pages/example.tsx
< NextHeadSeo
  customLinkTags = { [
    {
      key : "custom-link" ,
      rel : 'bar' ,
      type : 'bar-type' ,
      ccontent : 'https://example.com/bar'
    }
  ] }
/ >

// Output:
// <head>
//   <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>