はてなブログの高度なタイトル設定を解説（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コミックがおすすめ」が反映されていました。

※はてなブログの「記事の概要」を記載して設定しましたが、まだ反映されていません。

記事の概要は、スニペットやメタディスクリプションとも呼ばれます。
【追記】2020年12月11日確認してみると、「記事の概要」に設定した内容が反映していました。時間が経つと、記事の概要に設定した部分が反映される可能性がありますね。一概に必ず記事の概要の部分が表示されるわけではありません。こればかりはGoogleしだいです。

 

はてなブログでの過去記事（関連記事）の紹介などは、title要素に設定したほうのタイトルではなく、通常のタイトル設定の部分が反映されました。

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（ソーシャルメディア向けタイトル）を以下のように「テストテストテストソーシャルメディアむけ」と設定してみました。

 

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

 

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

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

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

 

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

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

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

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

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