Studioのメタタイトル設定方法｜固定ページとCMS記事の手順

同じ形の缶に入った二つの商品を例に、商品別のタイトルを設定します。AI生成のイメージ写真です。

Studioで一枚のページのメタタイトルを変えるには、デザインエディタで対象ページを開き、右パネルの「ページ」でページタイトルを編集してサイトを更新します。CMS記事のタブがどれも同じなら、動的ページのタイトル欄に記事名のプロパティを差し込んでください。固定ページ一枚と、同じひな形から作る二つの商品ページを例に、設定から検収まで説明します。

ページ名を変えたのにブラウザのタブが変わらないとき

Studioで「会社案内」を「法人向けの茶葉卸」に直したはずなのに、公開ページのタブには「会社案内」が残っている。こんなときは、まず変更した欄の名前を見ます。左側のページ一覧で変えた「ページ名」は編集者用の整理名です。訪問者に見せる文字を変えるには、対象ページを開いて右側の「ページタイトル」を編集します。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

出典：ページパネル | Studio Help

よく「メタタイトル」と呼ばれますが、公開ページで確認する対象はHTMLのtitle要素です。説明文は別の欄で、HTMLではmeta要素のdescriptionに対応します。画面の大きな見出しを書き換えた場合も、公開ページのタイトルに意図した文字が入ったかを別に確認してください。見出しはページを開いた人、タブのタイトルは複数のページを開いている人も使います。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

出典：Google 検索結果のタイトルリンクの変更 | Google 検索セントラル  |  Documentation  |  Google for Developers

最初に一枚だけ作業メモを用意します。変更する公開URL、いまタブに出ている文字、出したい文字を書きます。「検索で会社名が違う」だけでは、変えたいものが発信元のサイト名なのか、個々のページへ入る青い見出しなのかを判断できません。検索結果なら該当箇所とリンク先のURL、ブラウザならタブとアドレスを対にして控えましょう。

たとえば製品一覧と茶葉卸の案内を別々のタブに開きます。どちらのタブにも「会社案内」と出ると、別の作業から戻ったとき、どちらが卸の案内か分かりません。作業の目標を「茶葉卸のタブを選び直せる」にすると、何のために直すのかが社内でも共有できます。本文のコピーや会社の正式名称を変える判断は、この時点で混ぜなくて済みます。

固定ページとサイト共通のタイトルを設定する

Studioのデザインエディタで左のページパネルを開き、対象URLに対応するページを選びます。要素を何も選択していない状態にして右パネルを開くと、サイト全体の設定とページの設定を切り替えられます。テキストやボックスの見た目を調整する項目が並んでいる場合は、要素の選択を外してから確認してください。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

出典：ページパネル | Studio Help

会社案内や法人向け卸の案内など、一つのページだけを直したい場合は「ページ」タブの「ページタイトル」に入力します。全体の共通値を置く場所は「サイト」タブの「サイトタイトル」です。Studioでは個別設定が優先され、ページ側を未入力にした項目にはサイト側の設定が使われます。別のページにも変更を広げたいかどうかで、触る場所が変わります。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

例として、茶店のサイトタイトルを「野辺茶房」とし、卸の案内だけを「業務用茶葉の卸販売｜野辺茶房」にします。野辺茶房は以下で使う架空の店名です。サイトタイトル欄に「業務用茶葉の卸販売」と入れると、その共通値を使っている別の案内ページにもその言葉が出るおそれがあります。一件の依頼なら先に個別設定を選ぶ理由です。

反対に、旧店名を新店名に統一する仕事では、共通欄だけを直して完了にするのも早計です。個別のページタイトルに旧名を直接書いた箇所や、動的ページの固定文字として旧名を足した箇所は別に点検します。対象が多いときは、共通値に任せたページ、個別に入力したページ、CMSから組み立てるページを一つずつ代表に選ぶと、どこまで直ったかを確認できます。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

設定が終わったら、公開済みサイトでは更新を実行します。公開前の内容を確認する担当と、実際にサイトを更新する担当が別なら、依頼文に「入力まで」「公開まで」のどちらを頼むか明記してください。他の人の作業が同時進行している場合は、更新に含める範囲を担当者間で確認してから進めます。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

CMS記事ごとにタイトルを切り替える

