ページ内SEO

大まかに言うと、ページ内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には、これが起こるのを防ぐためのルールがあります。