検索エンジンから価格を隠す

読了時間： 12 分。 対象： ログインしていない訪問者に対して、取引価格をストアフロントで視覚的に隠すだけでなく、Googleや他の検索エンジンからも遠ざける必要のある Professional プラン以上のマーチャント。 プラン： 検索エンジンにも安全な非表示は Professional以上 の機能です。視覚的な価格の非表示（下記）は Starter から利用できます。

価格を視覚的に隠すこと、つまり「見積を依頼する」ボタンに置き換えることは、バイヤーが見るものを制御します。検索エンジンが読むものは制御しません。本当の数字が今もページのHTMLのソースにあるからです。検索エンジンにも安全な非表示は、その隙間を塞ぎます。ログインしていない訪問者（そしてGooglebot）が受け取るHTMLから価格を遠ざけるため、クローラーがインデックスするものが存在しません。このガイドでは、どのShopifyのテーマでも使える手順を説明し、そのうえでQuotWayの組み込みの漏れ確認で検証する方法をお伝えします。

視覚的な非表示と、検索エンジンにも安全な非表示

この二つは別のものです。通常は両方が必要になります。

	視覚的な非表示（Starter以上）	検索エンジンにも安全な非表示（Professional以上）
何をするか	ページ上の価格を「見積を依頼する」ボタンや文言に置き換えます	ログインしていない訪問者へ配信されるHTMLのソースから価格を取り除きます
どうやって	ページの読み込みの後の、CSSとJavaScript	サーバー側のLiquidの制御（`{% if customer %}`）- ゲストには価格が一度も描画されません
バイヤーから隠れるか	はい	はい
Googleから隠れるか	いいえ - 価格はページのソース、`og:price`、JSON-LDに残ります	はい - ページのソース、メタタグ、構造化データについて隠れます
設定	QuotWayの管理画面の切り替え	一度きりのテーマの編集（このガイド）と、QuotWayのPrice Gateブロック

テーマの編集が必要な理由。 アプリはテーマにマークアップを追加できますが、テーマ自身の価格の要素、メタタグ、構造化データを取り除くことはできません。それらを制御しているのはテーマだけなので、価格をソースから遠ざけることは、短い一度きりのテーマの編集になります。QuotWayがそれを案内し、その後に検証します。

「検索エンジンにも安全」が扱う範囲と、扱えないもの

ログインしていない訪問者に対して、検索エンジンが抜粋に表示するもののすべてから価格を取り除きます。

ページのHTMLの中の表示される価格、
og:price / product:price のメタタグ（リンクのプレビューや一部の抜粋で使われます）、
商品のJSON-LD（<script type="application/ld+json">）と、itemprop="price" のマイクロデータです。

Shopifyが管理する二つの面は取り除けません。 どのテーマもアプリもできません。

/products.json - Shopifyは your-store.com/products/<handle>.json で、価格を含む商品の公開のJSONのフィードを公開します。これを隠せるのは ShopifyのBtoBカタログか、商品の非公開だけです。
ストアフロントの分析 - Shopify自身の分析は、テーマにかかわらず価格を把握します。

これらは既知の残余です。Googleが検索結果に表示するものではないため、価格を検索の抜粋から遠ざけるという目的には、以下の手順で足ります。

価格を隠すために noindex を使わないでください。 noindex は商品ページ全体を検索から取り除きます。価格だけでなく、ページを失います。代わりに以下の制御をお使いください。

始める前に

Professional プラン以上であること（または有料プランの14日間のトライアル中であること）。
QuotWayがインストールされ、アプリ埋め込みが有効であること。アプリ埋め込みと有効化をご覧ください。
狙ったバイヤーに対して視覚的な非表示がすでに有効であること。価格を隠して「見積を依頼する」ボタンを出すをご覧ください。このガイドは、その上に検索エンジンの層を重ねます。
テーマの複製で作業してください。 Shopifyの管理画面 → オンラインストア → テーマ → ⋯ → 複製で複製を編集し、検証してから公開します。テーマを編集するときの標準的な進め方です。
テーマのコードの編集（オンラインストア → テーマ → ⋯ → コードを編集）に基本的に慣れていること。編集は小さなものです。最も難しいのは適切なファイルを見つけることであり、このガイドがそれを助けます。

考え方を一行で

価格が現れる三つの場所、つまり表示される価格、メタタグ、構造化データを {% if customer %} … {% endif %} で包み、サインインした顧客にのみ描画されるようにします。そして、それ以外の全員にはQuotWayの Price Gateブロックが「価格を見るにはサインインしてください」というメッセージを表示します。ログインしていない訪問者（やクローラー）がページを読み込むと、ソースに価格がまったく存在しません。

手順1 - QuotWayのPrice Gateブロックを追加する

