4kaku design

マーケティングを勉強しているWebデザイナーのノート

このブログはa-blog cmsで動いているんですが、グローバル変数とタッチモジュールの勉強を兼ねてほとんど手つかずだったOGP設定を見直しました。


まず最初に、グローバル変数とタッチモジュールについて。

「グローバル変数」は、テンプレート(テーマ)に記述することで、表示しているWebサイト、ページの持っている情報を表示することができます。ページのタイトルやIDなど、ビルトインモジュールでも代用が効くものも多いんですが、グローバル変数の方が優先的に処理されます。
「タッチモジュール」は、見ているページの条件によって、モジュールに囲まれている要素を出したり隠したりすることができます。Webサイトにログインしているときだけ表示される管理用のボタンも、ログイン時のみ表示するモジュールに囲まれているからこのような動きをします。↓はサンプルです。


<!-- BEGIN_MODULE Touch_Login -->
  この部分は【ログイン時】のみ表示されるよ!
<!-- END_MODULE Touch_Login -->

詳しくはリファレンスをご覧ください。
グローバル変数 | リファレンス | a-blog cms 制作者向け情報
タッチモジュール | リファレンス | a-blog cms 制作者向け情報

OGPのパターンを切り分けてみる

お手本にしている既存テーマのOGPを設定しているファイルを見ると、予想外に記述がびっしりで少しぎょっとしたので、自分のブログに必要なOGP設定のパターンを把握することから始めました。
OGPのメタタグ一覧は公式サイトを見ました。og:audioなんてあるんですね。

a-blog cmsは「プロパティ設定」でブログのタイトル、説明文、キーワードを設定することができるので、後から一箇所ずつ修正したりしなくてもいいように、極力グローバル変数を使って作っていきます。ちなみにこのブログは以下のような設定をしています。


タイトル→%{BLOG_NAME}で表示
4kaku design
ディスクリプション→%{META_DESCRIPTION}で表示
「4kaku design」は名古屋の新米Webデザイナーいまいりさこが、日々勉強したWeb関連のテクニックやトレンドをまとめるブログです。
キーワード→%{META_KEYWORDS}で表示
Webデザイン,ブログ,デザイナー

OGP画像を整理したテーブル

表を書いて整理してみました


トップページ