お知らせや商品紹介をCMSで管理している場合、表示のひな形である動的ページと、そこへ流し込む個々のアイテムが分かれています。煎茶の記事を開いているつもりでも、編集しているのは全商品の共通ひな形かもしれません。まず対象が、手作業で作った固定ページか、ほかの記事と同じレイアウトで表示するCMSの動的ページかを確かめます。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

同じひな形を使うすべてのページで、ページタイトルに「商品紹介」と文字だけを入れると、個々の商品を区別できません。動的ページの「ページ」タブを開き、ページタイトル欄をクリックします。入力欄に現れる「＋」から、その記事に紐づくCMSプロパティを選びます。プロパティとは、商品名や短い紹介文など、アイテムごとに値を持つ項目です。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

茶店の例では、CMSの「商品名」に「深蒸し煎茶」と「焙じ茶」をそれぞれ入力し、ひな形のタイトル欄には商品名のプロパティを入れます。その後ろに固定の文字「｜野辺茶房」を一度だけ書きます。設定が意図どおりなら、別の商品のページで先頭の商品名が入れ替わり、末尾の店名は共通で残ります。

紙の作業メモに「［商品名］｜野辺茶房」と書いて担当者に渡すのは便利ですが、角括弧つきの文字をそのまま欄に打つだけでは商品の値を参照しません。必ず「＋」から実際のプロパティを選びます。モデルによって項目名は異なります。例にある名称を探すより、二つのアイテムを開いて別々の正しい商品名が入っている項目を見つけてください。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

ページ上の見出しに使う商品名が長い場合、別に「検索用タイトル」という文字列の項目を設ける運用も考えられます。ただし、使い分ける欄が増えると新しい商品を追加するたびに入力が必要です。更新担当者が一人で、通常の商品名で十分に区別できるなら、既に入力している項目を使うほうが管理しやすいでしょう。

説明文にも同じ仕組みを使えます。商品名をもう一度差し込むより、「どんな用途の人が、ページで何を確認できるか」を短い紹介文に持たせると、各ページの役割が伝わります。なおStudioの公式ヘルプでは、Data Connect APIで作った動的ページは取得したプロパティをタイトル・説明文に指定できず、共通の設定を使うと案内しています。データの出どころを確認してから作業を見積もります。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

茶店の商品紹介を例に、二つの公開URLを確認する

ここからは公開後の検収を練習します。架空の茶店に、固定ページ「法人向け卸」と、CMSの商品紹介「深蒸し煎茶」「焙じ茶」がある例です。担当者が用意するのは画面の写真だけではありません。対象ページのURLと、そのURLで期待するタイトルを一行ずつ対応させます。パスは例なので、自社の確認表では実際に開ける公開URLへ置き換えてください。

更新後は、編集画面のプレビューを閉じ、確認表のURLから公開ページを開きます。パソコンのブラウザなら、同じ種類の商品を別々のタブで開くと差が見えます。タブ幅が狭くて末尾まで読めない場合は、公開ページの開発者ツールでhead内のtitle要素を開き、文字列全体を確認します。Chromeでは、公開ページを右クリックして「検証」を選び、「要素」パネルの検索で「title」を探す方法があります。headの中のtitleを読めれば十分です。HTMLを書き換える必要はありません。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

商品名は切り替わったものの、どちらのタイトルも末尾が「野辺茶房｜野辺茶房」になる場合があります。CMSの値に店名まで入れ、ひな形でも同じ店名を足していないかを見てください。どちらから消すかは他の表示先で決めます。商品名の項目を本文の見出しや商品一覧にも使っていれば、そちらに影響するためです。

煎茶は正しいのに焙じ茶だけ店名しか出ない場合、二件に共通する設定をすぐに変更せず、焙じ茶側のアイテムを開きます。参照先の欄に値があるか、予定の文字列か、公開されている内容と対応しているかを照合します。違いが一件に限られる間はその一件で直せるかを先に調べると、正しい側を巻き込まずに済みます。

説明文も確認する場合は、公開ページのheadにあるmetaのうち、nameがdescriptionのもののcontentを読みます。画面上の商品説明を目で読むだけでは、その文がメタディスクリプションにも設定されたかは分かりません。意図した説明が入っていれば設定出力の確認は完了です。検索結果でどの部分が実際に抜粋されるかは次の段階で見ます。

