AFFINGER

【AFFINGER5】簡単にツイッターカードを表示させる方法

ライオンが遠くを見る

悩む学生
アフィンガー5を使っています。記事が完成したので、Twitterで記事を共有したいです。どうすれば、Twitterに自分の記事をアイキャッチ画像付きで表示させられますか?

 

今回はこんな悩みを解決します。

 

ブログをTwitterと連携させて、自分の記事を宣伝したいという人はいますよね。

 

ですが、アイキャッチ画像がうまく表示されなかったりして悩んでいる人も多いと思います。

 

そこで、今回はTwitterにうまく記事を表示させる(ツイッターカード)方法を紹介します。

 

ちなみに以下のツイートのように、きちんと記事を宣伝できるとTwitterからの流入も増えるので、ぜひマスターしましょう。

この記事を見れば、あなたのブログがTwitterで注目を浴びやすくなる方法も分かり、アクセスアップも見込めますよ。

 

それ以外にも知っておくべきことも載せてますので、ぜひ最後まで見てください。

 

アフィンガー5でツイッターカードをうまく表示させる方法

リサーチする人の図

 

結論、アフィンガー5なら非常に簡単です。

 

AFFINGER5管理SNSTwitter設定にいきます。

 

AFFINGER5のSNS設定

 

ここで、以下のように設定してください。

  • Twitterアカウント@:(自分のTwitterのアカウントを入力)
  • Twitterカードサイズを大にチェック

 

最後に保存して終了。

 

とっても簡単。
リットン

 

設定が完了できたら、念のために確認しておきましょう。Card Validatorというサイトに行きます。こちらも使い方は簡単です。

 

サイトのCard URLに自分の表示させたい記事のURLをコピぺしてPreview Cardをクリック。反映されるのに少々の時間がかかりますが、ほぼ問題なく表示されるはずです。

 

card validator

 

きちんと反映されているかのチェックが終われば、コピーしたURLをツイート画面に張りつけましょう。

 

アフィンガー5とツイッターカード関連で知っておくべきこと

ひらめいた女性

 

ツイッターカードの表示方法だけでは味気ないですし、ほかにも知っておくとよいことがあるので紹介しておきます。

 

アイキャッチの画像は1.911が理想

 

アイキャッチ画像に使う画像はツイッターカードのことを意識すれば、1.911が理想です。

 

理由は簡単で、ツイッターカードではそのサイズに切り取れられるから。

 

またGoogle砲に被弾する条件の1つに以下のものがあります。
(Google砲に被弾すると、Googleからおすすめ記事として紹介され短期的だが爆発的なPV増加が狙える)

 

魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。

出典:Google Discover フィードに掲載される

 

つまり横幅は1200pxかつ1.91:1の条件を満たす、幅1200px高さ630pxがアイキャッチ画像としては有効です。

 

もちろんGoogle砲を被弾したくない人は別にそのサイズに合わせなくてもかまいません。

 

ですが、ツイッターカードで表示されるアイキャッチ画像が見切れないようにするために、少なくとも1.91:1の比率は覚えておきましょう。

 

ちなみにこの辺りの話をこちらの記事でもっと深く話しています。

ブログで使う理想の容量とサイズは?【圧縮手順は簡単3ステップ】

 

ブログ記事内にツイートを埋め込む方法

 

冒頭のように、ツイートをブログ記事内に埋め込む方法を紹介します。

 

埋め込みたいツイートを見つけたら、右上の・・・をクリック。そしたら画面にコードが表示されるのでcopy codeをクリック。

 

SNS埋め込みのコード取得

 

記事編集画面に戻ります。記事編集画面に戻れば、ビジュアルエディタではなくテキストエディタの方に張りつけましょう。

 

プレビューで反映されてたら問題ありません。

 

悩む学生
人のツイートって勝手に埋め込んでもいいんですか?著作権とか怖いな。

 

結論、法的な観点では一切問題ありません。

 

法的には問題なしですが、個人的なクレームを言う人がいた場合はその埋め込みだけ消しましょう。

 

気をつけるべきなのが、ツイートをスクリーンショットで撮ってあげる場合は著作権的にNGとなります。なので、むしろ埋め込みを活用しましょう。

 

自分のTwitterのタイムラインをブログに埋め込む

 

次は自分のある特定の投稿だけでなくあなたのTwitterを丸ごと埋め込む方法を紹介します。

 

まずはhttps://publish.twitter.com/#にアクセス。

 

What would you like embed?(何を埋め込みますか?)の表記の部分にhttps://twitter.com/自分のアカウントの@を抜いたものを入力。

 

 what-wolud-you-like-embed

 

ぼくの場合はhttps://twitter.com/seichou_lyttonです。
リットン

 

「Embedded Timeline」のほうをクリック。set customization options.をクリックして自分好みに設定します。

SNS埋め込みの設定

 

設定項目は下記のとおり。

 

  • 高さ→目安400500
  • 横幅→目安300400
  • 色→黒か白をお好みで
  • 言語→Automaticで問題ありません

 

設定が完了すれば、updatecopy codeをクリックして、あとは先ほどのTwitterの埋め込みと同じく、テキストエディタに張りつけしましょう。

 

ちなみに、このタイムラインの埋め込みをサイトのフッターやサイドの部分に埋め込みたい場合の大まかな流れだけ解説すると以下のとおり。

 

サイドに表示させる方法

WordPressの管理画面にいき外観ウィジェットへ進んでください。

 

00_STINGERカスタムHTML(もしくはカスタムHTMLでも可)をサイドバーウィジェットへドラッグ。そのあとカスタムHTMLに先ほどのコードをコピペして完了です。

 

フッターの場合は、ドラッグ先をサイドバーウィジェットの部分からフッター右用ウィジェットなどに変更すればOKです。

 

分かりにくければ、以下の記事を参考にしてみてください。写真付きで解説してます。

AFFINGER5のサイドバーカスタマイズ方法【写真付きで解説】

AFFINGER5のフッターのカスタマイズ方法【誰でもできる】

 

1つ注意点としては、Twitterのタイムラインを入れるとサイトが非常に重くなるということ。

 

ぼくも以前は入れていましたが、消してからpage speed insightベースで6点向上しました。あまりいれなくてもいいのではないか、というのが個人的な意見です。

 

アフィンガー5とTwitterをうまく連携させてpvアップに利用しよう

ヒーローが空を飛ぶ

 

今回は前半にツイッターカードの表示方法、後半にアフィンガー5Twitter関連で知っておくべきことを紹介しました。

 

アフィンガー5なら非常に簡単にツイッターカードを表示できますので、記事を更新したときはぜひTwitterで宣伝しましょう。

 

うまく宣伝できれば、pv増加も見込めますよ。今回は以上です。ありがとうございました。

 

関連記事AFFINGER5は初心者におすすめできる?【嘘なしでレビュー】

-AFFINGER

Copyright © Lytton Blog