Ինչպես իրականացնել Open Graph Protocol-ը Next.js-ում

Open Graph-ը հեշտ SEO-ի շահում է, և, բարեբախտաբար, դուք կարող եք այն ավելացնել ձեր Next.js կայքում այս երկու պարզ մեթոդներից որևէ մեկով:

Երբևէ ցանկացե՞լ եք, որ ձեր Next.js կայքը հայտնվի որպես հարուստ օբյեկտ, երբ այն տարածվում է սոցիալական ցանցերում: Եթե այո, ապա դուք պետք է իրականացնեք Open Graph արձանագրությունը:

Next-seo փաթեթը հեշտացնում է Open Graph պիտակներ ավելացնելը ձեր Next.js կայքում: Դուք կարող եք նաև օգտագործել ավելի ձեռքով մոտեցում՝ ավարտված արդյունքի ավելի նուրբ վերահսկողության համար:

Ի վերջո, դուք կցանկանաք հաշվի առնել, թե կոնկրետ ինչ տեղեկատվություն ներառել ձեր թեգերում:

Ի՞նչ է բաց գրաֆիկը:

Open Graph արձանագրությունը բաց ստանդարտ է, որը թույլ է տալիս ծրագրավորողներին վերահսկել, թե ինչպես են սոցիալական լրատվամիջոցները ցուցադրում իրենց բովանդակությունը: Այն ի սկզբանե մշակվել է Facebook-ի կողմից, սակայն շատ այլ հարթակներ այդ ժամանակվանից ընդունել են արձանագրությունը: Դրանք ներառում են Twitter-ը, LinkedIn-ը և Pinterest-ը:

Open Graph-ը թույլ է տալիս հստակորեն նշել, թե ինչպես պետք է այլ կայքեր ցուցադրեն ձեր բովանդակությունը՝ ապահովելով, որ այն լավ տեսք ունի և հեշտ է կարդալ: Այն նաև թույլ է տալիս ավելի մեծ վերահսկել, թե ինչպես են հղումները մատուցվում: Սա հեշտացնում է սեղմումների և ներգրավվածության այլ չափանիշներին հետևելը:

Ինչու՞ օգտագործել Open Graph Protocol-ը:

Կան երեք հիմնական ոլորտներ, որոնք Open Graph-ը պետք է բարելավվի՝ սոցիալական մեդիայի ներգրավվածություն, SEO և կայքի տրաֆիկ:

1. Բարելավել սոցիալական մեդիայի ներգրավվածությունը

Open Graph-ը կարող է օգնել բարելավել սոցիալական մեդիայի ներգրավվածությունը՝ հեշտացնելով օգտվողների համար կիսվել ձեր բովանդակությամբ: Նշելով, թե ինչպես պետք է կայքերը ցուցադրեն ձեր բովանդակությունը, դուք կարող եք այն դարձնել տեսողականորեն ավելի գրավիչ և հեշտ ընթերցվող: Սա, իր հերթին, կարող է հանգեցնել ավելի շատ բաժնետոմսերի և հավանումների, ինչպես նաև ավելացնել սեղմումների տոկոսադրույքը:

2. Բարելավել SEO-ն

Open Graph-ը կարող է նաև օգնել բարելավել ձեր SEO-ն: Յուրաքանչյուր բովանդակության համար նշելով վերնագիրը, նկարագրությունը և պատկերը, դուք կարող եք վերահսկել, թե ինչպես է այն հայտնվում որոնման արդյունքներում: Սա կարող է օգնել բարձրացնել ձեր կայքի վրա սեղմումների տոկոսադրույքը, ինչպես նաև բարելավել ձեր ընդհանուր վարկանիշը:

3. Բարձրացնել վեբ կայքի թրաֆիկը

Վերջապես, Open Graph-ը կարող է օգնել մեծացնել կայքի տրաֆիկը: Օգտատերերի համար հեշտացնելով կիսվել ձեր բովանդակությամբ, դուք կարող եք ավելացնել այն մարդկանց թիվը, ովքեր տեսնում են այն: Սա, իր հերթին, կարող է հանգեցնել ավելի շատ կայքի այցելուների և մեծացնել տրաֆիկը:

4. Բարելավել օգտվողների փորձը

Open Graph արձանագրության օգտագործման ևս մեկ առավելությունն այն է, որ այն կարող է բարելավել օգտվողի փորձը ձեր կայքում: Ներառելով մետատվյալները՝ դուք կարող եք օգնել հասանելիությանը և վերօգտագործել տվյալները՝ ապահովելով, որ օգտվողները տեսնեն առավել համապատասխան տեղեկատվությունը: Սա կարող է հանգեցնել ավելի լավ ընդհանուր փորձի ձեր կայքում, ինչը կարող է հանգեցնել ավելի շատ վերադարձի այցելուների:

Ինչու՞ օգտագործել Next.js-ը:

Next.js-ն օգտագործելու երկու հիմնական պատճառ կա՝ բարելավել կատարողականը և հեշտացնել զարգացումը:

1. Բարելավել կատարողականությունը

Next.js-ը կարող է օգնել բարելավելու արդյունավետությունը՝ բաժանելով ձեր հավելվածը ծածկագրի և ռեսուրսների նախնական առբերման միջոցով: Սա կարող է հանգեցնել ավելի արագ բեռնման ժամանակի և նվազեցնել սերվերի բեռը:

2. Հեշտացնել զարգացումը

