※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSにOGP&Twitterカード自動設定機能

SNSをやってるなら設定しておく?

今やSNSを通じて多くの人に記事を見てもらうためにはある意味必須の設定とも言えるのがOGPです。

 

このOGP設定ですが、イチからやるとけっこう大変です。

 

でもSIRIUSテンプレート【Volar】には、このちょいと面倒なOGP設定がすでに搭載済みです。

 

OGP設定を有効化すると下のような専用のHTMLタグを自動生成します。

 

キャプチャ画像

 

設定可能なのはトップページエントリーページの2種類。

 

トップページのOGPはほぼ固定の設定でイケます。

 

あなたはサイト名称サイトURLサイトイメージ画像などを追加入力するだけでOK。

※ツイッターカードも同時設定できます)

 

そしてページごとにページタイトルやURL・サムネイル画像などが変わってしまうエントリーページのOGPについてはあなたは何もする必要はありません。

 

機能をONにするだけで自動でOGPを取得して表示してくれます。

 

サイトイメージ画像サムネイル画像前もって設定しておく必要があります。

 

ただサイトイメージ画像は用意したとしても、記事ごとにサムネイル画像を用意するのは面倒だという方にはページ内で最初に出てきた画像を自動的にサムネイル画像として利用するコードも用意してあります。

 

あとは既存のコードをそのコードに差し替えるだけ。

 

もっとも画像によっては記事内容と全く関係ない画像が選択されてしまう可能性もあるのでご注意ください。

 

※詳細はマニュアルサイトをご覧ください。

※OGP設定はデフォルトではOFFになってます。

SIRIUSのTwitterカード自動設定と【Volar】OGP設定との相性

SIRIUSのバージョン1.5.7.2からTwitter(ツイッター)カードの自動設定項目が追加されました。

 

【サイトオプション】→【全体設定】を開くと新たに【SNS・スマートフォンに関する設定】というのが追加されてます。

 

Twitterカード自動設定の詳細についてはコチラ↓の記事をご覧ください。

Twitterカードの自動設定 - 副業サイトならSIRIUSでホームページ作成

ツイッター上で自分のサイトをサムネイル画像付きでうまく表示させるツイッターカードが自動設定できます。

 

Twitterカード自動設定にチェックを入れると、Twitterカードを含むOGP設定が自動で吐き出されるようになります。

 

ただしオリジナルのOGP設定やTwitterカード設定がすでにある場合は、たとえTwitterカード自動設定にチェックを入れたとしても既存の設定を優先する仕組みになっています。

 

そのためオリジナルのOGP設定(Twitterカードを含む)を搭載しているSIRIUSテンプレート【Volar】でSIRIUSのTwitterカード自動設定を優先的に表示させたい場合は、【Volar】側のOGP設定をオフにする必要があります。

 

【Volar】インストール直後のデフォルト状態ではOGP設定をまとめたモジュール記述がコメントアウトされているので、何もしなくてもOGP設定はオフ(無効化)の状態になっています。

 

ところがコメントアウトして無効化状態になってるにもかかわらず、どういうわけかそのままではSIRIUSのTwitterカード自動設定がうまく機能しない場合もあります。

(うまくいく場合もあります)

 

こちらで解決策をいくつか用意したので、詳細はマニュアルサイトをご覧ください。

吐き出されるHTMLデータに違いがある

SIRIUSのTwitterカード自動設定と【Volar】のOGP設定では、吐き出されるHTMLに多少の違いがあります。

 

以下は【Volar】デザインテンプレート・アートレスDEMOサイトにて、SIRIUSテンプレート【Volar】のOGP設定とSIRIUSのTwitterカード自動設定で、それぞれどんなHTMLタグが生成されるのかを比較したものです。

 

※実際のデータを基にしてますが、見やすくするため一部加工してます。

 

【Volar】のOGP設定だけを有効化した場合-トップページ-

コード

<meta property="og:site_name" content="(※サイト名記載の名称)" />
<meta property="og:title" content="(※サイト名記載の名称)" />
<meta property="og:type" content="website" />
<meta property="og:description" content="(※META説明文に記載の内容)" />
<meta property="og:url" content="(※サイトURL)" />
<meta property="og:image" content="(※予め設定しておいたサムネイル用画像)" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:site" content="(※指定のTwitterアカウント名)">
<meta name="twitter:card" content="summary">

SIRIUSのTwitterカード自動設定だけを有効化した場合-トップページ-

コード

<meta property="og:title" content="(※サイト名記載の名称)" />
<meta property="og:type" content="article" />
<meta property="og:description" content="(※META説明文に記載の内容)" />
<meta property="og:url" content="(※サイトURL)" />
<meta property="og:image" content="(※トップページの最初に出てきた画像)" />
<meta property="og:site_name" content="(※サイト名記載の名称)" />
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="(※指定のTwitterアカウント名)" />
<meta name="twitter:site" content="(※指定のTwitterアカウント名)" />

 

の”website”か”article”かは、さほど気にする必要はないと思います。

管理人は「トップページは”website”で個別記事ページは”article”」と習ってきたのでそうしているだけです。

 

は表示されるサムネイル画像の大きさの違いで、これはもう好みの世界としか言いようがありません。

(”summary”は小さ目の画像、”summary_large_image”にすると大き目の画像)

 

差が出るのはサムネイル用画像です。

 

【Volar】側の設定では、予め指定した画像でコチラ↓のように表示されます。

サイトに合わせて作った画像なので、特に違和感はありません。

 

キャプチャ画像

 

一方、SIRIUSのTwitterカード自動設定だと画像は自動選択になるようで、結果的にはDEMOサイトトップページ内で一番最初に出てきた画像がサムネイル画像として表示されてしまいました。

 

キャプチャ画像

 

これだとサイトトップページの紹介ツイートなのにサムネイル画像がちょっと?的な感じですね。

 

場合によってはこういったことを見越して、トップページの一番最初の画像にはサイトイメージ用の画像をうまく配置する必要もあるでしょう。

個別記事ページでの表示差

続いて個別記事ページでの表示の差です。

 

【Volar】のOGP設定だけを有効化した場合-個別記事ページ-

コード

<meta property="og:site_name" content="(※サイト名記載の名称)" />
<meta property="og:title" content="(※記事タイトル)" />
<meta property="og:type" content="article" />
<meta property="og:description" content="(※META説明文に記載の内容)" />
<meta property="og:url" content="(※記事URL)" />
<meta property="og:image" content="(※設定済みのサムネイル画像)" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:site" content="(※指定のTwitterアカウント名)">
<meta name="twitter:card" content="summary">

SIRIUSのTwitterカード自動設定だけを有効化した場合-個別記事ページ-

コード

<meta property="og:title" content="(※記事タイトル)" />
<meta property="og:type" content="article" />
<meta property="og:description" content="(※META説明文に記載の内容)" />
<meta property="og:url" content="(※記事URL)" />
<meta property="og:image" content="(※設定済みのサムネイル画像)" />
<meta property="og:site_name" content="(※サイト名記載の名称)" />
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="(※指定のTwitterアカウント名)" />
<meta name="twitter:site" content="(※指定のTwitterアカウント名)" />

 

個別記事に関してはどちらもほぼ同じ表示になります。

 

ただし今回はサムネイル画像を予め設定しておいたのでその画像が優先的に表示されましたが、もしもサムネイル画像が未設定の場合は、やはり記事ページ内で最初に出てきた画像がサムネイル画像として表示されるものと思います。

 

もしも最初に出てきた画像が「公式サイトはこちら」みたいなボタン画像だった場合は目も当てられないですね。

 

こういった弊害もあるので、多少面倒くさくてもサムネイル画像は記事ごとに用意しておいた方がいいと思います。

サムネイルの自動挿入

SNS・スマートフォンに関する設定】内にはTwitterカード設定のほかに「サムネイル自動挿入」という項目もあります。

 

ここにチェックを入れると、スマホでの検索結果においてテキスト説明だけでなくサムネイル画像も表示させることができます。

 

といっても必ず表示されるわけではなく、Google次第という話もあります。

(管理人もいろいろ試しましたが、なかなかうまく表示してくれませんね)

 

この「サムネイル自動挿入」ですが、先ほどのTwitterカード自動設定同様、サムネイル画像を設定してない場合はページ内の画像を自動選択する設定のようです。

 

そのため選ばれた画像によっては検索結果のテキスト説明文とかけ離れたものになる可能性もあります。

 

その辺のことをわかった上で利用するといいでしょう。

 

トップページのみですが、指定したサムネイル用画像を強制的に指定する方法もあります。

 

マニュアルサイトに載せておきました。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア