Edited at

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

More than 3 years have passed since last update.

ソーシャルにシェアされた時に目を引く記事タイトルと、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