はてなブログの高度なタイトル設定を解説(title要素、og:title)何を入れればいいの?


はてなブログの記事を書く画面の、編集オプションに、「高度なタイトル設定」ってありますよね。

編集画面の高度なタイトル設定

「はてなブログの記事title要素(ページのタイトル)とog:title(ソーシャルメディア向けタイトル)って何を入れればいいの?」について解説します。

結論からいいます。

  • title要素(ページのタイトル)は、Google検索のタイトルを変えられる
  • og:title(ソーシャルメディア向けタイトル)は、ソーシャルメディアに公開するときのタイトルを変えられる

SNS(TwitterやFacebook)は、バズるタイトルにするとクリックされやすいです(検索ユーザーではないため)

「ある程度インパクトのあるタイトルにしたい」と思ったときに、og:title(ソーシャルメディア向けタイトル)にタイトル入れたりする感じです。

検索してくる読者向けであれば、「悩みを解決してくれるタイトル」にすることが重要です。

 

はてなブログの高度なタイトル設定を解説【title要素(ページタイトル)、og:title(ソーシャルメディア向けタイトル)】

以下の順番で解説していきます。

  • title要素(ページタイトル)
  • og:title(ソーシャルメディア向けタイトル)

title要素(ページタイトル)の解説

はてなブログ開発ブログには、こんな記載があります。

title要素を変更すると、ブラウザのタイトルバーのほか、検索結果やリンク元での表示、さまざまなサービスやアプリで自動取得される記事タイトルなど、広範囲に影響します。

はてなブログ開発ブログから引用:編集オプションの設定とOGP

ブラウザのタイトルバーとは、以下のようなブラウザのタブのことです。

ブラウザのタブのタイトル

title要素(ページタイトル)を変更すると、確かにtitle要素(ページタイトル)にいれたタイトルが反映されています。

↑テストで「title要素(ページのタイトル)に「title要素」といれてみました。

通常のはてなブログで入力するタイトルとは、違うタイトルが表示されていることが分かります。

 

title要素(ページのタイトル)を変更すると、Google検索のタイトルの部分が変更されます。

実際に書いたで記事でテストをしてみました。

はてなブログの通常のタイトルは「DMMコミックがオススメ」としました。title要素(ページのタイトル)は「DMMコミックがおすすめ」と設定しました。

はてなブログのタイトル設定

すぐに、サーチコンソールでGoogleにインデックス(登録)しました。

インデックスした翌日、Googleの検索結果には、title要素に設定したほうのタイトル「DMMコミックがおすすめ」が反映されていました。

Google検索のタイトル

(※記事の概要、スニペットの部分も記載して設定しましたが、まだ反映されていません)

 

はてなブログでの、通常の過去記事紹介などは、通常のタイトル設定の部分が反映されました。

過去記事の貼り付け

title要素(ページタイトル)じゃないほうが反映されています。

特に場面場面でタイトルを使い分けるなどしないのであれば、title要素は入れなくてもOKですね。

 

og:title(ソーシャルメディア向け)の設定を解説

はてなブログ開発ブログには、ソーシャルメディアが利用するメタデータの記載があります。

FacebookなどではOGP(Open Graph protocol)というメタデータを利用します。

はてなブログ開発ブログから引用:編集オプションの設定とOGP

つまり、SNS向けにタイトルを変更できるということですね。

og:title(ソーシャルメディア向けタイトル)は、TwitterやFacebookなどのSNSでのはてなブログを公開するときのタイトルを変えることができます。

Google検索されるときのタイトルと、SNS上でのタイトルを変えたい場合は、og:title(ソーシャルメディア向け)の設定を変えてあげるといいですね。

 

Facebookでのタイトルで実験【og:title(ソーシャルメディア向けタイトル)】

はてなブログでは、高度なタイトル設定のog:title(ソーシャルメディア向けタイトル)を以下のように「テストテストテストソーシャルメディアむけ」と設定してみました。

はてなブログの高度なタイトル設定を解説ogtitle

 

Facebookでは、og:title(ソーシャルメディア向けタイトル)に設定した、はてなブログのタイトルが表示されてました。

Facebookでのタイトル表示

 

Twitterでのタイトルで実験【og:title(ソーシャルメディア向けタイトル)】

Twitterでも、記事のタイトルがog:title(ソーシャルメディア向けタイトル)に設定した、はてなブログのタイトルが反映されています。

Twitterでの拡散時のタイトル表示

タイトルのあとには、ブログのメインタイトルが表示されています。

 

まとめ【はてなブログの高度なタイトル設定を解説(title要素、ogtitle)】

はてなブログの高度なタイトル設定↓

  • title要素(ページのタイトル)は、Google検索のタイトルを変えられる
  • og:title(ソーシャルメディア向けタイトル)は、ソーシャルメディアに公開するときのタイトルを変えられる

意図して、Google検索のタイトルと、はてなブログの通常タイトルを変えたいという方以外は、「高度なタイトル設定(title要素)」を設定する必要はないですね。

検索されるタイトルとは別に、SNSでバズるタイトルを付けたいという方は、og:title(ソーシャルメディア向けタイトル)を設定してください。