はてなブログ開発ブログ

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

ソーシャルシェアなどでタイトルを使い分けできる「高度なタイトル設定」をリリースしました

はてなブログでは、ソーシャルシェアなどを意識して記事のタイトルを指定できる「高度なタイトル設定」機能をリリースしました。ブログ記事を配信するHTML文書のメタデータとして、複数のタイトルを使い分けることができます。

はてなブログで記事ページ(1つの記事だけのパーマネントリンク)を表示すると、記事編集画面の「タイトル」欄に入力した記事タイトルが、さまざまなタイトルのデータとして利用されます。今回の機能追加により、このうちHTMLのヘッダ部に記述されるtitle要素とog:titleを個別に設定できるようになりました。

なお、記事のタイトル見出し(h1要素)や記事一覧などでは、従来通りの記事タイトルが表示されます。

※高度なタイトル設定は、HTML文書のメタデータに関して知識のあるユーザー向けの機能です。ソーシャルシェアや検索結果、リンク先などでの表示に影響するのでご注意ください。

「高度なタイトル設定」でタイトルを使い分けるには

高度なタイトル設定は、記事編集画面(PC版)の編集サイドバーにある「編集オプション」から利用できます。下に追加された「高度なタイトル設定」をクリックすると、「title要素(ページのタイトル)」と「og:title(ソーシャルメディア向けタイトル)」のテキストエリアが表示されます。

「高度なタイトル設定」

「高度なタイトル設定」をクリックするとテキストエリアが表示されます

2つの欄の両方、あるいはどちらかだけを設定することができます。それぞれ空欄にした場合には、これまでのデフォルトと同じ「記事タイトル - ブログ名」という形式のタイトルになります。

【追記】「高度なタイトル設定」に入力したタイトルもそれぞれの要素の記事タイトル部分を上書きし、実際の値はブログ名とあわせて次の形式になります。(2016年7月4日)
設定された記事タイトル - ブログ名

title要素とog:titleについて

高度なタイトル設定で指定できるtitle要素は、そのHTML文書のタイトルとして、ブラウザのタイトルバーや、ブラウザ拡張およびリンクツールでの自動タイトル取得、検索結果などに表示されることがあります。個別のサービスで実際にどのように表示されるかは、それぞれの実装によります。

また、og:titleは、ソーシャルシェアされた際にどのように表示されるかを指定するOGP(Open Graph Protocol)のタイトルです。【追記】Twitterカードで利用されるtwitter:titleにも同じものが設定されます。(2016年6月22日)

※OGPのアイキャッチ画像og:imageと概要og:descriptionも「編集オプション」で指定できます(関連ヘルプ参照)

※先日リリースしたAMPで配信されるAMP HTMLや、はてなブログがデフォルトでスマートフォン向けに配信しているHTMLには、もともとOGPは含まれません。