メインコンテンツにスキップ
ページのメタ情報

Studioを利用してページのメタ情報(タイトル、説明文、ファビコン、OGP画像)を設定する方法を詳しく解説します。正しい設定を行うことで、検索結果やSNSでの表示を改善し、より多くの訪問者を引き寄せましょう。

Saika avatar
対応者:Saika
2か月以上前に更新

ページのメタ情報設定

ページのタイトルやOGP画像などのメタ情報は、検索エンジンやSNSで最初に表示される重要な情報です。

スクリーンショット:メタ情報を設定するパネルの様子。

サイト設定とページ設定の違い

Studioでは、これらの編集をエディタの「サイト設定」と「ページ設定」で行うことができます。

サイト設定とページ設定の違いは次の通りです:

  • サイト設定:サイト全体に適用される

  • ページ設定:個別のページにのみ適用される

両方が設定されている場合、ページ設定が優先されます。ページ設定が空欄の場合はサイト設定が適用されますので、効率的な管理のためにはまずサイト設定を完成させることをお勧めします。

設定方法

サイト設定またはページ設定を編集し、サイトを公開または更新すると設定が反映されます。

サイト設定パネル:

ページパネル内上部のアイコンをクリックすると、サイト全体の設定が行えるパネルが表示されます。

スクリーンショット:ページ設定を編集するパネルの様子。

ページ設定パネル:

ページパネルで特定のページを選択し、アイコンをクリックすると、個別のページ設定パネルが表示されます。

動的ページでの設定方法:

動的ページ(CMS記事などを表示するページ)のページ設定では、記事ごとに異なるメタ情報を設定できます。

ページタイトルや説明文の欄をクリックすると「+」ボタンが表示されます。ここをクリックすると、該当する記事に連動するCMSプロパティが表示されます。

ページ設定パネルで、タイトルや説明文の欄をクリックし、「+」ボタンを表示させます。

スクリーンショット:動的ページのタイトルでプロパティを設定する様子。

「+」ボタンをクリックし、記事に連動するCMSプロパティを選択します。直接テキストを入力すると、該当するモデル内の全アイテムに対し、入力したテキストが固定表示できます。

スクリーンショット:動的ページのタイトルを設定する様子。

OGP画像を記事ごとに変更したい場合は、カバー画像にカーソルを乗せて表示される画像プロパティを選択します。

※画像を直接アップロードすると、モデル内の全アイテム共通の画像となります。

スクリーンショット:動的ページのカバー画像(OGP画像)でプロパティを設定する様子。

設定項目

設定パネルでは、以下の情報を設定できます。

タイトル

ブラウザのタブ、検索結果、SNSシェア時のOGPに表示される重要な要素です。内容を端的に表した言葉や、固有名称がおすすめです。

説明文

検索結果やSNSで表示されるサイトの概要です。内容を簡潔にまとめ、ユーザーの目に止まりやすいワードを盛り込むと良いでしょう。

※ ページごとに適切なメタディスクリプションを記述していない場合、検索エンジンの判断で、本文の一部を抜粋した内容が概要文として表示されることがあります

ファビコン(Favicon)

サイトのアイコンとしてブラウザのタブまたはブックマークリストに表示されます。

カバー画像(OGP画像)

SNSなどでシェアされた際に表示される画像です。

meta title meta description favicon social cover ogp

ディスクリプション

こちらの回答で解決しましたか?