Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Pernahkah Anda melihat buletin Next.js yang baru?

Spanduk Mingguan Berikutnya

Alat yang Berguna

  • dub baru-baru ini meluncurkan pembuat UTM Gratis yang berguna! Anda dapat menggunakannya di sini

SEO selanjutnya

Next SEO adalah plugin yang membuat pengelolaan SEO Anda lebih mudah di proyek Next.js.

Permintaan tarik sangat diterima. Pastikan juga untuk memeriksa masalah permintaan fitur jika Anda mencari inspirasi tentang apa yang harus ditambahkan.

Ingin mendukung plugin gratis ini?

Dibutuhkan banyak waktu untuk memelihara proyek open source sehingga kontribusi kecil apa pun akan sangat dihargai.

Pengkodean bahan bakar kopi ☕️

berikutnya-seo.wallet (ERC20 & SOL)

Catatan pada direktori aplikasi

Catatan ini hanya relevan jika menggunakan direktori app .

Untuk meta data standar (misalnya, <title>) maka sangat disarankan agar Anda menggunakan metode generateMetaData bawaan. Anda dapat melihat dokumennya di sini

Untuk JSON-LD, satu-satunya perubahan yang diperlukan adalah menambahkan useAppDir={true} ke komponen JSON-LD yang digunakan. Anda harus menambahkan use this komponen di page.js Anda dan BUKAN head.js Anda. 

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

Jika Anda menggunakan direktori pages maka NextSeo adalah yang Anda perlukan untuk kebutuhan SEO Anda!

Daftar isi

  • Penggunaan
    • Pengaturan
    • Tambahkan SEO ke Halaman
    • Konfigurasi SEO Default
    • Opsi BerikutnyaSeo
      • Templat Judul
      • Judul Bawaan
      • Tidak Ada Indeks
      • berbahayaSetAllPagesToNoIndex
      • Tidak Ikuti
      • berbahayaSetAllPagesToNoFollow
      • robotAlat Peraga
      • Twitter
      • Facebook
      • URL kanonik
      • Bergantian
      • Tag Meta Tambahan
      • Tag Tautan Tambahan
  • Buka Grafik
    • Contoh Grafik Terbuka
      • Dasar
      • Video
      • Audio
      • Artikel
      • Buku
      • Profil
  • JSON-LD
    • Keamanan JSON-LD
    • Menangani banyak kejadian
    • Artikel
    • Remah roti
    • blog
    • Perkemahan
    • Resep
    • Kotak Pencarian Tautan Situs
    • Kursus
    • Kumpulan data
    • Kontak Perusahaan
    • Halaman Pertanyaan Umum
    • Bagaimana caranya
    • Postingan Pekerjaan
    • Bisnis Lokal
    • logo
    • Produk
    • Profil Sosial
    • Artikel Berita
    • Taman
    • Video
    • Permainan Video
    • Peristiwa
    • Tanya Jawab
    • Halaman Koleksi
    • Halaman profil
    • Korsel
      • Default (Daftar Ringkasan)
      • Kursus
      • Film
      • Resep
      • Kebiasaan
    • Aplikasi Perangkat Lunak
    • Organisasi
    • Merek
    • Halaman Web
    • Metadata Gambar
  • Kontributor

Penggunaan

NextSeo bekerja dengan memasukkannya ke halaman di mana Anda ingin menambahkan atribut SEO. Setelah dimasukkan ke dalam halaman, Anda meneruskannya ke objek konfigurasi dengan properti SEO halaman tersebut. Ini dapat dihasilkan secara dinamis pada tingkat halaman, atau dalam beberapa kasus, API Anda mungkin mengembalikan objek SEO.

Pengaturan

Pertama, instal: 

npm install next-seo

atau 

yarn add next-seo

Tambahkan SEO ke Halaman

Menggunakan direktori aplikasi Next.js yang diperkenalkan di Next.js 13?

Jika Anda menggunakan direktori aplikasi Next.js, sangat disarankan agar Anda menggunakan metode generateMetaData bawaan. Anda dapat melihat dokumennya di sini

Jika Anda menggunakan direktori pages , maka NextSeo adalah yang Anda perlukan untuk kebutuhan SEO Anda!

Kemudian, Anda perlu mengimpor NextSeo dan menambahkan properti yang diinginkan. Ini akan menampilkan tag di <head> untuk SEO. Minimal, Anda harus menambahkan judul dan deskripsi.

Contoh hanya dengan judul dan deskripsi: 

 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 ;

Namun NextSeo memberi Anda lebih banyak opsi yang dapat Anda tambahkan. Lihat di bawah untuk contoh umum sebuah halaman.

Contoh halaman umum: 

 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 ;

Catatan di Tag Twitter

Props cardType , site , handle setara dengan twitter:card , twitter:site , twitter:creator . Dokumentasi dapat ditemukan di sini.

