ソーシャルにシェアされた時に目を引く記事タイトルと、Google 検索結果内でクリックされやすいタイトルはちがいます。Movable Type のカスタムフィールドを使って、 <title> と、 og:title の中身に、それぞれ別のタイトル文言を設定してみました。
仕様
- 記事作成ページに、SNS用タイトルを記述するためのカスタムフィールド [SNS用タイトル] を設ける
- [SNS用タイトル] が登録されている場合、og:title にその登録内容を利用する
- [SNS用タイトル] が登録されていない場合、og:title には記事タイトルを利用する
これで、SNS用に別タイトルをつけたい場合も、面倒なのでおんなじで良いときにも、ばっちりです。
設定方法
1. カスタムフィールドを作る
以下のような設定のカスタムフィールドを作ります。
- 名前: 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にしましょう。
記事を公開して、ソースを見てみましょう。
<title> と、 og:title に、編集画面で指定した文言が入っています。
Facebook Debugger で見ても、 og:title が使われています。