Next.js-ը կարող է նաև հեշտացնել զարգացումը` տրամադրելով սերվերի կողմից մատուցվող React հավելվածներ ստեղծելու պարզ միջոց: Սա կարող է ավելի արագ և հեշտ դարձնել React հավելվածների մշակումն ու տեղակայումը:

Ինչպես իրականացնել Open Graph Protocol-ը Next.js-ում

Next.js-ում Open Graph Protocol-ի ներդրման երկու եղանակ կա՝ օգտագործելով next-seo փաթեթը կամ ստեղծել հատուկ _document.js ֆայլ:

Մեթոդ 1. Օգտագործելով հաջորդ SEO փաթեթը

Next.js-ում Open Graph Protocol-ի ներդրման ամենադյուրին ճանապարհը հաջորդ-seo փաթեթն օգտագործելն է: Այս փաթեթը ավտոմատ կերպով կստեղծի ձեզ համար անհրաժեշտ պիտակները:

Հաջորդ-seo փաթեթը տեղադրելու համար գործարկեք հետևյալ հրամանը.

npm install next-seo --save

Փաթեթը տեղադրելուց հետո կարող եք օգտագործել այն՝ ավելացնելով հետևյալ կոդը ձեր index.js ֆայլում.

import { NextSeo } from 'next-seo';
 
const DemoPage = () => (
  <>
    <NextSeo
      title="Your Title"
      description="This is a demo description"
      canonical="https://www.example.com"
      openGraph={{
        url: 'https://www.example.com',
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        images: [
          {
            url: 'https://www.example.com/og-image01.jpg',
            width: 800,
            height: 600,
            alt: 'Og Image Alt',
            type: 'image/jpeg',
          },
          {
            url: 'https://www.example.com/og-image02.jpg',
            width: 900,
            height: 800,
            alt: 'Og Image Alt Second',
            type: 'image/jpeg',
          },
          { url: 'https://www.example.com/og-image03.jpg' },
          { url: 'https://www.example.com/og-image04.jpg' },
        ],
        site_name: 'YourSiteName',
      }}
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      }}
    />
    <p>Demo Page</p>
  </>
);
 
export default DemoPage;

Այս կոդը ներմուծում է NextSeo բաղադրիչը next-seo փաթեթից և այն օգտագործում է էջի վերնագիրը, նկարագրությունը և պատկերը նշելու համար: Այն նաև նշում է կայքի անվանումը և Twitter-ի բռնիչը:

Գործարկեք հետևյալ հրամանը՝ զարգացման սերվերը գործարկելու համար.

npm run dev

Բացեք http://localhost:3000-ը ձեր բրաուզերում՝ ցուցադրական էջը տեսնելու համար:

Մեթոդ 2. Օգտագործելով Custom _document.js ֆայլը

Next.js-ում Open Graph Protocol-ի ներդրման մեկ այլ միջոց է ստեղծել հատուկ _document.js ֆայլ: Այս ֆայլը թույլ կտա ինքներդ նշել Open Graph պիտակները և ստեղծել բոլոր էջերի համար կրկնակի օգտագործման կոդ:

Հատուկ _document.js ֆայլ կարգավորելու համար ձեր էջերի գրացուցակում ստեղծեք նոր ֆայլ հետևյալ բովանդակությամբ.

import Document, { Html, Head, Main, NextScript } from 'next/document';
 
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
 
  render() {
    return (
      <Html>
        <Head>
          <meta property="og:url" content="https://www.example.com" />
          <meta property="og:title" content="Open Graph Title" />
          <meta property="og:description" content="Open Graph Description" />
          <meta property="og:image" content="https://www.example.com/og-image.jpg" />
          <meta property="og:site_name" content="YourSiteName" />
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:site" content="@site" />
          <meta name="twitter:creator" content="@handle" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
 
export default MyDocument;

Ավելացրեք ստորև բերված բովանդակությունը ձեր index.js ֆայլում.

const DemoPage = () => (
  <>
    <p>Demo Page</p>
  </>
);
 
export default DemoPage;

Այս կոդը ներմուծում է Document բաղադրիչը հաջորդ/փաստաթղթից և ստեղծում է հատուկ MyDocument բաղադրիչ: Այն սահմանում է մեր էջի վերնագիրը, նկարագրությունը և պատկերը, ինչպես նաև կայքի անվանումը և Twitter-ի բռնիչը:

Գործարկեք հետևյալ հրամանը՝ զարգացման սերվերը գործարկելու համար.

npm run dev

Բացեք http://localhost:3000-ը ձեր բրաուզերում՝ ցուցադրական էջը տեսնելու համար:

Բարելավեք վեբ կայքերի վարկանիշը OG պիտակներով

Ձեր կայքէջում Open Graph թեգերի ավելացումը կարող է ձեզ ավելի շատ վերահսկել, թե ինչպես է այն հայտնվում սոցիալական մեդիայի գրառումներում և կարող է օգնել բարելավել սեղմումների տոկոսադրույքը: Դուք կարող եք նաև բարելավել այն ձևը, թե ինչպես է ձեր կայքը հայտնվում SERP-ներում, ինչը, ի վերջո, կարող է հանգեցնել վեբ կայքի բարելավման:

Կան նաև բազմաթիվ այլ եղանակներ՝ բարելավելու կայքի վարկանիշը: Դուք պետք է օպտիմալացնեք ձեր կայքը շարժական սարքերի համար և օգտագործեք հիմնաբառերով հարուստ վերնագրեր և նկարագրություններ: Բայց Open Graph պիտակների օգտագործումը սկսելու արագ և հեշտ միջոց է: