この記事を読んだ後に理解できること

• SEO対策でaタグを設置する理由
• Next.jsのLinkタグについて
• Next.jsのLinkタグの実装方法

なぜSEO対策でaタグを設置する必要があるのか

Googleのクローラーがたどれるリンクはhref属性が付与されたaタグだけだからです。

SEO上、Googleのクローラーに認識してもらいたい箇所については、適切にaタグを設置する必要があります。


下記のように設置します。

• <a href="https://example.com" />

• <a href="/articles" />

Next.jsのLinkタグについて

概要

Next.jsのLinkタグは、通常のaタグのように遷移先を指定することでページ間遷移が可能になります。

通常のaタグと違うところは、Next.jsの動的なルーティングにも対応しているところです。

例えば、以下のような設定が可能です。

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}`} />
            {article.title}
          </Link>
        </li>
      })}
    </ul>
  )
}

export default ArticleList;

※参考

設定方法

それでは、本題の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サイトマップの生成方法について解説します。