検索とソーシャルシェアで別の記事タイトルを使う方法

  • 3
    いいね
  • 0
    コメント

ソーシャルにシェアされた時に目を引く記事タイトルと、Google 検索結果内でクリックされやすいタイトルはちがいます。Movable Type のカスタムフィールドを使って、 <title> と、 og:title の中身に、それぞれ別のタイトル文言を設定してみました。

仕様

  • 記事作成ページに、SNS用タイトルを記述するためのカスタムフィールド [SNS用タイトル] を設ける
  • [SNS用タイトル] が登録されている場合、og:title にその登録内容を利用する
  • [SNS用タイトル] が登録されていない場合、og:title には記事タイトルを利用する

これで、SNS用に別タイトルをつけたい場合も、面倒なのでおんなじで良いときにも、ばっちりです。

設定方法

1. カスタムフィールドを作る

以下のような設定のカスタムフィールドを作ります。

customfield.png

  • 名前: SNS用タイトル
  • ベースネーム: ogtitle
  • テンプレートタグ: EntryDataOgTitle

2. 記事テンプレートHTMLヘッダー内更新

HTMLヘッダー内の og:title の行を以下のコードに差し替えます。

<meta property="og:title" content="<mt:If tag="EntryDataOgTitle"><mt:EntryDataOgTitle encode_html="1" /><mt:Else><mt:EntryTitle encode_html="1"></mt:If>"/>

使い方

記事の編集画面で、記事本文入力エリア下に表示されるカスタムフィールド [SNS用タイトル] に、ソーシャル用のタイトルを入力します。

※カスタムフィールドが表示されていない場合は、記事の編集画面右上の [表示オプション] - [SNS用タイトル] をONにしましょう。

ogtitle_entry.png

記事を公開して、ソースを見てみましょう。

source.png

<title> と、 og:title に、編集画面で指定した文言が入っています。

Facebook Debugger で見ても、 og:title が使われています。

debugger.png