Twitter akan membaca tag og:title , og:image dan og:description untuk kartu mereka. next-seo menghilangkan twitter:title , twitter:image dan twitter:description untuk menghindari duplikasi.

Beberapa alat mungkin melaporkan ini sebagai kesalahan. Lihat Edisi #14

Konfigurasi SEO Default

NextSeo memungkinkan Anda mengatur beberapa properti SEO default yang akan muncul di semua halaman tanpa perlu menyertakan apa pun di dalamnya. Anda juga dapat menggantinya berdasarkan halaman demi halaman jika diperlukan.

Untuk mencapai hal ini, Anda perlu membuat <App> khusus. Di direktori halaman Anda, buat file baru, _app.js . Lihat dokumen Next.js di sini untuk informasi lebih lanjut tentang <App> khusus.

Di dalam file ini Anda perlu mengimpor DefaultSeo dari next-seo dan meneruskannya props.

Berikut adalah contoh tipikal: 

 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 >
    ) ;
  }
}

Agar berfungsi dengan baik, DefaultSeo harus ditempatkan di atas (sebelum) Component karena perilaku internal Next.js.

Alternatifnya, Anda juga dapat membuat file konfigurasi untuk menyimpan nilai default seperti 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' ,
  } ,
} ;
atau seperti ini, jika Anda menggunakan 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 ;

impor di bagian atas _app.js 

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

dan komponen DefaultSeo dapat digunakan seperti ini 

 < DefaultSeo { ... SEO } / >

Mulai sekarang, semua halaman Anda akan menerapkan default di atas.

Perhatikan bahwa Container tidak digunakan lagi di Next.js v9.0.4 jadi Anda harus mengganti komponen tersebut di sini dengan React.Fragment pada versi ini dan yang lebih baru - lihat di sini

Opsi BerikutnyaSeo

Milik Jenis Keterangan
titleTemplate rangkaian Memungkinkan Anda menyetel templat judul default yang akan ditambahkan ke judul Anda Info Lebih Lanjut
title rangkaian Tetapkan judul meta halaman
defaultTitle rangkaian Jika tidak ada judul yang ditetapkan pada halaman, string ini akan digunakan sebagai ganti titleTemplate Info Lebih Lanjut yang kosong
noindex boolean (defaultnya salah) Menetapkan apakah halaman harus diindeks atau tidak Info Lebih Lanjut
nofollow boolean (defaultnya salah) Mengatur apakah halaman harus diikuti atau tidak Info Lebih Lanjut
robotsProps Obyek Atur lebih banyak informasi meta untuk Info Lebih Lanjut X-Robots-Tag
description rangkaian Tetapkan deskripsi meta halaman
canonical rangkaian Setel url kanonik halaman
mobileAlternate.media rangkaian Tetapkan ukuran layar tempat situs web seluler harus ditayangkan
mobileAlternate.href rangkaian Setel url alternatif laman seluler
languageAlternates susunan Atur bahasa url alternatif. Mengharapkan array objek dengan bentuk: { hrefLang: string, href: string }
themeColor rangkaian Menunjukkan warna yang disarankan yang harus digunakan agen pengguna untuk menyesuaikan tampilan halaman atau antarmuka pengguna di sekitarnya. Harus berisi warna CSS yang valid
additionalMetaTags susunan Memungkinkan Anda menambahkan tag meta yang tidak didokumentasikan di sini. Info Lebih Lanjut
additionalLinkTags susunan Memungkinkan Anda menambahkan tag tautan yang tidak didokumentasikan di sini. Info Lebih Lanjut
twitter.cardType rangkaian Jenis kartu, yang akan berupa summary , summary_large_image , app , atau player
twitter.site rangkaian @namapengguna untuk situs web yang digunakan di footer kartu
twitter.handle rangkaian @namapengguna untuk pembuat/penulis konten (keluaran sebagai twitter:creator )
facebook.appId rangkaian Digunakan untuk Facebook Insights, Anda harus menambahkan ID aplikasi facebook ke halaman Anda untuk Info Lebih Lanjut
openGraph.url rangkaian URL kanonik objek Anda yang akan digunakan sebagai ID permanennya dalam grafik
openGraph.type rangkaian Jenis objek Anda. Tergantung pada tipe yang Anda tentukan, properti lain mungkin juga diperlukan Info Lebih Lanjut
openGraph.title rangkaian Judul grafik terbuka, ini bisa berbeda dengan judul meta Anda.
openGraph.description rangkaian Deskripsi grafik terbuka, ini bisa berbeda dengan deskripsi meta Anda.
openGraph.images susunan Serangkaian gambar (objek) untuk digunakan oleh platform media sosial, slack, dll sebagai pratinjau. Jika ada beberapa yang disediakan, Anda dapat memilih salah satu saat berbagi. Lihat Contoh
openGraph.videos susunan Serangkaian video (objek)
openGraph.locale rangkaian Lokal tempat tag grafik terbuka ditandai. Dalam format bahasa_TERRITORY. Standarnya adalah en_US.
openGraph.siteName rangkaian Jika objek Anda adalah bagian dari situs web yang lebih besar, nama yang harus ditampilkan untuk situs secara keseluruhan.
openGraph.profile.firstName rangkaian Nama depan orang.
openGraph.profile.lastName rangkaian Nama belakang orang tersebut.
openGraph.profile.username rangkaian Nama pengguna orang tersebut.
openGraph.profile.gender rangkaian jenis kelamin seseorang.
openGraph.book.authors rangkaian[] Penulis artikel. Lihat Contoh
openGraph.book.isbn rangkaian ISBN-nya
openGraph.book.releaseDate tanggalwaktu Tanggal buku itu dirilis.
openGraph.book.tags rangkaian[] Tandai kata-kata yang terkait dengan buku ini.
openGraph.article.publishedTime tanggalwaktu Saat artikel pertama kali diterbitkan. Lihat Contoh
openGraph.article.modifiedTime tanggalwaktu Kapan artikel terakhir diubah.
openGraph.article.expirationTime tanggalwaktu Ketika artikel tersebut kedaluwarsa setelahnya.
openGraph.article.authors rangkaian[] Penulis artikel.
openGraph.article.section rangkaian Nama bagian tingkat tinggi. Misalnya Teknologi
openGraph.article.tags rangkaian[] Tandai kata-kata yang terkait dengan artikel ini.

