Next.js Web サイトに SEO フレンドリーなヘッダーを追加する方法

Next.js Web サイトに SEO フレンドリーなヘッダーを追加する方法

ページタイトル、メタタグ、メタディスクリプションは SEO にとって重要です。これらは、ユーザーが SERPS で最初に目にするものであり、クリックして Web サイトにアクセスするかどうかを決定します。したがって、Web サイトのタイトル、メタ タグ、および説明を最適化することが重要です。





Next.js では、カスタム head コンポーネントを介してそれらを追加します。アプリケーションのすべてのページに追加するか、ページごとにカスタマイズできます。



今日のメイク動画

すべての Next.js ページにグローバル ヘッド タグを追加する

Next.js は、ページを初期化するための _app.js を提供します。これを使用して、すべてのページで共有されるメタ タグを作成できます。





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

ページにカスタムのタイトルと説明を付けたい場合は、head コンポーネントを追加すると、Next.js は App コンポーネントのデフォルトの代わりにそれを使用します。

特定の Next.js ページへのメタ タグと説明の追加

静的なメタ タグと説明は、ホームページなど、コンテンツが同じページに適しています。



ファイル /pages/index.js を開き、head タグを適切なタイトルと説明で変更します。

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;

next/head からインポートすることで Head コンポーネントにアクセスします . のheadタグに要素を追加することで機能します HTML ページ .このコンポーネントを配置する場所に応じて、メタ タグと説明は、アプリケーション全体または個々のページで使用できます。



タイトル、ビューポート幅、説明を _app.js ファイルに追加すると、すべてのページに同じメタデータが含まれるようになります。

このページには静的コンテンツがありますが、動的コンテンツを使用するページを作成したい場合があります。



Next.js ページに動的なメタ タイトルと説明を追加する

ユース ケースに応じて、getStaticProps()、getStaticPaths()、または getServerSideProps() を使用して、Next.js でデータを取得できます。このデータによって、ページのコンテンツが決まります。これを使用して、ページのメタデータを作成します。

無料でYouTubeのビデオをダウンロードする方法

たとえば、ブログ投稿をレンダリングする Next.js アプリケーションのメタデータを作成するのは面倒です。

推奨される方法は、使用できる識別子を受け取る動的ページを作成することです ブログのコンテンツを取得する .その後、このコンテンツを head コンポーネントで使用できます。

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 関数は、投稿データを小道具として Post コンポーネントに渡します。 Post コンポーネントは、小道具からタイトル、説明、およびコンテンツを分解します。 head コンポーネントは、メタ タグでタイトルと説明を使用します。

Next.js は最適化されたフレームワークです

head コンポーネントを使用して、メタ タイトルと説明を Next.js プロジェクトに追加する方法を学習しました。この知識を使用して、SEO に適したヘッダーを作成し、SERP を上昇させ、より多くの訪問者をサイトに引き付けます。

head コンポーネントとは別に、Next.js は Link や Image などの他のコンポーネントを提供します。これらのコンポーネントはすぐに最適化され、SEO に適した高速な Web サイトを簡単に作成できます。