Bangun komponen kepala SEO-friendly untuk NextJS / REACT

Sementara REAKS adalah perpustakaan JavaScript yang kuat, itu tidak termasuk semua potongan yang Anda butuhkan untuk membangun yang sederhana, berfungsi Tata Letak Situs Web . NextJS adalah kerangka kerja reaksi yang memungkinkan Anda membangun aplikasi dan situs web yang dirender dengan server dengan mudah.

NextJS juga mencakup sejumlah alat dan fitur di luar kotak seperti Webpack, Babel, Routing Dinamis, dan prefetching. Yang paling penting, saya telah menemukan bahwa NextJs sangat ramah seo.

Kerangka kerja ini memungkinkan Anda untuk memanfaatkan rendering sisi server, yang tidak hanya membuat aplikasi dan situs web Anda memuat lebih cepat, tetapi juga membuat situs web reaksi Anda jauh lebih mudah bagi mesin pencari untuk merangkak.

NextJs juga memudahkan membuat arsitektur situs yang tersegmentasi dengan menggunakan Routing Dinamis atau Routing Server Kustom . Misalnya, Anda dapat dengan mudah mengelompokkan situs web Anda ke dalam silo yang berbeda seperti / artikel /, / produk /, dan / layanan / untuk penataan konten yang lebih baik.

Yang terbaik dari semuanya, Anda dapat memanfaatkan semua hal yang membuat bereaksi seperti komponen, sifat komponen dan status komponen untuk menerapkan teknik optimasi pada halaman yang benar-benar fleksibel. Pada artikel ini, saya akan merinci membangun komponen kepala yang dioptimalkan dengan baik untuk bereaksi.

Pentingnya Elemen Kepala untuk SEO

Sekarang sebelum saya masuk ke cara membangun komponen kepala ini, mari kita bicarakan mengapa itu penting dan apa yang akan kita optimalkan.

Elemen kepala di situs web Anda akan menjadi salah satu bagian terpenting dalam hal SEO teknis. Untuk satu, semua situs web metadata diatur di kepala. Tag-tag ini termasuk judul, deskripsi meta, kata kunci halaman, setiap informasi penulis dan pengaturan viewport yang relevan.

Elemen kepala juga bertanggung jawab untuk menetapkan tag penting lainnya seperti tag URL kanonik Anda, tag OpenGraph Facebook yang relevan (tag OG) atau kartu Twitter, dan tag meta robot Anda. Masing-masing tag ini bertanggung jawab untuk menyampaikan informasi yang berbeda ke Google atau jejaring sosial sehingga mereka dapat lebih memahami, mengindeks, dan membagikan konten Anda.

Memiliki metadata yang dikonfigurasi dengan benar di situs web Anda dapat menjadi bencana pada keseluruhan optimasi situs web Anda dan pasti dapat menyebabkan peringkat Anda menukik.

Misalnya, dua hukuman terburuk yang dapat dihadapi situs web Anda dari sudut pandang optimisasi di halaman adalah penalti 'tag judul duplikat' dan penalti 'tag meta duplikat'. Dua tag ini bertanggung jawab untuk memberikan 'lift pitch' situs web Anda ke Google. Mereka juga menentukan teks yang akan dilihat pengguna ketika situs web Anda muncul di hasil pencarian Google.

Jika setiap halaman di situs web Anda memiliki judul yang sama persis dan set deskripsi yang sama, Google akan memiliki waktu yang sulit memahami apa situs web Anda. Akibatnya, Google tidak akan terlalu memperhatikan situs web Anda dan itu pasti tidak akan menganggapnya sebagai properti otoritas.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang SEO teknis di halaman , Lihat lebih lanjut tentang pendekatan saya di Speckyboy .

Sekarang setelah Anda memahami sedikit lebih banyak tentang elemen kepala dan mengapa itu sangat penting di bawah tenda, mari kita lihat cara membangun komponen kepala yang ramah SEO untuk bereaksi.

Bangun komponen kepala yang ramah SEO

Komponen kepala yang ramah SEO yang saya detail dalam artikel ini khusus untuk NextJS. Namun, jika Anda menggunakan kerangka kerja reaksi yang berbeda atau hanya menggunakan REACT, Anda dapat menggunakannya Reaksi helm. di tempat komponen kepala NEXTJS.

Hal pertama yang ingin Anda lakukan adalah mengatur struktur kepala dasar Anda. Kode di bawah ini dapat berfungsi sebagai contoh, tetapi jangan ragu untuk menambah atau menghapus hal-hal seperti yang Anda inginkan. Pada minimum, kepala Anda harus menyertakan tag judul, tag deskripsi meta, URL kanonik, dan tag sosial yang relevan.