出典：スニペットの管理・メタ ディスクリプションについて | Google 検索セントラル  |  Documentation  |  Google for Developers

公開ページとGoogleの検索結果が違うとき

ブラウザの公開タブが古いままなら、Googleに働きかける前に直せる箇所があります。開いたURLが本番の対象か、変更したのがページタイトルかページ名か、サイトを更新したか、動的ページならアイテムの値が入っているかを調べます。制作会社に見てもらう場合も、最初の証拠は検索画面より公開URLの出力です。

出典：タイトルと説明文（ディスクリプション）を設定する | Studio Help

公開ページのtitleは新しく、Googleで表示されるクリック可能な見出しだけが古い場合は、検索側の確認に移ります。Googleはページのtitle要素を含む複数の情報からタイトルリンクを作ります。ページに大きく表示された見出しなども材料です。タブと検索結果の表記が違うという一点だけで、Studioの更新失敗と結論づけることはできません。

出典：Google 検索結果のタイトルリンクの変更 | Google 検索セントラル  |  Documentation  |  Google for Developers

Search Consoleを利用できる担当者は、対象の公開URLをURL検査に入力し、登録情報の最終クロール日時と自社の公開更新日時を比べます。Googleが前回そのページを取得したのが変更前なら、その記録は変更後の内容を確かめる材料にはなりません。未クロールなどで日時が表示されないときは「未確認」と記録し、先に登録状況を確かめます。公開URLのテストでは現在のページを取得できるかを確認できますが、そのテストと登録済みのデータは別です。

出典：URL 検査ツール – Search Console ヘルプ

すでに変更後のクロールが記録されていても、Googleが設定文をそのまま採用する保証はありません。たとえばタブには「法人向け茶葉」とあり、一番大きく出ている見出しが「個人向けギフト」のままなら、どちらの読者に向けたページなのかを確認します。文字を機械的にそろえるより、ページ全体が実際のサービスを正しく説明していることが先です。

出典：Google 検索結果のタイトルリンクの変更 | Google 検索セントラル  |  Documentation  |  Google for Developers

説明文の表示も同様に記録します。Googleのスニペットは主にページ本文から生成され、メタディスクリプションが使われる場合もあります。検索する語によって抜粋が変わるため、調べた語と日付を添えてください。同じURLで説明が二通り見えた場合でも、CMSの説明文欄を二度直す理由にはなりません。

出典：スニペットの管理・メタ ディスクリプションについて | Google 検索セントラル  |  Documentation  |  Google for Developers

制作会社に渡す修正依頼と検収の記入例

発注側が渡す情報は、「何を設定してほしいか」と「何を見れば納品を確認できるか」です。たとえば次のように頼めます。「法人向け卸は固定ページで個別に入力してください。商品紹介はCMSの商品名と共通の店名から作ります。煎茶と焙じ茶の公開URLを添えて、それぞれのタブに別の商品名が出るところまで確認してください」。これなら担当者は、ひな形とアイテムのどちらを点検するのか迷いません。

返答が「SEO設定済み」の一言だった場合は、何を直したかを三つに分けて聞きます。サイトの共通欄を触ったか、個別ページを触ったか、CMSプロパティの割り当てを触ったかです。次に別の商品でタイトルが欠けたとき、前回の作業箇所に戻れる程度の記録があれば十分です。ログイン情報を作業メモに書く必要はありません。

検収後に新しい商品を追加する人には、入力する欄、公開前に見る箇所、公開後に開くURLを残します。たとえば「新商品を登録したら、商品名と紹介文を確認。公開後は既存商品一件と並べてタイトルを読む」と一行添えます。運用を引き継いだ担当者も、自分で直せる入力漏れと、制作会社へ相談するひな形の修正を判断しやすくなります。

検索からの訪問も後日評価するなら、対象URL、公開日、変更の目的を控えます。ページを修正した日と、検索で新しい文字列を初めて確認した日にはずれが出ます。クリックが少ない段階で前後の数字だけを比べず、同じ期間の長さ・検索語・ページ・掲載位置をそろえて眺めます。社内の公開確認に使ったアクセスは、相談につながった訪問の集計から分けてください。

よくあるご質問