Twitterカードが表示されない件を調べています
記事タイトルと記事内のタイトルが違っているように見えますが、色々あるのでご勘弁を。
京都和装ロケフォトの事業を改めてスタートさせるにあたり、ブログを見直したり、新しいサイトを作る中で、告知用のTwitterを見直しています。その中で、Twitterカードを「Summary Cardwith Large Image」にしたいと思って、色々と試していたのですがなかなか、うまくいかず。
様々なサイトを見る中で困った時はプラグインを止めてみなさいという神の声を聞きましたので停止をさせました。今回停めたのはSNSがらみで何か悪さをしそうなプラグインとして、「Jetpack」プラグインとSEO対策として超有名な「All in One SEO」です。
結果としては、どうもうまくTwitterカードの件は解決しそうな雰囲気なのですが、プラグインを停止させることである問題が生じるかもしれないということで、今回はそのからみの話をしようと思います。
Jetpackとは
すでに、停止をさせているプラグインですが、ちょっと調べてみました。
あらゆる WordPress サイトのセキュリティを確保し、トラフィックを増加し、読者の注目を集めることができます。
- トラフィックと SEO ツール
- セキュリティとバックアップサービス
- コンテンツの作成
- ディスカッションとコミュニティ
- 専門家によるサポート
- 有料サービス
JetpackプラグインはWordPressを利用する上で便利なアクセス解析や問い合わせフォーム、SNS自動共有など約30種の機能をパックにしたものです。
高機能プラグインとして、wordpress初心者ならば必ず入れておいた方がいいというプラグインですね。
All in One SEOとは
WordPressサイトをSEO最適化するのにAll in One SEO Packを使ってください。初心者にもやさしく、高度な設定や開発者向けAPIも揃っています。
こちらも色々な機能がパッケージングされたプラグインですね。XMLサイトマップレポートや、SNS連携などもできます。Google Analyticsのサポートもしてくれます。
プラグインの停止の仕方
インストールされたプラグインは停止をすることでその機能を使えなくします。僕のように例えばTwitterカードを表示させたいのにうまく表示できなかったり、他のプラグインがうまく動かない時は競合している可能性がありますので、その際にプラグインを停止して、そのプラグインが原因なのかを特定させます。
手順は簡単です。例としてAll in One SEOを停止させてみます。
WordPressの管理画面にログインして、プラグイン→インストール済みプラグインに移動します。対象となるプラグインの「停止」のリンクをクリックすれば、プラグインは停止されます。
All in One SEOを停止したら起こること
僕は、このAll in One SEOというプラグインのソーシャルメディアの機能を使用しており、その内容は、OGPの設定とTwitterカードの設定なのですが、今回All in One SEOは停止をしたので、2の設定を直接行うことにしました。
OGPとは
ここで新しい言葉であるOGPという話が出てきましたので、ちょっと説明を。
The Open Graph protocol enables developers to integrate their pages into Facebook's global mapping/tracking tool Social Graph. These pages gain the functionality of other graph objects including profile links and stream updates for connected users.
参考文献が英語しなかったので、あえて英語で載せましたが、Facebookや Twitter、 Google+、mixiなどのSNSでシェアされた際に、そのページの タイトル・ URL・概要・アイキャッチ画像（ サムネイル）を意図した通りに正しく表示させる仕組みだと理解すれば全く問題ないと思います。
このOGPの設定方法ですが、wordpressdであれば、functions.phpというタグの前に、ソースコードを埋めます。ただこのソースコードは、基本的には同じですが、一部IDや画像ファイルのURLを記載してもらわないといけないので、その情報は各自で入力をしてください。
先ほど、自身で入力してもらわないいけない箇所があるということをお伝えしましたので、その説明をします。
Twitterカードの種類（43行目）
4種類のカードがあるみたいですが、僕は、「Summary Card with Large Image」にしました。理由ですが、僕と同じ理由でブログの情報をTwitterにあげたいと思っている方は、Summary Card with Large Imageをお勧めします。
- 動画は載せない。
- ブログには必ずアイキャッチは入れる
- アイキャッチはできるだけブログのコンテンツに沿ったものを入れる
- アイキャッチにタイトルを載せることが多い
Twitterのアカウント（44行目）
Twitterのアカウントと聞くと、僕は混乱をしてしまいます。「@hogehoge」なのか、@を除いた「hogehoge」なのか。でもTwitterアカウントとは「@hogehoge」だそうなので、僕の場合は、「@daisuke178」です。
app_id（48行目）
このapp_idとはFacebookのアプリIDというものを入れるそうです。このアプリIDについてはあまり説明がありません。Facebookと連携するiOSやAndroidアプリを作成する際に必要となるIDであったり、Facebookのアクセス解析ツール用のIDという説明はあります。
取得方法についてはとてもめんどくさいというか、設定の画面が結構変わるみたいなので、ここで画面をはりつけて説明をしてもすぐに情報が陳腐化してしまいます。なので最新の画面キャプションで説明をしているサイトをご紹介するのでそちらをご参考にしてください。
【2017年版】Facebook App ID（アプリID）の取得方法 - Suzaku(朱雀)OGPの設定がうまくいったかを確認する方法
OGPタグを出力するためのソースコードを、functions.phpに書き込んだら、きちんとfacebookやTwitterで思った通りの表示ができているか確認しましょう。
確認の方法ですが、2種類あります
ブログのソースコードをみて、の上あたりにソースコードは吐き出されているか
本来このOGP設定は表示されるHTMLのheadタグの部分に表示させるためにfunctions.phpに書いているソースコードになるので、本来の挙動ができているかどうかを確認するのは当たり前といえば当たり前です。なので、ブログのソースコードを見て、以下のようなソースコードが吐かれているか確認して下さい。
「x」となっている箇所は、Facebookのapp_idになります。
FacebookシェアデバッカーとCard validator
FacebookとTwitterでは、デバッカーが用意されていますので、こちらで対象となるURLを入力して、表示が自分の思った通りになっているかを確認してください。
僕はおかげさまでやっとの事で、自分の思った通りの挙動をしてくれるようになりました。特にTwitterカードについてはなかなかLargeImageが表示されずやきもきしていましたがなんとか解決しました。
最後に
この件一旦解決はしましたが、All in One SEOは停止をしています。このためにAll in One SEOで使用している他の機能については何か代替案を考えないといけません。特にXMLサイトマップレポートについては急ぎで何か対応をしないといけないと思っています。
またJetpackについても停止をしているので、アクセス解析などの機能は何か別のツールを使わないといけないと思っています。（これはGoogle Analyticsがあるので良いのですが。）
コメント