& lt; head & gt;
& lt; judul & gt; & lt; / judul & gt;
& lt; meta name = "deskripsi" konten = "" / & gt;
& LT; META Property = "OG: Type" Content = "Situs web" / & gt;
& lt; meta name = "og: title" property = "og: title" konten = "" / & gt;
& lt; meta name = "OG: Deskripsi" Property = "OG: Deskripsi" konten = "" / & gt;
& lt; meta properti = "OG: Site_name" konten = "" / & gt;
& lt; meta properti = "OG: URL" konten = "" / & gt;
& lt; meta name = "twitter: kartu" konten = "ringkasan" / & gt;
& lt; meta name = "twitter: judul" konten = "" / & gt;
& lt; meta name = "twitter: deskripsi" konten = {props.desc} / & gt;
& LT; META NAME = "Twitter: Situs" konten = "" / & gt;
& lt; meta name = "twitter: creator" konten = "" / & gt;
& lt; tautan rel = "ikon" type = "gambar / png" href = "/ statis / gambar / favicon.ico" / & gt;
& lt; tautan rel = "apple-touch-icon" href = "/ statis / gambar / favicon.ico" / & gt;
& lt; tautan rel = "stylesheet" href = "" / & gt;
& lt; meta property = "og: image" konten = "" / & gt;
& lt; meta name = "twitter: image" konten = "" / & gt;
& lt; tautan rel = "canonical" href = "" / & gt;
& lt; skrip type = "Teks / Javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt; 

Mengatur komponen

Selanjutnya, Anda akan ingin membuat file parsial baru untuk komponen Anda. Anda dapat menghubungi file parsial SEO-META.JS. atau serupa. File ini harus disimpan di Partials. direktori.

Komponen awal Anda akan terlihat seperti ini:

 Impor kepala dari 'Next / Head'
const meta = (alat peraga) = & gt; (
& lt; head & gt;
& lt; judul & gt; & lt; / judul & gt;
& lt; meta name = "deskripsi" konten = "" / & gt;
& LT; META Property = "OG: Type" Content = "Situs web" / & gt;
& lt; meta name = "og: title" property = "og: title" konten = "" / & gt;
& lt; meta name = "OG: Deskripsi" Property = "OG: Deskripsi" konten = "" / & gt;
& lt; meta properti = "OG: Site_name" konten = "" / & gt;
& lt; meta properti = "OG: URL" konten = "" / & gt;
& lt; meta name = "twitter: kartu" konten = "ringkasan" / & gt;
& lt; meta name = "twitter: judul" konten = "" / & gt;
& lt; meta name = "twitter: deskripsi" konten = {props.desc} / & gt;
& LT; META NAME = "Twitter: Situs" konten = "" / & gt;
& lt; meta name = "twitter: creator" konten = "" / & gt;
& lt; tautan rel = "ikon" type = "gambar / png" href = "/ statis / gambar / favicon.ico" / & gt;
& lt; tautan rel = "apple-touch-icon" href = "/ statis / gambar / favicon.ico" / & gt;
& lt; tautan rel = "stylesheet" href = "" / & gt;
& lt; meta property = "og: image" konten = "" / & gt;
& lt; meta name = "twitter: image" konten = "" / & gt;
& lt; tautan rel = "canonical" href = "" / & gt;
& lt; skrip type = "Teks / Javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
)
Meta default ekspor 

Anda akan melihat bahwa saya lewat Atribut , atau properti, ke komponen saya. Kami akan menggunakan properti ini untuk mengisi tag meta kami.

Impor komponen

Setelah Anda mengatur komponen dasar Anda, Anda kemudian dapat mengimpornya ke halaman Anda. Anda dapat mengimpor komponen dengan memasukkan yang berikut di bagian atas halaman Anda.

 impor meta dari '../partials/seo-meta.js'

Anda sekarang dapat menempatkan komponen meta dalam fungsi render Anda, sama seperti Anda dengan komponen kepala NativeBS Native.

Buat properti komponen

Sekarang setelah Anda mengimpor dan menempatkan komponen meta Anda, Anda ingin mengatur properti yang Anda perlukan untuk metadata Anda. Anda biasanya harus memasukkan judul, deskripsi, dan URL untuk setiap halaman, tetapi Anda juga dapat memasukkan gambar dan data lain yang diperlukan.

Anda mungkin juga ingin memasukkan properti untuk file CSS dan JavaScript sehingga Anda dapat memuatnya secara bersyarat pada halaman seperlunya. Dengan semua properti yang ditetapkan, komponen Anda akan terlihat seperti ini:

 & LT; META
title = "Ini adalah judul | Nama Situs Web "
desc = "Ini deskripsi"
Canonical = "https://www.someurl.com"
CSS = '/ Static / CSS / Styles.css'
JS = '/ Static / JS / Scripts.js'
/ & gt; 

Jika Anda hanya membangun situs web statis dengan NextJs, Anda harus dapat mengisi properti dengan konten statis. Namun, jika Anda memuat halaman dari rute dinamis dan mengisi template halaman dengan kode dinamis, Anda ingin mengatur properti ini secara dinamis.

Situs web kami, Noun yang tepat , menggunakan API WordPress sebagai sumber data, tetapi Anda dapat menggunakan instruksi di bawah ini menggunakan hampir semua istirahat atau API graphql.

