Shopify hタグ（h1〜h6の見出しタグ）をチェックしていて、こんな経験はありませんか？

「SEOチェックツールで見たら、全ページに『カートにアイテムが追加されました』という見出しが出てくる」
「ヘッダーにh2があると指摘されたけど、どこを直せばいいのかわからない」

Shopifyでストアを運営していると、このようなご相談をいただくことがあります。

結論からお伝えすると、原因はテーマに標準で入っているカート通知のポップアップです。
コードを1行書き換えるだけで直せるので、制作会社に依頼しなくても対応できます。

この記事では、実際に弊社がDawnテーマのストアでShopify hタグを修正した手順をもとに、原因の確認から本番反映までをわかりやすく解説します。

なお、見出しの修正のような部分的な対応ではなく、サイト全体のリニューアルを検討している方は、こちらの記事もあわせてご覧ください。

Shopify hタグがヘッダー・カートに入る原因とは？

カート通知は全ページに「隠れて」入っている

商品をカートに追加したとき、画面の右上に「カートにアイテムが追加されました」というポップアップが出ます。
このポップアップは、表示されていないときもHTMLの中に常に存在しています。

Dawnテーマでは、カート通知がヘッダーと一緒に全ページで読み込まれ、普段はCSSで非表示にされているだけです。

見出しがh2で書かれている

問題は、このポップアップの見出しが初期状態でh2タグになっていることです。
そのため、商品をカートに入れていなくても、すべてのページのHTMLにh2が入ります。

ヘッダーはページの一番上にあるので、ページによってはh1より先にこのh2が出てきます。
Shopify hタグのチェックで「ヘッダーにh2がある」「カートにhタグが入っている」と指摘されるのは、このためです。

Shopify hタグ（カートのh2）は直すべき？SEOへの影響を整理

よくある誤解：「h2があると順位が下がる」わけではない

まず安心していただきたいのは、これだけで検索順位が大きく下がるような問題ではないということです。
Googleは、見出しの順番を厳密には求めていないとされています。

それでも直しておきたい3つの理由

とはいえ、1行の修正で済むなら、Shopify hタグは直しておく価値が十分にあります。

• 見出し構造が整理される： ページと関係ない「カートにアイテムが追加されました」が、全ページで見出しとして扱われなくなります。
• 読み上げソフトで迷いにくくなる： 見出しで移動する使い方をする方にとって、非表示の見出しが混ざらなくなります。
• SEOチェックの指摘が減る： 毎回出る指摘を消せるので、本当に直すべき指摘が見つけやすくなります。

なお、ポップアップ自体には aria-label="カートにアイテムが追加されました" が付いています。
pタグに変えても、読み上げソフトにはポップアップの内容がきちんと伝わります。

自分のストアのShopify hタグを確認する方法

まずは、ご自身のストアにこのh2が入っているかを確認しましょう。
画面には表示されていないので、ページのHTML（ソース）を見て確認します。

1. ストアのトップページなど、どのページでもよいのでブラウザで開きます。
2. 右クリックして「ページのソースを表示」を選びます（Ctrl + U、Macは Cmd + Option + U）。
3. Ctrl + F（Macは Cmd + F）で cart-notification__heading と検索します。

次のように <h2 で始まっていれば、この記事の対象です。

<h2 class="cart-notification__heading caption-large text-body">
  <svg class="icon icon-checkmark" ...>...</svg>
  カートにアイテムが追加されました
</h2>

Shopify hタグの修正手順【カートのh2をpタグに変える5ステップ】

作業は、テーマのコードを1行書き換えるだけです。
ただし、いきなり公開中のテーマを触らず、複製したテーマで試してから本番に反映するのがおすすめです。

ステップ1：テーマを複製してバックアップを取る

Shopify管理画面で「オンラインストア」→「テーマ」を開きます。
公開中のテーマの「…」→「複製」を選ぶと、検証用のテーマができます。万一のときのバックアップにもなります。

ステップ2：コードエディタで該当ファイルを探す

複製したテーマの「…」→「コードを編集」を開きます。
左側の検索（虫眼鏡のアイコン）に cart-notification__heading と入力します。

いくつかファイルが出てきますが、変更するのは拡張子が .liquid のファイルです。
今回対応したストアでは snippets/cart-notification.liquid でした。テーマのバージョンによっては sections/header.liquid に書かれていることもあります。

同じ検索で component-cart-notification.css もヒットしますが、これは見た目を指定するCSSファイルなので変更しません。

ステップ3：h2をpに書き換える

ファイルを開くと、次のような行があります。

