読者です 読者をやめる 読者になる 読者になる

すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

はてなブログの「高度なタイトル設定」を理解する

はてなブログSNSWebサービス向けのタイトルを設定できる機能が追加されました。

設定ごとに、どのように利用されるかを確認してみましょう。

 

title要素とog:titleについて

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

また、og:titleは、ソーシャルシェアされた際にどのように表示されるかを指定するOGP(Open Graph Protocol)のタイトルです。

【追記】Twitterカードで利用されるtwitter:titleにも同じものが設定されます。

ソーシャルシェアなどでタイトルを使い分けできる「高度なタイトル設定」をリリースしました - はてなブログ開発ブログ

 

便利な機能ですが「高度なタイトル設定」という名前の通り、理解を深めたうえで利用するとブログがもっと楽しく書くことができます。

 

それぞれの設定に影響する範囲を確認する

このエントリー時点では3か所のタイトル設定入力欄があります。

はてなブログのタイトル入力欄
よく分からない場合(通常)は本文入力欄の上にある「タイトル」部分のみ入力すると良いでしょう。

 

※このエントリーでは、通常のタイトルを設定している前提で解説を行います。

title要素 (ページのタイトル)の設定

title要素の入力欄に専用のタイトルを入力した場合は、以下の部分に影響があります。

  • 開いているブラウザのウィンドウ・タブ表示
  • 記事ページ内のカスタム変数(デザイン設定にあります)
  • はてなブックマークのエントリータイトル

タブのタイトルが変わった
一例として、最近のエントリーの一つを変更してあります。

 

psn.hatenablog.jp

 

エントリー上部のタイトルと、ブラウザに表示されているタイトルが違うものになりました。

 

デザイン設定の変数
記事ページ上下の部分にて利用できる変数もこちらの設定が優先されます。

カスタマイズで独自のツイートボタン、はてなブックマーク等を利用している場合は、変更されたタイトルが利用できます。

※このエントリー時点ではデフォルトのツイートボタンは「通常のタイトル設定」にて設定したタイトルが利用されいます。

ツイートボタン

 

og:title (ソーシャルメディア向けタイトル)の設定

og:titleの要素の入力欄に専用のタイトルを入力した場合は、以下の部分に影響があります。

  • facebookのシェアボタンにて表示されるタイトル
  • Twitter Cardに表示されるタイトル

 

通常タイトルはこちらです。

psn.hatenablog.jp

 

facebookにて表示された場合のサンプル

facebookに登録する
※og:site_nameはブログ名が表示されるとうれしいですね。

 

Twitterのタイムラインに表示された場合のサンプル

Twitter Cardのサンプル
facebookと同等の表示になります。(当たり前ですが)

 

使いどころを考える

それぞれの影響範囲が分かると、どの方向にどのタイトルを設定すると良いかが分りますね。SNS向けに圧縮されたタイトルを提供する事で、シェアした方のコメント入力文字数が増える などが期待できそうです。

 

進撃のはてなブログ

 

NEW リズムでともだち こぐまのトンピー ぬいぐるみ