Templat Judul

Gantikan %s dengan string judul Anda 

 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

Judul Bawaan 

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

Tidak Ada Indeks

Menyetelnya ke true akan menyetel noindex,follow (untuk menyetel nofollow , lihat nofollow ). Ini bekerja berdasarkan halaman demi halaman. Properti ini bekerja bersama-sama dengan properti nofollow dan bersama-sama mengisi tag meta robots .

Catatan: Properti noindex dan nofollow sedikit berbeda dari properti lainnya dalam artian menyetelnya sebagai default tidak berfungsi seperti yang diharapkan. Hal ini dikarenakan Next SEO sudah memiliki default index,follow karena next-seo adalah plugin SEO. Jadi jika Anda ingin properti ini secara global, silakan lihat bahan berbahayaSetAllPagesToNoIndex dan bahan berbahayaSetAllPagesToNoFollow.

Contoh Tanpa Indeks pada satu halaman:

Jika Anda memiliki satu halaman yang tidak ingin diindeks, Anda dapat mencapainya dengan: 

 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">
*/

berbahayaSetAllPagesToNoIndex

Ini memiliki awalan dangerously karena tidak akan noindex semua halaman. Karena ini adalah plugin SEO, itu adalah tindakan yang berbahaya. Tidak buruk menggunakan ini. Pastikan saja Anda ingin melakukan noindex SETIAP halaman. Anda masih dapat menggantinya di tingkat halaman jika Anda memiliki kasus penggunaan untuk index halaman. Hal ini dapat dilakukan dengan menyetel noindex: false .

Satu-satunya cara untuk membatalkan pengaturan ini adalah dengan menghapus prop dari DefaultSeo di <App> khusus Anda.

Tidak Ikuti

Menyetel ini ke true akan menyetel index,nofollow (untuk menyetel noindex , silakan merujuk ke noindex ). Ini berfungsi berdasarkan halaman demi halaman. Properti ini bekerja bersama-sama dengan properti noindex , dan bersama-sama, keduanya mengisi tag meta robots .

Catatan: Berbeda dengan properti lainnya, pengaturan noindex dan nofollow secara default tidak berfungsi seperti yang diharapkan. Ini karena Next SEO memiliki default index,follow , karena next-seo adalah plugin SEO. Jika Anda ingin mengizinkan properti ini secara global, lihat berbahayaSetAllPagesToNoIndex dan berbahayaSetAllPagesToNoFollow.

Contoh No Follow pada satu halaman:

Jika Anda memiliki satu halaman yang tidak ingin diindeks, Anda dapat mencapainya dengan: 

 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">
*/

berbahayaSetAllPagesToNoFollow

Ini memiliki awalan dangerously karena tidak akan nofollow semua halaman. Karena ini adalah plugin SEO, itu adalah tindakan yang berbahaya. Tidak buruk menggunakan ini. Pastikan saja Anda ingin nofollow SETIAP halaman. Anda masih dapat menimpanya di tingkat halaman jika Anda memiliki kasus penggunaan untuk follow halaman. Hal ini dapat dilakukan dengan mengatur nofollow: false .

Satu-satunya cara untuk menghapus pengaturan ini adalah dengan menghapus prop dari DefaultSeo di <App> khusus Anda.

