はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

カテゴリー別記事一覧で「概要文(meta description)」を設定できるようにしました(はてなブログPro)

はてなブログでは、カテゴリー別記事一覧において「カテゴリーの概要文(meta description)」を設定できる機能を、有料プラン「はてなブログPro」利用者向けにリリースしました。「カテゴリーの概要文」は、Googleなどで検索された際の要約や、Facebookなどソーシャルメディアでシェアされる際のプレビューとして表示されます。検索結果やシェアを見る人がエントリーに興味を持ってくれるよう、エントリーの内容を的確に説明した概要を指定することができます。

「カテゴリーの概要文」の設定方法

ダッシュボードの詳細設定で「カテゴリー別記事一覧ページにタイトル(カテゴリー名)を表示する」をチェックし、最後に変更するボタンを押します。

詳細設定
詳細設定

ダッシュボードのカテゴリー画面を開き、カテゴリー名の右側にある「編集」ボタンをクリックすると、カテゴリー別記事一覧の「編集」ウィンドウが開きます。

カテゴリー設定
カテゴリー設定

編集ウィンドウでは「カテゴリーの概要文」のほか、それぞれ次のようなカスタマイズができます。

設定項目 内容
カテゴリー名 カテゴリー名を変更することができます
見出し 指定した文字列が、そのカテゴリーの記事一覧でパンくずリストの下に表示される見出し(h2要素)と、ページタイトル(title要素)になります。デフォルトでは、カテゴリー名がそのまま表示されます。
説明文 見出し(h2要素)の下に、指定した説明文を表示できます。説明文には、HTMLタグを使用できます。カテゴリー別記事一覧が2ページ以上になる場合、説明文は1ページ目のみに表示されます(タイトルは2ページ目以降も表示されます)。
概要文(meta description) カテゴリー別記事一覧のHTMLヘッダーで後述するメタデータに反映され、Googleなどで検索された際の要約や、Facebookなどソーシャルメディアでシェアされる際のプレビューとして表示されます。

「カテゴリーの概要文」が反映されるメタデータ

「カテゴリーの概要文」に記述した文章は、カテゴリー別記事一覧のHTMLヘッダーで、以下のメタデータに反映されます。

メタデータ 内容
<meta name="description"> HTMLで規定されるWebページの説明文。 検索エンジンの検索結果の要約(スニペット)として利用されます。
<meta property="og:description"> The Open Graph protocolで規定されるWebページの説明文。Facebookなどのソーシャルメディアでシェアされる際に利用されます。
<meta name="twitter:description"> Twitterでシェアされる際にWebページの説明文として利用されます。

「カテゴリーの概要文」の指定が無い場合

  1. ダッシュボードの基本設定で指定した「ブログの説明」が上記のメタデータに反映されます。
  2. 但し、詳細設定で「ブログの概要(meta description)」が指定されている場合、<meta name="description">には「ブログの概要(meta description)」が反映されます。