Saat meminta halaman, Anda akan ingin meraih dan mengembalikan metadata dan data halaman yang relevan selama getinitialprops () async fungsi. Ini kemudian akan memungkinkan Anda menggunakan data dinamis dalam fungsi Render sehingga Google dan robot lain dapat merayapi informasi.

Tergantung pada sumber data Anda dan beberapa faktor lain, Anda dapat mengambil pendekatan yang berbeda untuk mendapatkan properti awal, tetapi di sini adalah pendekatan dasar untuk membantu Anda memulai.

static async getinitialprops (CTX) {
const res = menunggu fetch ('// API.Some-url.com/case_studies/?slug=' + ctx.req.params.slug)
const error_code = res.statuscode & gt; 200? res.statuscode: false;
data const = menunggu res.json ();
Biarkan URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
biarkan meta_title = menunggu data 
 .meta_title
Biarkan Meta_desc = menunggu data 
 .meta_desc
kembali {
error_code,
   case_study: data,
   META_TITLE: META_TITLE,
   META_DESC: META_DESC,
   URL: URL.
}
}

Anda sekarang dapat mengakses properti yang Anda tetapkan dalam fungsi render Anda. Ketika digunakan dalam kode Anda, mereka akan terlihat seperti ini.

 & LT; META
title = {this.props.meta_title}
desc = {this.props.meta_desc}
canonical = {this.props.url}
CSS = '/ Static / CSS / Styles.css'
JS = '/ Static / JS / Scripts.js'
/ & gt; 

Gunakan properti dalam komponen Anda

Langkah terakhir adalah mengatur komponen Anda sehingga menggunakan properti yang sedang dilalui. Sementara beberapa properti seperti judul dan deskripsi akan diatur pada setiap halaman, yang lain seperti CSS dan JS mungkin bersyarat. Anda akan mempertimbangkan hal ini dalam komponen Anda.

Dalam contoh kami, kami melewati properti kami ke komponen menggunakan argumen Atribut . Kami kemudian dapat mengakses alat peraga individu menggunakan nama mereka, misalnya, alat peraga .title. atau props.desc. .

Saat mengatur blok bersyarat, Anda dapat melakukan pendekatan seperti ini:

 {
props.css & amp; & amp;
& lt; tautan rel = "stylesheet" href = {`$ {props.css}`} / & gt;
} 

Dengan cara ini, jika tidak ada set CSS, Anda tidak akan menetapkan tag tautan kosong pada halaman Anda. Anda dapat menggunakan pendekatan yang sama untuk file javascript ini.

Setelah Anda selesai mengisi komponen kepala Anda, itu harus terlihat seperti ini:

 Impor kepala dari 'Next / Head'
const meta = (alat peraga) = & gt; (
& lt; head & gt;
& lt; judul & gt; {props.title} & lt; / judul & gt;
& lt; meta name = "deskripsi" konten = {props.desc} / & gt;
& LT; META Property = "OG: Type" Content = "Situs web" / & gt;
& lt; meta name = "og: title" property = "og: title" content = {props.title} / & gt;
& lt; meta name = "og: deskripsi" properti = "og: deskripsi" konten = {props.desc} / & gt;
& lt; meta properti = "OG: Site_name" konten = "kata benda yang tepat" / & gt;
& lt; meta properti = "OG: URL" konten = {`$ {props.canonical}`} / & gt;
& lt; meta name = "twitter: kartu" konten = "ringkasan" / & gt;
& lt; meta name = "twitter: judul" konten = {props.title} / & gt;
& lt; meta name = "twitter: deskripsi" konten = {props.desc} / & gt;
& lt; meta name = "twitter: situs" konten = "@ propernounco" / & gt;
& lt; meta name = "twitter: creator" konten = "@ propernounco" / & gt;
& lt; tautan rel = "ikon" type = "gambar / png" href = "/ statis / gambar / favicon.ico" / & gt;
& lt; tautan rel = "apple-touch-icon" href = "/ statis / gambar / favicon.ico" / & gt;
{
props.css & amp; & amp;
& lt; tautan rel = "stylesheet" href = {`$ {props.css}`} / & gt;
}
{
alat peraga? (
& lt; meta properti = "og: image" konten = {`$ {props.image}`} / & gt;
): (
& lt; meta properti = "og: image" konten = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/proper-noun-social.png" / & gt;
)
}
{
alat peraga.Image & amp; & amp;
& lt; meta name = "twitter: image" konten = {`$ {props.image}`} / & gt;
}
{
alat peraga.canonical & amp; & amp;
& lt; tautan rel = "kanonik" href = {`$ {props.canonical}`} / & gt;
}
{
props.js & amp; & amp;
& lt; script type = "text / javascript" src = {`$ {props.js}`} & gt; & script & gt;
}
& lt; / head & gt;
)
Meta default ekspor 

Baca lebih lajut:

• Kembangkan komponen reaksi resusable
• 14 dari API JavaScript terbaik
• 15 alat JavaScript penting yang harus Anda gunakan