Price Gateブロックは、ログインしていない訪問者と検索エンジンに、価格ではなく**「価格を見るにはサインインしてください」**というメッセージ（文言は変更できます）を表示します。価格のあった場所でゲストが見るものです。

QuotWayで見積ボタン → 価格へ行き、検索エンジンから価格を隠すの下で価格の制御のブロックを追加を選びます。ブロックを配置できる状態でテーマエディターが開きます。*（手動でも追加できます。オンラインストア → テーマ → カスタマイズ → 商品のテンプレート → ブロックを追加 → アプリ → QuotWay Price Gate。）*
商品ページで価格のある場所へブロックを移動します。
ブロックの設定を開きます。
- ログインしていない人へのメッセージ - ゲストとクローラーが見る文言です（既定は*「価格を見るにはサインインしてください」*）。「取引価格は見積をご依頼ください」など、自由に変更できます。
- サインインした顧客に価格を表示する - 手順2のスタイルAでテーマ自身の価格を {% if customer %} で包む場合は、無効のままにしてください。テーマの価格のブロックを完全に隠し、サインインした顧客への価格の表示をこのブロックに任せる場合（手順2のスタイルB）にのみ、有効にします。
- 必要な顧客タグ（任意） - 価格の表示を、特定のタグ（たとえば wholesale）を持つサインイン済みの顧客に限定します。
テーマを保存します。

手順2 - ゲストに対してテーマの価格を隠す

いずれか一つを選んでください。スタイルAを推奨します。サインインした顧客に対して、テーマの通常のバリエーションに応じた価格をそのまま保てるからです。

スタイルA - テーマの価格を `{% if customer %}` で包む（推奨）

オンラインストア → テーマ → ⋯ → コードを編集。
商品のテンプレートが価格を描画している場所を探します。Online Store 2.0のテーマの多く（Dawn、Horizonなど）では、これは価格のスニペットです。snippets/price.liquid か、sections/main-product.liquid の中の price のブロックを探してください（テーマを | money で検索します）。
サインインした顧客にのみ届くよう、価格の出力を包みます。
```
{% if customer %}
  {{ product.selected_or_first_available_variant.price | money }}
{% endif %}
```
（テーマの既存のマークアップに合わせてください。価格を描画しているものの周りに {% if customer %} と {% endif %} を加えるだけです。）
Price Gateブロックの**「サインインした顧客に価格を表示する」は無効のまま**にします（サインイン時の価格はテーマが扱うようになりました）。
保存します。

スタイルB - コードなしで隠し、価格の表示をブロックに任せる

カスタマイズ → 商品で、テーマの標準の価格のブロックを隠します（または表示しない設定にします）。
QuotWayのPrice Gateブロックで、「サインインした顧客に価格を表示する」を有効にします。このブロックが、サインインした顧客には選択中または最初のバリエーションの価格を、それ以外の全員には制御のメッセージを表示します。
保存します。（スタイルBは、完全にバリエーションに追随する価格ではなく、最初または選択中のバリエーションの価格を表示します。ほとんどのカタログでは問題ありません。顧客が選択肢を切り替えるたびにバリエーションごとに価格を更新したい場合はスタイルAをお使いください。）

手順3 - メタタグと構造化データから価格を取り除く

検索の抜粋から実際に価格を取り除くのは、この手順です。手順2の後、表示される価格はなくなっていますが、テーマはクローラーが読む二つの機械可読な場所にも価格を出力しています。

3a - Open Graphと価格のメタタグ

コードを編集で、テーマのメタタグのスニペットを開きます。通常は snippets/meta-tags.liquid です（テーマによっては layout/theme.liquid の <head> に置いています）。テーマを og:price または product:price で検索してください。

価格のメタタグを {% if customer %} で包みます。

{% if customer %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ cart.currency.iso_code }}">
{% endif %}

3b - 商品の構造化データ（JSON-LD）

テーマが商品のJSON-LDを出力している場所を探します。多くは snippets/structured-data.liquid か、sections/main-product.liquid の中の {% render 'structured-data' %} または直接記述された <script type="application/ld+json"> です。テーマを application/ld+json と "@type": "Product" で検索してください。
価格を運ぶ offer を {% if customer %} の後ろに置きます。JSONは有効なまま保つ必要がある（余分なカンマを残さない）ため、最もきれいな方法は、サインインした顧客に対してのみ offers のブロックを含めることです。
```
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }}{% if customer %},
  "offers": {
    "@type": "Offer",
    "price": "{{ product.price | money_without_currency | strip_html }}",
    "priceCurrency": "{{ cart.currency.iso_code }}",
    "availability": "https://schema.org/InStock"
  }{% endif %}
}
```
テーマが別の方法でJSON-LDを組み立てている場合も、規則は同じです。price や offers がゲストに対して描画されてはなりません。 ゲストとしての出力をGoogleのリッチリザルトテストで検証してください。ログアウトした状態で、商品が価格なしで表示されるはずです。

