はてなブログにSNSやWebサービス向けのタイトルを設定できる機能が追加されました。
設定ごとに、どのように利用されるかを確認してみましょう。
title要素とog:titleについて
高度なタイトル設定で指定できるtitle要素は、そのHTML文書のタイトルとして、ブラウザのタイトルバーや、ブラウザ拡張およびリンクツールでの自動タイトル取得、検索結果などに表示されることがあります。個別のサービスで実際にどのように表示されるかは、それぞれの実装によります。
また、og:titleは、ソーシャルシェアされた際にどのように表示されるかを指定するOGP（Open Graph Protocol）のタイトルです。
【追記】Twitterカードで利用されるtwitter:titleにも同じものが設定されます。
ソーシャルシェアなどでタイトルを使い分けできる「高度なタイトル設定」をリリースしました - はてなブログ開発ブログ
便利な機能ですが「高度なタイトル設定」という名前の通り、理解を深めたうえで利用するとブログがもっと楽しく書くことができます。
それぞれの設定に影響する範囲を確認する
このエントリー時点では3か所のタイトル設定入力欄があります。
よく分からない場合(通常)は本文入力欄の上にある「タイトル」部分のみ入力すると良いでしょう。
※このエントリーでは、通常のタイトルを設定している前提で解説を行います。
title要素 (ページのタイトル)の設定
title要素の入力欄に専用のタイトルを入力した場合は、以下の部分に影響があります。
- 開いているブラウザのウィンドウ・タブ表示
- 記事ページ内のカスタム変数(デザイン設定にあります)
- はてなブックマークのエントリータイトル
一例として、最近のエントリーの一つを変更してあります。
エントリー上部のタイトルと、ブラウザに表示されているタイトルが違うものになりました。
記事ページ上下の部分にて利用できる変数もこちらの設定が優先されます。
カスタマイズで独自のツイートボタン、はてなブックマーク等を利用している場合は、変更されたタイトルが利用できます。
※このエントリー時点ではデフォルトのツイートボタンは「通常のタイトル設定」にて設定したタイトルが利用されいます。
og:title (ソーシャルメディア向けタイトル)の設定
og:titleの要素の入力欄に専用のタイトルを入力した場合は、以下の部分に影響があります。
通常タイトルはこちらです。
facebookにて表示された場合のサンプル
※og:site_nameはブログ名が表示されるとうれしいですね。
Twitterのタイムラインに表示された場合のサンプル
facebookと同等の表示になります。(当たり前ですが)
使いどころを考える
それぞれの影響範囲が分かると、どの方向にどのタイトルを設定すると良いかが分りますね。SNS向けに圧縮されたタイトルを提供する事で、シェアした方のコメント入力文字数が増える などが期待できそうです。
進撃のはてなブログ。
