【ブログ初心者必見】WordPressのテーマを変更したらTwitterカードが表示されなくなったので、その原因と解決方法を教えます。




こんにちは、timcoです!
この度、ブログのテーマを「simplicity」から「stork」に変更しました。

storkはとことんモバイルファーストにこだわった有料テーマで、めちゃくちゃ見やすいし、きれいなんですよね。色んな有名ブロガーの方が使っています。

ショートコードなどもめちゃくちゃ充実しているため、ブロガーの人が記事書く事だけに集中できます。

htmlとかcssとかよく分からない人には、特におすすめ!

 

timco
htmlとかCSSにばっかり時間かかって、記事書くのに集中できない!

 

ぼくのようなガチガチの文系で、Webデザイン系の知識がほとんどなくても、クリックしてカスタマイズするだけでめちゃくちゃサイトがキレイになります。

 

ですが!!!!

storkに変えたときに困った事が1つあったんですよ。

 

それが、twitterでブログを投稿した時に、twitterカードが表示されなくなったこと。

 

Twitterで、ブログのURLを投稿した時に今までのsimplicityであればこんな感じで表示されていたんですが

 


テーマをstorkに変えたらこんな感じに表示されたんですね

 

 

これはめっちゃこまる!普通はURLだけだったら視認率も悪いので「どんな記事なんだろう?」って見ないですよね。ぼくのような、まだ認知度の低いブロガーにとってこれは死活問題です。

 

とゆうことで、twitterカードを投稿させるために奮闘した過程をブログに書きまますので、同じ悩みを抱えた方の参考になれば嬉しいです。

 

今回は、僕と同じようにhtmlとかcssとかWebデザイン系の技術に強くない人に向けて書いてます。

 

表示されない原因:ブログ記事にTwitterのメタ情報が記載されていないから

結論から言いましょう。

表示されない原因は、あなたのブログ記事にtwitterカードのメタ情報が載っていないからです

 

メタ情報って?

メタ情報が良くわからない方へ、簡単に説明します。メタ情報ってhtmlでは、下記のように説明されています。

「META」とは「META-information」の略で、文書のメタ情報を指定し、ブラウザや検索ロボットにホームページの情報を知らせるためのタグです。
メタ情報は、Googleやgooなどのスパイダーと呼ばれるロボット型検索エンジンがネットワーク上を巡回した際に拾われ、検索ページに反映されます。
また、メタ情報はサイト上の画面には表示させない情報であり、<メタ>タグは必ずタグ間に記述されます。

引用:Chrono Drive

 

つまり、GoogleとかYahooとかの検索エンジンがあなたのサイトを見つけるための色んな情報が記載されているものってことですね。

メタタグに必要な情報が記載されていなければ、いつまでも検索エンジンに見つけてもらえないということです。

 

twiiterカードのメタ情報って?

じゃあ、twitterカードのメタ情報ってなんなのか?

とりあえず、自分のサイトの記事で「右クリック→ページのソースを表示」をクリックしてみてください。そうすると、文系の人は見ただけで拒否反応を示すようなhtmlコードがずらっと出てくる笑

このなかで、上のほうの行(~タグに囲まれている部分)のなかに以下のようなコードが記載されていませんか?

これが、twitterカードのメタ情報って言われるもの

 

Twitterカードのメタ情報は記述されているサイトもあるし、されていないサイトもある。それはサイトの管理者が、Twitterでの宣伝をどう考えているかによります。

 

でも、ブロガーはこの記述は絶対にやっておいた方が良いです。これは断言します。

 

なぜなら、サイトを見た誰かが「これはみんなにTwitterで共有しよう!」とせっかく思ってくれたとしても、もしこの記述が無ければ、ただのURLだけの記述になってしまうからなんです。

 

ブロガーにとって、もはやTwitterは必須のツールなので、Twitterカードのメタ情報が記述されていないのは本当にもったいないんです。

 

そもそも、なぜstorkではtwitterカードのメタ情報が記載されないのか?

今まで無料テーマ[simplicity」では表示されていたのに、なぜstorkでは表示されないのか?

simplicityをテーマにしていたとき、ほとんどSEO等を勉強していませんでした。特にSEO系のプラグインも入れてなかったんですね。

ただ、storkでは表示されていない。それについて調べてみると、販売元のOPENCAGEはこのように述べています。

OGPタグはテーマに関わらず、設定しておいたほうがいいタグになります。テーマによっては、OGPタグが最初から組み込まれているものもあります。
ですが、WordPressのテーマを近い未来に変更しようとしている場合、テーマの機能として利用していた場合、テーマを変更することで利用できなくなってしまう可能性があります。
反対にプラグインで設定をしていた場合、今後テーマを変更したとしても、次のテーマにOGPの機能がなかったとしても、過去記事を含めて設定し直す必要がありません。
これはSEOの設定(titleタグなど)も同じことで、テーマの機能として設定する箇所があるからといって、使っているといざテーマを変更したくなった場合に、その部分がネックとなって変更できなくなってしまうという問題が発生します。

WordPressはテーマを変更することで、見た目をガラッと変えることができるのがメリット(と考えやすい)となるので、そういった普遍的な設定はプラグインに任せた方が、今後の運用も考えると無難なのです。

引用:All in One SEO PackでOGPタグを設定する方法

 

つまり、プラグインの設定に任せているので、stork自体にはTwitterカードのメタ情報を記述するための機能はないということです。

テーマ自体の機能でツイッタカードのメタ情報を記述できるsimplicityなどを使用している場合、僕と同じ原因で表示されていないかもしれません。

 

Twitterカードのメタ情報の設定をするには?

では、具体的にどうすればTwitterカードのメタ情報が設定できるか説明します。

 

オススメのプラグイン:Yoast SEO

WordPressでSEO対策のためのプラグインといえば「All in One SEO」が有名だと思います。

ぼくも当初はこちらを利用しようと思ったんですが、このプラグインの設定が結構難しいんですよ。

色んな方が設定方法をブログで書いて頂いているんですが、最新バージョンでの操作方法ではなかったので、正直分からない部分もあったんです。

どうしようかなと思ったときに見つけたのがこのプラグイン。個人的にはこちらのほうが断然、操作しやすかったです。

 

Yoast SEOのインストールから各種設定までを行う

インストール方法から設定は、OPENCAGEのサイトが一番分かり易かったので、ぜひそちらを参照してほしい。

設定は15分くらいで終わります。

 

Twitterカードの申請

実は、Yoast SEO設定だけではTwitterでブログカードは表示されないんです。

Twitter側での申請が必要になる。といっても、ここまでくれば後は簡単!

 

Card ValodatorでURLを申請する

まずは、このサイトへアクセスしてください。

 

その後、①〜③に従って自分の記事をTwitterに投稿したら、どんな風に表示されるか確認します

card_validator

記事のURLは、一度表示させることが出来ればTwitter側にドメインが登録されるので、次回以降は不要だ。

 

GOAL:ブログカードが表示される!!

ここまでして初めてブログカードが表示される!おめでとう!!!

 

まとめ

この現象って「ブログにTwitterカードのメタ情報が記載されていないからだ!」って気付いて、どこを直せばよいかわかれば修正自体は30分かからないかもしれない。

ちょっと詳しい人にとっては、ちょちょいのちょいの修正かもしれない

でも、ぼくは原因を調べて修正するのに1日かかってしまった。ブログを1記事以上かけてしまう・・・・

もし、この記事が参考になって、僕と同じ現象に悩む人の助けになれば嬉しい限りです。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です