Next.js web sitesine SEO dostu başlıklar eklemek, web sitenizin arama motoru sonuç sayfalarında daha iyi bir sıralama almasına yardımcı olabilir. Bunun için Next.js’in <Head> bileşenini kullanabiliriz. <Head> bileşeni, HTML <head> etiketine doğrudan erişim sağlar ve burada meta açıklamaları, stil bağlantıları, yazı tipi bağlantıları ve başlıklar gibi sayfa başına öğeler ekleyebiliriz.
Aşağıda, bir Next.js sayfasına SEO dostu bir başlık eklemek için örnek bir kod parçası verilmiştir:
import Head from 'next/head';
function HomePage() {
return (
<div>
<Head>
<title>Next.js Örnek Sayfası</title>
<meta name="description" content="Bu bir Next.js örnek sayfasıdır." />
</Head>
<h1>Merhaba Dünya!</h1>
<p>Next.js örnek sayfasına hoş geldiniz.</p>
</div>
);
}
export default HomePage;
Bu örnekte, <Head> bileşenine <title> ve <meta> etiketleri eklenerek sayfa başlığı ve açıklaması tanımlanmıştır. Bu öğeler, web sitenizin arama sonuçlarında görünen bilgilerdir ve arama motorlarının sitenizi anlamasına ve sıralamasına yardımcı olur.
Ek olarak, <Head> bileşenini kullanarak diğer SEO dostu öğeleri de ekleyebilirsiniz. Örneğin, Open Graph protokolüne uygun olarak sosyal medya paylaşımları için özel başlık, açıklama ve görsel ekleyebilirsiniz:
import Head from 'next/head';
function BlogPost({ post }) {
return (
<div>
<Head>
<title>{post.title}</title>
<meta name="description" content={post.summary} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.summary} />
<meta property="og:image" content={post.image} />
</Head>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
export async function getStaticProps() {
// Blog post verileri burada getirilir
}
export default BlogPost;
Bu örnekte, <Head> bileşenine <meta property=”og:…”> etiketleri eklenerek Open Graph protokolüne uygun meta verileri tanımlanmıştır. Bu öğeler, web sitenizin paylaşıldığında sosyal medya sitelerinde nasıl görüneceğini belirler.
SEO dostu başlıklar ve diğer meta verileri eklemek, web sitenizin arama sonuçlarında daha görünür hale gelmesine ve daha fazla ziyaretçi çekmesine yardımcı olabilir.