3c - マイクロデータ（古いテーマ）

テーマが直接記述のマイクロデータを使っている場合は、itemprop="price" の要素も {% if customer %} で包んでください。

{% if customer %}
  <span itemprop="price" content="{{ product.price | money_without_currency }}">{{ product.price | money }}</span>
{% endif %}

編集のたびにテーマを保存してください。

手順4 - 漏れ確認を実行する

QuotWayは、ページをログインしていない訪問者として、つまりGoogleが見るとおりに取得し、ソースに残っている価格を報告することで、作業を確認します。

QuotWayで見積ボタン → 価格 → 検索エンジンの漏れ確認へ行きます。
確認する商品のハンドルを入力（または確認）し、確認を実行を選びます。

結果を読みます。確認は五つのことを調べます。

確認項目	深刻度	対処
`og:price` のメタタグ	重大	手順3a
商品のJSON-LDの価格	重大	手順3b
`itemprop="price"` のマイクロデータ	重大	手順3c
表示される価格の文字	重大	手順2
公開の `/products.json`	情報	Shopifyが管理する残余（下記）- テーマでは対処できません

重大として指摘された漏れを直し、情報の /products.json の行だけが残るまで確認を再実行してください。それが「検索エンジンにも安全」な状態です。

ストアフロントがパスワードで保護されていると確認に表示される場合、ゲストとしてページを読めません。ストアフロントのパスワードを解除する（または公開中のテーマを確認する）うえで、もう一度実行してください。

この後に残るもの（そしてそれで問題ない理由）

/products.json は今も価格を公開します。テーマやアプリの編集では取り除けません。取り除けるのは ShopifyのBtoBカタログ（会社ごとに価格を付けます）か、商品の非公開だけです。これは生のデータのフィードであり、Googleが検索結果に表示するものではないため、検索の抜粋には影響しません。
Shopifyのストアフロントの分析も今も価格を記録します。これはShopifyの内部のものであり、公開されることはありません。

ほとんどのマーチャントにとって、価格をページのソース、メタタグ、構造化データから遠ざけること（手順1から3、手順4で検証）が、「取引価格をGoogleから遠ざける」という言葉の意味そのものです。

自分で確認する

ゲストとしてソースを表示する。 プライベート（シークレット）のウィンドウで商品ページを開き、右クリックしてページのソースを表示し、価格の数字を検索（⌘/Ctrl-F）してください。上記の手順の後は、現れないはずです。
Google Search Console。 URL検査 → 公開URLをテスト → クロール済みページを表示で、Googlebotが何を描画するかを確認してください。価格のないページを再クロールしてもらうよう、インデックス登録を再度リクエストします。
テーマやテーマの版を変えたときは、漏れ確認を再実行してください。テーマの更新で価格の要素が戻ることがあります。

落とし穴

テーマの更新で価格が戻った。 テーマの更新はスニペットを置き換えるため、{% if customer %} の編集が取り消されることがあります。テーマを変更した後は漏れ確認を再実行し、必要なら手順2と3をやり直してください。
自分にはまだ価格が見える。 顧客としてサインインしている場合、価格が見えます。それが正しい動作です。ゲストとクローラーに何が見えるかは、ログアウトした状態（シークレット）で確認してください。
編集の後にJSON-LDが不正になる。 カンマが一つ余分なだけでブロック全体が壊れます。ゲストとしての出力をリッチリザルトテストに貼り付けて検証し、余分なカンマを避けるために3bで示した offers の単位での制御をお使いください。
ページに価格が二つ表示される。 サインインした顧客にテーマの価格とブロックの価格の両方が表示されている場合、スタイルAとスタイルBの両方を行っています。「サインインした顧客に価格を表示する」を無効にする（スタイルA）か、テーマの価格のブロックを隠す（スタイルB）かの、どちらか一方にしてください。
独自のテーマやヘッドレスの構成。 規則は同じです。価格、og:price、JSON-LDを、自分の構成が描画している場所でゲストに対して制御してください。漏れ確認は、どのShopifyのストアフロントのURLでも機能します。

価格を隠して「見積を依頼する」ボタンを出す - この上に築かれる、視覚的な非表示と「見積を依頼する」ボタンです。
見積ボタンの配置 - ボタンがストアフロントのどこに表示されるかです。
プラン、トライアル、料金 - どのプランで検索エンジンにも安全な非表示が使えるようになるかです。

解決しませんか？サポートチームがお手伝いします。

サポートに問い合わせる Shopifyに無料でインストール