サイト作成

twitterに画像付きで記事を投稿したい!ツイッターカードの設定

2018年6月3日

twitterに画像付きで記事を投稿したい!ツイッターカードの設定

 

皇帝ヘプタ
ツイッターに画像付きで投稿するにはどうすれば良いのじゃ?

ツイッターでアイキャッチと一緒に投稿出来れば、文章だけの投稿より見栄えが良いですよね。

ちなみに、あの画像付きの記事投稿は『ツイッターカード(twitter card)』と言うそうです。

リンクカード、記事カード、ツイッターカード・・・画像付きの四角いものはカードになるんですね。

ツイッターの標準仕様かと思っていたのですが、普通にツイートするだけでは表示されません

私もあのカード表示に憧れて、設定方法を探してみました。

一番簡単なツイッターカードの設定方法を探してみた!

ツイッターカードの設定をする方法

テーマの設定項目に、ツイッターカード設定があるか確認!

ワードプレスのテーマによっては最初から設定項目が用意されているものもあります。

私が今まで購入した有料テーマの中では、『スワロー』は設定されていないので対策が必要です。

『SANGO』はすでに設定済、『WING(AFFINGER5)』はテーマ内でツイッターカードの設定が可能です。

 

AFFINGER5(WING)のツイッターカード設定

「AFFINGER5管理」→「SNS」の項目の一番下にtwitter設定があります。

設定方法

  1. twitterアカウントの@以下を入力して更新。
  2. 表示したい記事URLを『Card Validator』のCard URL欄に入力して、右側にカード表示されればOKです。

また、サイトURLそのものをツイッターに投稿した時の画像は、twitter設定の上にある

投稿・固定ページ以外のアイキャッチ画像(トップページ含む)※200×200px以上(8MB以下)

に画像をアップすることで設定できます。

 

プラグインなしでツイッターカードの設定をやる方法は?

最初にこれならいけるかも?と思ったのはプラグイン不要の方法。

コピペならさくっと終わるかもと期待したのですが、テーマのカスタマイズがあります。

失敗した時が怖い初心者なので他の方法でだめだったら試そうとそっと閉じました。

テーマのカスタマイズが得意な方は下のサイトさんが参考になりますよ♪

おすすめ参考サイト

 

プラグイン『Twitter Cards Meta』もツイッターカードの設定ができる!

ツイッターカードのプラグインとしては『Twitter Cards Meta』というプラグインが見つかりました。

しかし設定が英語のようです。

英語、得意ではないんですよね・・・。

出来れば日本語で分かりやすいものが希望なのです。

日本語対応の簡単なプラグインを探しに再び検索へ。

 

ツイッターカードの設定ができる日本語対応プラグイン

ツイッターカードの設定ができるプラグイン

次に見つけたのが『All in One SEO』というプラグインでtwitterカードの設定をする方法。

これなら日本語なのでなんとかなりそうです。

 

All in One SEOでツイッターカードの設定をする

まずはインストールして有効化すると、ダッシュボードの下に『All in One SEO』の選択肢が増えます。

『機能管理』で『ソーシャルメディア』をクリックすると、その選択肢の中に『ソーシャルメディア』が増えます。

『画像設定』の項目で『Featured Image』(アイキャッチ画像)を選択。

『twitter設定』の項目

  1. デフォルトtwitterカード→要約の大きい画像
  2. twitterサイト→ツイッターの『@から下の部分』を記入
  3. twitter 投稿者→レ点を入れる
  4. twitter ドメイン→自分のサイトの『http://』や『https://』を抜いたサイトアドレスを記入
  5. 最後に一番下の『設定を更新』を押したら『All in One SEO』の設定は一旦終了です。

 

ツイッターカードが表示されるか確認しよう

『Card ValidatorでツイッターIDとパスでログインし、Card URLの下の四角い枠に、自分のサイトの記事のURLを一つ入れてみましょう。

画像の反映にはタイムラグがありますが、ここで『successfully』のログが出ればOKです。

その後は普通に記事のURLをツイートすると、ツイッターカードが表示されます!

 

まとめ

皇帝ヘプタ
これでいつでも画像付きでツイートできるのぅ

ツイッターカード設定だけならプラグインで意外と簡単にできました。

テーマによってはすでに設定されているものもあるので、それを選ぶのもポイントかもしれません。

AFFINGER5では必要な設定がテーマ内でできるため、現在『All in One SEO』は使用していません。

他のテーマを使用している方なら、検索画面で自分のサイトがどのように表示されるかの設定や、サイトマップの作製なども一緒にできて便利だと思います。

-サイト作成
-

Copyright© ペンギン帝国 , 2019 All Rights Reserved.