noindex nofollow konten meta robots
-- -- index,follow (default)
PALSU PALSU index,follow
BENAR -- noindex,follow
BENAR PALSU noindex,follow
-- BENAR index,nofollow
PALSU BENAR index,nofollow
BENAR BENAR noindex,nofollow

robotAlat Peraga

Selain index, follow robots menerima lebih banyak properti untuk mengarsipkan perayapan yang lebih akurat dan menyajikan cuplikan yang lebih baik untuk bot SEO yang merayapi laman Anda.

Contoh: 

 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">
*/

Properti yang tersedia

Milik Jenis Keterangan
noarchive boolean Jangan tampilkan tautan cache di hasil pencarian.
nosnippet boolean Jangan tampilkan cuplikan teks atau pratinjau video di hasil penelusuran laman ini.
max-snippet nomor Gunakan maksimal [angka] karakter sebagai cuplikan tekstual untuk hasil penelusuran ini. Baca selengkapnya
max-image-preview 'tidak ada', 'standar', 'besar' Tetapkan ukuran maksimum pratinjau gambar untuk halaman ini di hasil pencarian.
max-video-preview nomor Gunakan maksimal [angka] detik sebagai cuplikan video untuk video di laman ini dalam hasil penelusuran. Baca selengkapnya
notranslate boolean Jangan menawarkan terjemahan halaman ini dalam hasil pencarian.
noimageindex boolean Jangan mengindeks gambar di halaman ini.
unavailable_after rangkaian Jangan tampilkan halaman ini di hasil pencarian setelah tanggal/waktu yang ditentukan. Tanggal/waktu harus ditentukan dalam format yang diadopsi secara luas termasuk, namun tidak terbatas pada RFC 822, RFC 850, dan ISO 8601.

Untuk referensi lebih lanjut tentang X-Robots-Tag kunjungi Pusat Penelusuran Google - Kontrol Perayapan dan Pengindeksan

Twitter

Twitter akan membaca tag og:title , og:image dan og:description untuk kartu mereka, inilah mengapa next-seo menghilangkan twitter:title , twitter:image dan twitter:description agar tidak terduplikasi.

Beberapa alat mungkin melaporkan ini sebagai kesalahan. Lihat Edisi #14

Facebook 

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

Tambahkan ini ke konfigurasi SEO Anda untuk menyertakan meta fb:app_id jika Anda perlu mengaktifkan wawasan Facebook untuk situs Anda. Informasi mengenai hal ini dapat ditemukan di dokumentasi Facebook

URL kanonik

Tambahkan ini berdasarkan halaman per halaman ketika Anda ingin menggabungkan URL duplikat. 

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

Bergantian

Relasi tautan ini digunakan untuk menunjukkan hubungan antara situs web desktop dan seluler dengan mesin telusur.

Contoh: 

 mobileAlternate = { {
  media : 'only screen and (max-width: 640px)' ,
  href : 'https://m.canonical.ie' ,
} } 
 languageAlternates = { [ {
  hrefLang : 'de-AT' ,
  href : 'https://www.canonical.ie/de' ,
} ] }

Tag Meta Tambahan

Ini memungkinkan Anda untuk menambahkan tag meta lain yang tidak tercakup dalam config dan harus digunakan sebagai ganti prop children .

content diperlukan. Lalu name , property atau httpEquiv . (Hanya satu untuk masing-masingnya)

Contoh: 

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

Contoh Tidak Valid:

Ini tidak valid karena mengandung lebih dari satu name , property dan httpEquiv pada entri yang sama. 

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

Satu hal yang perlu diperhatikan adalah saat ini hanya mendukung tag unik kecuali Anda menggunakan prop keyOverride untuk memberikan kunci unik untuk setiap tag meta tambahan.

Perilaku default (tanpa prop keyOverride ) adalah merender satu tag per name / property / httpEquiv yang unik. Yang terakhir ditentukan akan diberikan.

Misalnya, jika Anda meneruskan 2 tag dengan property yang sama : 

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

itu akan menghasilkan ini yang diberikan: 

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

Memberikan properti keyOverride tambahan seperti ini: 

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

menghasilkan HTML yang benar dirender: 

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

Tag Tautan Tambahan

Ini memungkinkan Anda untuk menambahkan tag tautan lain yang tidak tercakup dalam config .

rel dan href diperlukan.

Contoh: 

 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'
  }
] }

itu akan menghasilkan ini yang diberikan: 

 < 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 "
/>

Buka Grafik

Untuk spesifikasi lengkapnya silahkan cek di http://ogp.me/

SEO Berikutnya saat ini mendukung:

  • dasar
  • video
  • artikel
  • buku
  • profil

Contoh Grafik Terbuka

Dasar 

 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 >
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua