Next.js Web Sitesine SEO Dostu Başlıklar Nasıl Eklenir?

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 head bileşeni aracılığıyla eklersiniz. Bunları uygulamadaki tüm sayfalara ekleyebilir veya her sayfa için özelleştirebilirsiniz.

GÜNÜN YAPILAN VİDEOSU

Tüm Next.js Sayfalarına Global Head Tag Ekleme

Next.js, sayfaları başlatmak için _app.js sağlar. Tüm sayfalarda paylaşılan meta etiketler oluşturmak için kullanabilirsiniz.

import '../styles/globals.css' 
import Head from 'next/head' 
  
function MyApp({ Component, pageProps }) { 
  return <> 
    <Head> 
      <meta name="author" content="John Doe"/> 
    </Head> 
    <Component {...pageProps} /> 
  </> 
} 
  
export default MyApp

Bir sayfanın özel bir başlığı ve açıklaması olmasını istiyorsanız, ona head bileşenini ekleyin; Next.js, Uygulama bileşenindeki varsayılanın yerine onu kullanacaktır.

Belirli Bir Next.js Sayfasına Meta Etiketler ve Açıklama Ekleme

Statik meta etiketler ve açıklamalar, içeriği aynı kalan sayfalar, örneğin bir ana sayfa için uygundur.

/pages/index.js dosyasını açın ve uygun başlık ve açıklama ile head etiketini değiştirin.

Windows 10 için kullanışlı toplu iş dosyaları

import Head from "next/head"; 
  
const Home= () => { 
  return ( 
    <> 
    <Head> 
      <title>Blog</title> 
      <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
      <meta name='description' content='Programming Articles'/> 
    </Head> 
    <main> 
      <h1>Welcome to my blog!</h1> 
    </main> 
    </> 
  ); 
}; 
  
export default Home;

Head bileşenine next/head öğesinden içe aktararak erişirsiniz. . öğesinin 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ünüm 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ığı 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 oluşturan Next.js uygulaması için meta veri oluşturmak sıkıcı olabilir.

Ö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.

import { getAllPosts, getSinglePost } from "../../utils/mdx"; 
import Head from "next/head"; 
  
const Post = ({ title, description, content }) => { 
  return ( 
    <> 
      <Head> 
        <title>{title}</title> 
        <meta name="description" content={description} /> 
      </Head> 
      <main>{/* page content */}</main> 
    </> 
  ); 
}; 
  
export const getStaticProps = async ({ params }) => { 
  // get a single post 
  const post = await getSinglePost(params.id, "posts"); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export const getStaticPaths = async () => { 
  // Retrieve all posts 
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } })); 
  
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export default Post;

getStaticProps işlevi, gönderi verilerini Post bileşenine props olarak iletir. Gönderi bileşeni, sahne öğelerinden başlığı, açıklamayı ve içeriği yok eder. Head bileşeni daha sonra meta etiketlerdeki başlığı ve açıklamayı kullanır.

Windows mağazası şu anda kullanılamıyor

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'lere tırmanmak ve sitenize daha fazla ziyaretçi çekmek için bu bilgiyi kullanın.

Head bileşeninin 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ırmak için kutudan çıkar çıkmaz optimize edilmiştir.