設定方法

それでは、本題のaタグにhref属性を付与させる方法です。

Next.js13以降

import { NextPage } from 'next'
import Link from 'next/link'

type Props = {
  articles: Array<{
    id: string,
    title: string
    content: stirng
  }>
}

const ArticleList: NextPage = (props: Props) => {
  const { articles } = props;

  return (
    <ul>
      {articles.map((article) => {
        <li>
          // ver13より前はlegacyBehaviorが不要
          <Link href={`/articles/${article.id}`} legacyBehavior />
            <a>
              {article.title}
            </a>
          </Link>
        </li>
      })}
    </ul>
  )
}

export default ArticleList;

styled-componentのようなライブラリを使っているケースでは、passHref属性を付与する必要があります。

import * as Style from 'style.ts'
import { NextPage } from 'next'
import Link from 'next/link'

type Props = {
  articles: Array<{
    id: string,
    title: string
    content: stirng
  }>
}

const ArticleList: NextPage = (props: Props) => {
  const { articles } = props;

  return (
    <ul>
      {articles.map((article) => {
        <li>
          <Link href={`/articles/${article.id}`} passHref legacyBehavior />
            <Style.A>
              {article.title}
            </Style.A>
          </Link>
        </li>
      })}
    </ul>
  )
}

export default ArticleList;

さいごに

今回はNext.jsでaタグを適切に設置して、SEO対策をする方法について解説しました。

自分自身SEO対策がなんたるかをよく理解していませんでしたが、ブログを作ったり、記事を作成したりすることで段々理解できてきました。

次回は、Next.jsでのxmlサイトマップの生成方法について解説します。

Next.jsのSEO対策でaタグを設置する

目次