最近Googleウェブマスターツールが改名しましたね。
いつの間にかSearch Consoleというかっちょいい名前に変わってました。
さて、そんなSearch Consoleの検索アナリティクスを見ると、このブログではWeb系、特にMovabletype関連の記事への流入が多いようです。
ということで、今後はMovabletypeでよく使う小技を中心にまとめていこうと思います。
MTタグによるOGPメタタグの書き方
MTに限らずCMSでOGPを設定するときは、ページ単位でなくヘッダーテンプレートに記述することになると思います。
そこで、今回はこのブログで実際に記述されているソースを公開していきます。
<$MTEntrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"$>
では解説していきましょう。
まず１行目。
if文で、カスタムフィールド「EntryH1Title」に値が入っているばあいは、OGPのタイトルに値をセット。
カスタムフィールドに値が入力されていない場合は、そのまま記事タイトルをセットしています。
このブログではSEO対策のため、記事タイトルと記事ページH1出力文を分けているのでif文で分岐させていますが、普通はそのまま「EntryTitle」をセットしておけばいいでしょう。
７行目では、OGPのdescriptionに記事概要をセットしています。
EntryBodyで記事本文を出力し、その中からHTMLタグを除去、最大１００文字までと制限をかけています。
MT記事本文内の画像から最初の画像パスを取得
<$MTEntrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"$>
ポイントは９、１０行目の画像セット。
いったん９行目で変数「og_image」に記事本文中で使用される画像のうち、最初の画像パスを正規表現で抜き出してセット。
１０行目でog:imageに変数「og_image」をセット。
ここがMTでのOGP設定の関所ですね。だいぶ苦労してこのコードにたどり着きました。
この最初の画像を取得するコードは、今回OGPで使用しましたが、幅広い状況で応用できそうですね。