Sayfa başlıkları, meta etiketler ve meta açıklamalar SEO için önemlidir. Bir kullanıcının SERPS'de gördüğü ilk şeylerdir ve web sitenize tıklayıp tıklamadıklarını belirler. Bu nedenle web sitenizin başlıklarını, meta etiketlerini ve açıklamasını optimize etmeniz önemlidir.
Next.js'de, bunları özel baş bileşeni aracılığıyla eklersiniz. Bunları uygulamadaki tüm sayfalara ekleyebilir veya her sayfa için özelleştirebilirsiniz.
Tüm Next.js Sayfalarına Global Başlık Etiketi Ekleme
Next.js, sayfaları başlatmak için _app.js sağlar. Tüm sayfalarda paylaşılan meta etiketler oluşturmak için kullanabilirsiniz.
içe aktarmak '../styles/globals.css'
içe aktarmak KAFA itibaren "sonraki / kafa"işlevUygulamam({ Bileşen, pageProps }) {
geri dönmek <>
<KAFA>
<meta adı="yazar" içerik="John Doe"/>
</Head>
<Bileşen {...pageProps} />
</>
}
ihracatvarsayılan Uygulamam
Bir sayfanın özel bir başlığı ve açıklaması olmasını istiyorsanız, buna head bileşenini ekleyin ve Next.js, App bileşenindeki varsayılan bileşen yerine onu kullanacaktır.
Belirli Bir Next.js Sayfasına Meta Etiketleri ve Açıklama Ekleme
Statik meta etiketler ve açıklamalar, ana sayfa gibi içeriği aynı kalan sayfalar için uygundur.
/pages/index.js dosyasını açın ve head etiketini uygun başlık ve açıklama ile değiştirin.
içe aktarmak KAFA itibaren "sonraki/baş";sabit Ev= () => {
geri dönmek (
<>
<KAFA>
<başlık>Blog</title>
<meta adı="görüntü alanı" içerik="başlangıç ölçeği=1.0, genişlik=cihaz genişliği" />
<meta adı='Tanım' içerik='Programlama Makaleleri'/>
</Head>
<ana>
<h1>Benim bloğuma hoşgeldiniz!</h1>
</main>
</>
);
};
ihracatvarsayılan Ev;
Head bileşenine next/head'den içe aktararak erişirsiniz. Head etiketine öğeler ekleyerek çalışır. bir HTML sayfası. Bu bileşeni nereye yerleştirdiğinize bağlı olarak, meta etiketler ve açıklama tüm uygulamada veya tek tek sayfalarda mevcut olacaktır.
_app.js dosyasına başlık, görüntü alanı genişliği ve açıklama eklemek, tüm sayfaların aynı meta verilere sahip olmasını sağlar.
Bu sayfa statik içeriğe sahiptir, ancak bazen dinamik içerik tüketen sayfalar oluşturmak isteyebilirsiniz.
Next.js Sayfasına Dinamik Meta Başlık ve Açıklamalar Ekleme
Kullanım durumuna bağlı olarak, Next.js'de veri almak için getStaticProps(), getStaticPaths() veya getServerSideProps() kullanabilirsiniz. Bu veriler sayfanın içeriğini belirler. Sayfanın meta verilerini oluşturmak için kullanın.
Örneğin, blog gönderilerini işleyen Next.js uygulaması için meta veri oluşturmak sıkıcı olacaktır.
Önerilen yol, kullanabileceğiniz bir tanımlayıcı alan dinamik bir sayfa oluşturmaktır. blog içeriğini getir. Daha sonra bu içeriği head bileşeninde kullanabilirsiniz.
içe aktarmak { getAllPosts, getSinglePost } itibaren "../../utils/mdx";
içe aktarmak KAFA itibaren "sonraki/baş";sabit Gönderi = ({ başlık, açıklama, içerik }) => {
geri dönmek (
<>
<KAFA>
<başlık>{başlık}</title>
<meta adı="Tanım" içerik={açıklama} />
</Head>
<ana>{/* sayfa içeriği */}</main>
</>
);
};ihracatsabit getStaticProps = zaman uyumsuz ({ parametreler }) => {
// tek bir gönderi al
sabit gönderi = beklemek getSinglePost (params.id, "gönderiler");geri dönmek {
aksesuarlar: { ...yazı },
};
};ihracatsabit getStaticPaths = zaman uyumsuz () => {
// Tüm gönderileri al
const yolları = getAllPosts("gönderiler").map(({ kimlik }) => ({ parametreler: { id } }));geri dönmek {
yollar,
geri çekilmek: YANLIŞ,
};
};
ihracatvarsayılan Postalamak;
getStaticProps işlevi, post verilerini props olarak Post bileşenine iletir. Post bileşeni, donanımlardan başlığı, açıklamayı ve içeriği yok eder. Head bileşeni daha sonra meta etiketlerdeki başlığı ve açıklamayı kullanır.
Next.js Optimize Edilmiş Bir Çerçevedir
Bir Next.js projesine meta başlıklar ve açıklamalar eklemek için head bileşenini nasıl kullanacağınızı öğrendiniz. SEO dostu başlıklar oluşturmak, SERP'lerde yukarı çıkmak ve sitenize daha fazla ziyaretçi çekmek için bu bilgiyi kullanın.
Ana bileşenin yanı sıra Next.js, Link ve Image gibi başka bileşenler de sağlar. Bu bileşenler, hızlı SEO dostu web siteleri oluşturmayı kolaylaştıran kutudan çıkar çıkmaz optimize edilmiştir.