POTTIRI'S AUTOBIOGRAPHY

ダイエットやITで遊ぶアラフォーエンジニアの自伝ブログです。

【ブログ運営】はてなブログの高度な設定を使ってみよう

f:id:pottiri:20201008231039p:plain
お疲れさまです。POTTIRIです。
はてなブログにタグが付けれるようになりました!
付けたらどうなるかまだわかっていませんが、
とりあえず付けて損はないと思いますのでどんどん付けていきましょう!

さて、今日ははてなブログにある「高度な設定」を試してみたいと思います。

「高度な設定」とは

「高度な設定」は前から気にはなっていたのですが、今回初めて試します。
titleとog:titl、それぞれ何なのでしょうか?

help.hatenablog.com

titleはブラウザのタブに表示される文字列。
og:titleはOGPと言われるデータの一種で、
SNSでシェアされる時に使われます。
では早速試してみましょう。

title設定

先日の復職の記事で試してみます。
記事編集画面の歯車アイコンをクリックして、「高度な設定」の下向き不等号をクリックして編集画面を開きます。
そしてtitle要素に記事のタイトルとは異なる文字列を入れます。

f:id:pottiri:20201008231059p:plain

 

f:id:pottiri:20201008231118p:plain


そうすると、ブラウザでこの記事を開いた時、
タブに記事のタイトルとは異なる文字列が表示されます。

f:id:pottiri:20201008231614p:plain

og:title要素

次はog:title要素です。
同じく編集画面で文字列を入れます。

f:id:pottiri:20201008231328p:plain

og:titleを入れてから、もう一度記事をシェアしてみます。
ちなみに以前にシェアしたことがある記事の場合、
前のタイトルがTwitter側に記憶されている可能性があるので、
クリアしておくといいでしょう。
Twitter社が提供しているシェアした時のイメージを確認する画面、
一回当該記事を確認すると記憶がクリアされます。

cards-dev.twitter.com

これがog:titleを設定した状態。

f:id:pottiri:20201008231653p:plain

こちらが設定する前です。
f:id:pottiri:20201008231650p:plain
シェアした時の表示が変わっていますね。
ちなみに何文字ぐらい表示してくれるのでしょうか?

f:id:pottiri:20201008231811p:plain

サイトのタイトルが外れて、75文字ぐらい入りましたね。
機種によって異なる気がしますが50文字ぐらいは入ると見ていいんじゃないでしょうか。

まとめ

私の場合、記事のタイトルはGoogleを意識してキーワードを入れたり、
コンパクトにまとめたりしているので、
SNS向けのタイトルはそれを外してちょっと説明が入ったタイトルにしてもいいかもしれませんね。
本記事で試したことが何かのお役に立てれば幸いです。

最後まで読んでいただきありがとうございました。

アフィリエイト

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本