変更前

<h2 class="cart-notification__heading caption-large text-body">{%- render 'icon-checkmark' -%} {{ 'general.cart.item_added' | t }}</h2>

変更後

<p class="cart-notification__heading caption-large text-body">{%- render 'icon-checkmark' -%} {{ 'general.cart.item_added' | t }}</p>

変えるのは次の2か所だけです。class属性や {% %} {{ }} の部分はそのまま残してください。

• 先頭の <h2 を <p にする
• 末尾の </h2> を </p> にする

書き換えたら、右上の「保存」を押します。

ステップ4：プレビューで見た目を確認する

複製したテーマをプレビューし、商品をカートに追加してポップアップを表示させます。
見出しの文字の大きさや太さ、チェックマークの位置が変わっていないかを確認してください。

あわせて、ページのソースで cart-notification__heading を検索し、<p に変わっていることも確認しましょう。

ステップ5：本番テーマに反映する

公開中のテーマでも「コードを編集」から同じファイルを開き、ステップ3と同じ変更をします。
検証用テーマで変更した行をコピーして、本番の同じ行と置き換えても大丈夫です。

検証用テーマをそのまま「公開」する方法もあります。
ただし、複製したあとに本番側で別の変更をしていた場合、その変更は消えてしまうので注意してください。

見た目が崩れたときの対処法

Dawnテーマのカート通知は、見た目をclass名（cart-notification__heading、caption-large など）で指定しています。
そのため、h2をpに変えても、ほとんどの場合は見た目が変わりません。 今回対応したストアでも、CSSの追加は不要でした。

ただし、テーマをカスタマイズしていて、h2 というタグ名で見た目を指定している場合は、文字の大きさや太さが変わることがあります。
そのときは、テーマのCSSファイル（assets/base.css など）の最後に、次のような指定を追加して調整します。

.cart-notification__heading {
  font-weight: bold;
  font-size: 1.5rem;
}

数値は、変更前の見た目と見比べながら調整してください。

応用：アプリが出力するShopify hタグも同じ考え方で直せる

カート通知のほかにも、絞り込みフィルターなどのアプリが、項目名を見出しタグ（h3やh4など）で出力していることがあります。
たとえば、「素材で選ぶ」「価格で絞り込み」といった項目名が、すべてh4になっているケースです。

この場合も考え方は同じで、アプリがテーマ内に追加したファイル（snippets フォルダなど）で見出しタグを探し、pタグに変えます。

アプリの場合はCSSの調整が必要なことも

カート通知と違って、アプリの場合は注意点が1つあります。
アプリのCSSが h4 のようなタグ名で見た目を指定していると、pに変えた途端に太字やアイコンが消えてしまうのです。

そのため、次のようにclassを付けてから、CSSもそのclassに合わせて追加します。

変更前

<h4 tabindex="0">{{ 見出しの文字 }}</h4>

変更後

<p class="filter-heading" tabindex="0">{{ 見出しの文字 }}</p>

CSSに追加（元のh4と同じ見た目になるように調整）

.filter-group .filter-heading {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}

同じ見出しが何か所も書かれていることがある

アプリのファイルでは、同じ見出しがページの種類ごと（条件分岐ごと）に何か所も書かれていることがあります。
1か所だけ直して「変わらない」となるのは、たいていこれが原因です。

ファイル内で <h4 を検索して、表示されるページに関係する箇所を漏れなく変更してください。

作業前に知っておきたい注意点

Shopify hタグの修正作業自体は簡単ですが、次の3点は押さえておきましょう。

特に3つ目は見落としがちです。
検証用と本番のテーマを行き来していると、どちらを編集しているのかわからなくなることがあるので注意してください。

まとめ

Shopify hタグの問題でよくあるのが、Dawnテーマのカート通知です。見出し「カートにアイテムが追加されました」がh2で書かれているため、全ページのHTMLにh2が入ってしまいます。

これは、cart-notification.liquid（または header.liquid）の該当行で、<h2> を <p> に変えるだけで解消できます。 classで見た目を指定しているため、多くの場合はCSSの追加も不要です。

見出しチェックでShopify hタグの指摘が毎回出ている方は、まずはテーマを複製して試してみてください。

「自分で触るのは不安」「ほかにもSEOで気になるところがある」という場合は、弊社までお気軽にご相談ください。

参考情報

• テーマを複製する｜Shopify ヘルプセンター
• テーマコードを編集する｜Shopify ヘルプセンター
• Shopify/dawn（Dawnテーマのソースコード）｜GitHub