WordpressのTwitterカードの導入方法わかりにくすぎ!All in One SEOで導入成功したのでわかりやすく説明します。 |

WordPressのTwitterカードの導入方法わかりにくすぎ!All in One SEOで導入成功したのでわかりやすく説明します。

注目記事

コードとか面倒くさいしわかりにくい!

ワードプレスで作成しているブログのツイッターカードの導入方法について調べるとどのサイトも長ったらしいコードを紹介して「コピペするだけ!」とは言うものの

長文のコードの中の一部を自分で書き換えないといけなかったり、どんな風に書き換えるのかも説明が不十分でなんかよくわからん!

半日試行錯誤して調べ上げた結果、プラグイン「All in One SEO」で簡単に導入ができたのでひとつずつ丁寧に説明していきたいと思います。

Facebookの管理者IDとアプリIDを確認する

今回の目的はツイッターカードの導入ですが、どうやらFacebookの管理者IDアプリIDが必要のようなのでまずこちらを確認します。

管理者IDの確認の仕方

Facebookの自分のアカウントのプロフィール画像を表示します。

そのときのURLの最後の「&type=3&theater」「.(ドット)」の間の15文字の数字が管理者IDです。

アプリIDの確認の仕方

https://developers.facebook.com/appsにアクセス

既に登録しているので下のような状態になっていますが、最初に登録するときでも右側の緑のボタンがあるはずなのでそこをクリック

クリックすると下のような画面が出てくるので何でも良いので表示名とメールアドレスを入力し作成

文字列を入力して送信

次のようなページが表示されるので左上のアプリIDをメモしておく

プラグイン「All in One SEO」の導入と設定

インストールまで

ダッシュボードのプラグインをクリック

新規追加をクリック

キーワードに「All in One SEO」と入力して左にでてきた「All in One SEO」を「今すぐインストール」して「有効化」

ダッシュボードのバーに「All in One SEO」が追加されます

設定手順

「All in One SEO」にカーソルを持っていき、でてきた中の「機能管理」をクリック

でてきたページの「ソーシャルメディア」をクリックして黒い状態から青い状態にします。

「All in One SEO」内の「ソーシャルメディア」をクリック

ホームページの欄は一番上のチェックボックスにチェックし、サイト名とサイトのトップ画像をアップロード

画像設定は画像の通り。

スポンサーリンク

ツイッターのタイムライン上で表示される画像をアイキャッチ画像にするか、記事の中の最初の画像にするかもしくはその他にするかを選べます。

ソーシャルプロフィールリンクは空欄にしています。

Facebook設定で先ほど確認した「管理者ID」と「App ID(アプリID)」を入力
ブログと投稿のチェックボックスにチェック

Twitter設定はこんな感じ

Twitterサイトの欄は自分のツイッターアカウントの「@○○○」

Twitterドメインは「@○○○」の「@」を抜いたやつ

詳細設定は一番下のチェックボックスにチェックをいれ「設定を更新」

Card validatorで記事を登録する

あとはツイッターカードを作りたい記事を「Card validator」で登録するだけです。

https://cards-dev.twitter.com/validatorにアクセス

任意の記事のURLをコピーして左の欄にペーストする

成功すると右側に画像つきのプレビューが表示されます

※「画像が見つからない場合はデフォルトを使用」にチェックを入れている場合は、他に画像を設定してから登録しないとデフォルト画像のまま登録されてしまうのでご注意ください。

自分のツイッターページで正常に表示されているか確認する

これは一つ一つの記事を登録しないといけないようなので少し面倒です・・・。

※この記事を投稿後、この記事のURLを登録しようとしたらエラーになったので投稿してすぐは登録ができないかもしれません。もしエラーになるなら投稿してから数分後に再度やってみると良いかもしれません。
加えてツイッターのタイムライン上で反映されるのも少し時間がかかるようです。なんどか更新してみてください

もしエラーになるなら

僕もいろいろ試しすぎてなにがどう作用しているか把握し切れていないのですが、この方法以外で試したうち以下のコードだけ残しているのでもしできなければこのコードを入れてみてください。

外観の「テーマを編集」をクリック

テーマヘッダーをクリック

〈head〉と〈/head〉の間に以下のコードを挿入

<meta name="twitter:site" content="@Twitterのユーザー名">
<meta name="twitter:card" content="summary">

まとめ

半日潰した買いあって非常に見栄えの良いツイートになりました。

これからのアクセスアップが期待そうです。

他にもアクセスアップが期待できそうなものがあれば貪欲に取り込んでいきたいと思います。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする