ヤマタケのWebサイト運営論~戦略・仮説検証・情報収集・Webで言えないこと

月間39万PVのブログを運営中の管理人が、どうすればアクセスアップするか考え、そのための情報収集方法を探し、さらにWebでは言えない意見・主張を吐露するブログ

LuxeritasのTwitterカードの設定が変更できない事象の原因と対処方法

Sponsored Links

Sponsored Links

Luxeritasのテーマを使ったWordpressサイトで、Twitterカードの設定が変更できない事象が発生しました。設定変更ができなった原因と、どうやって解決したか、原因の特定方法と対処法について解説・紹介したいと思います。

 

Luxeritasは優秀な無料Wordpressテーマ

Luxeritasは、ワードプレスの人気テーマの1つで、とても愛用しています。

thk.kanzae.net

SEO最適化やレスポンシブ対応、そして表示速度が非常に高速な点が魅力なテーマです。なんといっても無料というのが素晴らしいです。無料でここまで作り込まれたテーマは少ないと思います。

Luxeritasの魅力については、こちらの記事で紹介しています。

yamataso.hateblo.jp

LuxeritasはTwitterカードもデフォルトで設定可能

Luxeritasのテーマを使ったWordpressサイトでは、テーマの標準カスタマイズ機能として、Twitterカードの設定、OGPに関する設定変更を行うことができます。これも、Luxeritasの魅力の1つで、一般的なテーマではプラグイン導入しないと設定できないものもあります。

 

LuxeritasのTwitterカードの設定が変更できない?

ただ、今回、LuxeritasのTwitterカードの設定を

「サマリー(summary_large_image)」→「サマリー(summary)」

に変更したのですが、Twitter上で表示されるTwitterカードがサマリー形式にならない事象が発生しました。

summary形式の場合、通常、以下のように表示されます。

f:id:tyamamototry:20180322000337j:plain

それに対し、summary_large_imageの場合、よりアイキャッチ画像が大きく表示されます。

f:id:tyamamototry:20180322000329j:plain

一般的なWebサイトの場合、Twitterカードの形式は「summary_large_image」が採用されます。というのはインパクトが大きいからです。より大きなアイキャッチ画像がユーザの目を引き、クリック率を高めると考えられています。

しかし、運営しているWebサイトの画像の表示サイズの関係や、あまり大きく目立ちたくない関係で、summary形式に変更しようとしたのですが、上手く設定できませんでした。

 

どうやって設定変更できない原因を特定したか

Twitterカードの設定変更できない原因をどうやって調査したか、まず紹介します。

1.「Card Validator|Twitter Developer」を使って調査

Card Validator|Twitter Developerでは、Twitterカードの表示状況を調べることができます。またツイート直後にTwitterカードが上手く表示できない場合に、事前にこのサイトで表示させると表示させることができます。

そこではやはり画像が大きく表示され、ログにも画像形式という情報がありました。

f:id:tyamamototry:20180322001340j:plain

 

3行目に「summary_large_image」と記述があります。Twitterカード設定で「summary」に変更したにも関わらず、「summary_large_image」が検出されています。

2.ページのソース表示を調べてみた

次に行ったのは、Webページのソース表示です。投稿記事をChromeFirefoxWebブラウザで表示した後、右クリックで「ページのソースを表示」を選択すると、HTMLソースが表示されます。そのソースの記述内容を確認し、「summary_large_image」で検索すると、

<!-- Jetpack Open Graph Tags -->

というタグの中に発見しました。ここで導入しているJetpack」のプラグインが原因であることが特定できました

  1. テーマによるTwitterカードのタグ「summary」
  2. JetpackによるTwitterカードのタグ「summary_large_image」

タグが重複して記述され、Jetpackの記述が後ろに記述されていたため、こちらが採用され、表示形式が切り替わりませんでした。

 

解決策・対処方法

解決方法は、Jetpackプラグイン側のTwitterカード設定を無効化することです。

まず、ワードプレスの管理画面のダッシュボードで、「Jetpack>設定」を選択します。

f:id:tyamamototry:20180322002956j:plain

Jetpackでも設定されている場合、「Publicize connections」の「Automatically share your posts to social networks」が有効化になっています。

f:id:tyamamototry:20180322003213j:plain

このボタンをクリックすれば、無効化することができます。

f:id:tyamamototry:20180322003313j:plain

この状態で、再度、Twitterカードの設定を確認すると、きちんとsummary形式で表示されました!検証サイトのCard Validator|Twitter Developerのログもきちんと表示されています。

f:id:tyamamototry:20180322003411j:plain

 

プラグインSNS設定は無効が推奨

今回、Twitterカードの形式が変更できないことで、発覚しましたが、Luxeritasのテーマを使用する場合は、上記で紹介した、JetpackSNS設定は無効化することをオススメします。というのも、この設定が有効化されている場合、Luxeritasテーマによるメタ情報と、Jetpackによるメタ情報が重複するからです。どちらも同じ内容になっても冗長になり、読み込み速度にも影響する可能性があるため、基本的には、Jetpack側を無効化するのがよいと考えます。

 

終わりに

今回、ワードプレスの無料テーマ「Luxeritas」のTwitterカード設定が変更できない事象を紹介しました。変更できなかった原因はプラグインJetpack」のSNS設定が有効化されており、そちらの設定が採用されていたためでした。Jetpackは、統計情報も収集できるため、人気のプラグインですが、こういったポイントは注意したいところです。

Luxeritasを使用する場合は、解決策で紹介したようにSNS設定を無効にしておくのが推奨です。

Twitterカードの設定で困っている際の参考になれば幸いです。