next head seo
0.1.3
Plugin SEO yang sederhana dan ringan untuk aplikasi Next.js.
Meskipun next-head-seo hanya mendukung properti SEO penting, itu akan cukup untuk sebagian besar situs web.
Jika Anda membutuhkan pengaturan SEO lanjutan seperti data terstruktur, gunakan Next-seo sebagai gantinya.
$ npm install next-head-seo
# or with yarn
$ yarn add next-head-seo Impor next-head-seo pada setiap komponen halaman dan tambahkan properti yang diinginkan.
Contoh:
// 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> Ada 2 opsi untuk mengonfigurasi Perbuatan SEO default.
<NextHeadSeo /> di _app.tsx Opsi pertama adalah menempatkan <NextHeadSeo /> dengan nilai default pada _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 Pastikan <NextHeadSeo /> ditempatkan sebelum <Component {...pageProps} /> karena head-head-seo berikutnya menghormati nilai terakhir untuk nama properti yang sama.
Atau, cukup buat komponen pembungkus yang dapat digunakan pada setiap komponen halaman. Ini adalah cara yang lebih fleksibel dan andal untuk mengatur nilai default.
Berikut adalah contoh komponen pembungkus:
// 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" ,
} }
/>
) ;
} ; Kemudian, tempatkan <MyPageSeo /> di setiap komponen halaman.
// 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> Semua alat peraga untuk next-head-seo adalah opsional.
| Menopang | Keterangan | Jenis |
|---|---|---|
| judul | ✅ Disarankan untuk mengatur semua halaman. Judul halaman. | rangkaian |
| resmi | ✅ Disarankan untuk mengatur semua halaman. URL kanonik halaman. | rangkaian |
| robot | Setel noindex, nofollow hanya jika Anda tidak ingin halaman diindeks pada mesin pencari. Kalau tidak, Anda tidak harus menggunakan prop ini. | "noindex, nofollow""index, follow""noindex""nofollow" |
| keterangan | ✅ Disarankan untuk mengatur semua halaman. Deskripsi halaman. Teks setelah 150 karakter akan dipotong seperti yang dilakukan Google. | rangkaian |
| Twitter.Card | Tipe Gambar Kartu Twitter. Diatur bersama og:image .Lihat Detail: Kartu Twitter | "summary""summary_large_image""player""app" |
| Twitter.site | Nama pengguna Twitter dimulai dengan @ | rangkaian |
| OG.Title | Untuk OG: Judul. Secara otomatis menggunakan nilai title jika kosong.Lihat Detail: Buka Protokol Grafik | rangkaian |
| OG.DESCRIPTION | Untuk OG: Deskripsi. Secara otomatis menggunakan nilai description jika kosong. | rangkaian |
| og.url | Untuk OG: URL. Secara otomatis menggunakan nilai canonical jika kosong. | rangkaian |
| OG.Image | Untuk OG: Gambar. Atur URL Gambar. | rangkaian |
| OG.Type | Untuk OG: Ketik. | "article""book""website""profile" |
| OG.SItename | Untuk OG: Site_name | rangkaian |
| custommetags | Array objek untuk tag meta khusus. Lihat bagian CustommetAtags. | Array objek |
| CustomLinkTags | Array objek untuk tag tautan khusus. Lihat bagian CustomLinkTags. | Array objek |
Anda dapat mengatur tag meta tambahan. Contoh:
< 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>Jika Anda ingin mengganti tag meta khusus dari komponen halaman lain, gunakan tombol yang sama untuk kedua komponen.
Contoh:
// 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>Anda dapat mengatur tag tautan tambahan. Contoh:
< 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>Jika Anda ingin mengganti tag tautan khusus dari komponen halaman lain, gunakan tombol yang sama untuk kedua komponen. Contoh:
// 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>