まず最初に、タッチモジュールでトップページ用(http://4kakudez.com)に指定。ここはほぼデフォルトです。

<!-- BEGIN_MODULE Touch_Top -->

<meta name="keywords" content="%{META_KEYWORDS}" />
<meta name="description" content="%{META_DESCRIPTION}" />
<meta property="og:title" content="%{BLOG_NAME}">
<meta property="og:type" content="website">
<meta property="og:image" content="http://4kakudez.com/themes/4kakublog/img/ogpImage.png">
<meta property="og:url" content="%{PERMALINK}">
<meta property="og:site_name" content="%{BLOG_NAME}">
<meta property="og:description" content="%{META_DESCRIPTION}">

<!-- END_MODULE Touch_Top -->

エントリー一覧

つぎに、エントリー一覧(http://4kakudez.com/index.html)用の指定をしました。
しかし、ここでひとつタッチモジュールにまつわる壁にぶつかりました。

タッチモジュールは「指定されている時」表示するものである

Touch_CategoryとTouch_Tagでそれぞれに関連するエントリー一覧についての情報を出そうとするものの、同じメタタグが何個も出てきてしまい困りました…。ここでよくリファレンスを読むと、タッチモジュールは「エントリー」「タグ」が指定されている時のみ表示すると書いてあります。カテゴリー(タグ)のエントリー一覧時に適応されると思い込んでいたのが敗因だったようです。

そこで、以下のコードで表示することにしました。

<!-- BEGIN_MODULE Touch_Index -->

<meta property="og:title" content="<!-- BEGIN_MODULE Touch_Category -->%{CATEGORY_NAME} | %{BLOG_NAME}<!-- END_MODULE Touch_Category --><!-- BEGIN_MODULE Touch_Tag -->%{TAG} | %{BLOG_NAME}<!-- END_MODULE Touch_Tag -->">
<meta property="og:description" content="<!-- BEGIN_MODULE Touch_Category -->新米Webデザイナーのブログ「%{BLOG_NAME}」の「%{CATEGORY_NAME}」カテゴリーに属するエントリー一覧です<!-- END_MODULE Touch_Category --><!-- BEGIN_MODULE Touch_Tag -->新米Webデザイナーのブログ「%{BLOG_NAME}」の「%{TAG}」タグがついているエントリー一覧です<!-- END_MODULE Touch_Tag -->">
<meta name="description" content="新米Webデザイナーのブログ「%{BLOG_NAME}」の「%{TAG}」タグがついているエントリー一覧です">
<meta property="og:type" content="website">
<meta property="og:image" content="http://4kakudez.com/themes/4kakublog/img/ogpImage.png">
<meta property="og:url" content="%{PERMALINK}">
<meta name="twitter:title" content="<!-- BEGIN_MODULE Touch_Category -->%{CATEGORY_NAME} | %{BLOG_NAME}<!-- END_MODULE Touch_Category --><!-- BEGIN_MODULE Touch_Tag -->%{TAG} | %{BLOG_NAME}<!-- END_MODULE Touch_Tag -->">
<meta name="twitter:description" content="<!-- BEGIN_MODULE Touch_Category -->新米Webデザイナーのブログ「%{BLOG_NAME}」の「%{CATEGORY_NAME}」カテゴリーに属するエントリー一覧です<!-- END_MODULE Touch_Category --><!-- BEGIN_MODULE Touch_Tag -->新米Webデザイナーのブログ「%{BLOG_NAME}」の「%{TAG}」タグがついているエントリー一覧です<!-- END_MODULE Touch_Tag -->">

<!-- END_MODULE Touch_Index -->

個別エントリー

最後に個別のエントリーページ用のOGP設定を行います。ここで一番難しかったのは、og:description用にエントリー本文のサマリー(要約文)を表示することでした。SEOのことを考えるならカスタムフィールドで毎回要点を抑えたテキストを書くべきなんでしょうけれども、ブログを書くことのハードルを少しでも下げたかったので、素直に本文の冒頭を表示することに。

サマリーモジュール(Entry_Summary)のモジュールIDを作成し、メインイメージのパスとエントリー本文の冒頭、キーワード用にタグを表示しています。このとき、モジュールIDの表示設定で表示件数を1件にしておかないとheadタグ内が大変なことになるのでご注意を。

<!-- BEGIN_MODULE Touch_Entry -->

<meta property="og:type" content="article">
<meta property="og:url" content="%{PERMALINK}">
<meta property="og:title" content="%{ENTRY_TITLE} | %{BLOG_NAME}">
<meta name="twitter:title" content="%{ENTRY_TITLE} | %{BLOG_NAME}">

<!-- BEGIN_MODULE Entry_Summary id="ogpSummary" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<!-- BEGIN image:veil -->
<meta property="og:image" content="%{BLOG_URL}{path}">
<meta name="twitter:image" content="%{BLOG_URL}{path}">
<!-- END image:veil -->
<!-- BEGIN noimage -->
<meta property="og:image" content="http://4kakudez.com/themes/4kakublog/img/ogpImage.png">
<meta name="twitter:image" content="http://4kakudez.com/themes/4kakublog/img/ogpImage.png">
<!-- END noimage -->
<meta property="og:description" content="{summary}[trim(200, &#39;...&#39;)]...">
<meta name="description" content="{summary}[trim(200, &#39;...&#39;)]...">
<meta name="twitter:description" content="{summary}[trim(200, &#39;...&#39;)]...">
<meta name="keywords" content="%{META_KEYWORDS},<!-- BEGIN tag:loop -->{name},<!--BEGIN glue --><!--END glue --><!-- END tag:loop -->">

<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

<!-- END_MODULE Touch_Entry -->

OGP設定をやってみて

今回はシンプルな作りのブログでしたが、階層構造が複雑なサイトでも「いつ」「どこに」「何を」表示するか把握するのは、OGP設定に限らず大切だと思います。

実は、このOGP設定作業と同時進行でソーシャルボタンの正しい設定も勉強してました。そちらも近日中にまとめます。