オンページSEO
高レベルで言えば、オンページSEOとはページの全体的な構造を構成する見出しとリンクを指します。見出しは文書内での重要性を示し、リンクはウェブを相互接続します。
見出しとH1タグ
見出しはユーザーがページの構造と次に読む内容を理解するのに役立ちます。また、検索エンジンがページのどの部分が最も重要かを理解する作業を容易にします。
見出しは1から6まであり、Heading 1（H1）が最も重要と考える傾向があります。各ページでH1見出しタグを使用することが推奨されます。H1はページの内容を表し、titleタグと類似している必要があります。
function Page() {
return <h1>メインページの見出し</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';
// これは<a>タグをラップするカスタムコンポーネントを作成します
const RedLink = styled.a`
color: red;
`;
function NavLink({ href, name }) {
// LinkにpassHrefを追加する必要があります
return (
<Link href={href} passHref>
<RedLink>{name}</RedLink>
</Link>
);
}
export default NavLink;ESLintを使用している場合、Next.jsにはこれが起こらないようにするルールがあります。
さらに詳しく
- Next.js: Link
- Next.js: eslint-plugin-next