チャプター15

On-Page SEO

On-Page SEOとは、ページの全体構造を構成する見出しやリンクのことです。見出しはドキュメント内での重要性を示し、リンクはウェブを相互に接続します。

見出しとH1

見出しは、ユーザーがページの構造と、続く段落で何を読むことになるかを理解するのに役立ちます。また、検索エンジンがページのどの部分が最も重要であるかを理解するのを助けます。

見出しは1から6まであり、見出し1が最も重要と考えられがちです。各ページでH1見出しタグを使用することが推奨されます。H1はページが何についてのものかを表し、titleタグに似ているべきです。

function Page() {
  return <h1>Your Main Page Heading</h1>;
}

内部リンク

インターネットはリンクによって接続されています。あるウェブサイトから別のウェブサイトへのリンクがなければ、インターネットは存在しなかったでしょう。より多くのリンクを受け取るウェブサイトは、ユーザーによってより信頼されているウェブサイトを表す傾向があります。

Googleはこの原則をPageRankアルゴリズムの発明で開始しました。

PageRankアルゴリズムは、大まかに言うと、データベース内のすべてのリンクを走査し、受信するリンクの数（量）と、どのドメインから受信するか（質）に基づいてドメインをスコアリングするアルゴリズムです。スパムウェブサイトからの多くのリンクは、ほとんど価値がない可能性が高いです。

しかし、大手の全国的な報道機関のウェブサイトからのリンクは、検索エンジンにとって非常に価値がある可能性が高いです。そのため、リンクは重要であり、常にページ間の内部リンクとして、また他のウェブサイトへの外部リンクとして含めるべきです。リンクはPageRank計算に使用されるために、常にhrefを使用する必要があります。

next/link

Next.jsは、クライアントサイドのルート間遷移を可能にするLinkコンポーネントを提供します。簡単な使用例は以下のようになります。

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

hrefプロップは必須であり、アンカータグにリンクを正しく追加します。これはSEOにとって非常に重要です。Googleがページをクロールする際、JavaScriptに依存せずにこのリンクをクロールして追跡します。

ただし、Linkの子がaタグをラップするカスタムコンポーネントである場合、LinkにpassHrefを追加する必要があります。これは、styled-componentsのようなライブラリを使用している場合に必要です。これがないと、aタグにhref属性が付与されず、サイトのSEOに影響します。

passHrefの使用方法

import Link from 'next/link';
import styled from 'styled-components';
 
// This creates a custom component that wraps an <a> tag
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // Must add passHref to Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

ESLintを使用している場合、Next.jsにはこれを防ぐためのルールがあります。

さらに読む

Next.js: Link
Next.js: eslint-plugin-next