【ブログ基礎】 とっても簡単 Twitterとブログの連携

OBちゃん

こんにちは、OBちゃんです♪

ここではブログとTwitterをリンクさせる設定方法について解説しています。

5分でできるので是非この機会にTwitterのリンクTwitterカードの設定にトライしてみてね♪

この記事の内容
  • Twitterリンクボタンを機能させる方法
  • Twitter カードを表示させる方法 Cocoon編
  • Twitter カードを表示させる方法 SWELL編
目次

ブログ基礎 とっても簡単Twitterとブログの連携

将来的にブログで収益を上げたいならSNSは必須と聞いてSNS嫌いだった私もブログ開設と同時にTwitterも始めました。

TwitterのSNSのハッシュタグやリプは聞いたことあるかな位の知識でTwitterを始めたので、Twitterとブログの連携など考えてもいませんでした。

気づかぬうちにアイキャッチがついた目立つお知らせに、ついつい毎回引き寄せられクリックしている自分。

実体験からもアイキャッチのついたツイートはクリック率が高くなることを感じ慌ててTwitterとブログの連携をしました。

二人の友人しか見ていなかった私のブログも、

Twitter でお知らせをするようになって驚くほど見てくれる人が増えました。

アイキャッチ画像をつけてブログの投稿をお知らせする効果は絶大、皆さんも是非試してみて下さいね!

OBちゃん

それじゃ、やっていきましょ♪

Twitter URL設定

テーマ Cocoon 編

STEP
ユーザーからプロフィール画面へ

WordPress: ユーザー → プロフィールを選択。

TwitterのURLをコピペして変更を保存

STEP
CocoonでブログとTwitterを連携できた

サイドバーのプロフィールにあったTwitterリンクが機能しました。

テーマ SWELL編

STEP
カスタマイズ

外観カスタマイズ

STEP
SNS情報

SNS情報をクリック

STEP
SNSリンク設定

TwitterページURLに貼り付け

STEP
SWELLでブログとTwitterを連携できた

Twitterカードの設定

Twitterでフォロワーに新規投稿のお知らせををする際に、ブログのリンクだけでは目立たず、せっかく書いた投稿に気が付いてもらえないなんて勿体無い!

Twitterカードを設定してブログに遊びにきてもらえるよう思い存分アピールしちゃいましょう♪

Twitterカードやアイキャッチ無料デザインツールのCanvaで簡単に作れます。

Canvaの記事で作り方を説明していますのでこちらも是非読んでみて下さいね♪

Twitterカードの設定をしていないと、トップページのデフォルトはこのような画像になっています。

Before

Twitterカード設定前

After

Twitterカード設定後

*トップページのOGPやTwitter Cardで表示する画像です。

オリジナルの画像をCanvaで作ったら早速設定してみましょう!

OBちゃん

それではTwitterカードを設定していきますね!

Twitterカードの設定手順

Cocoon編

STEP
OGP設定

Cocoon設定OGP設定で、Twitterカード設定までスクロールして下へ

STEP
Twitterカードタイプの選択と画像のアップロード

Twitterカードタイプでサマリー 又は、大きな画像サマリーを選択し変更を保存します。

*トップページのOGPやTwitter Cardで表示する画像の設定

STEP
TwitterのCard validatorでチェック

Twitter Card validatiorで検索し、ブログのURLを入れクリック

Twitterカード画像が出てくれば設定成功です。ではブログのTwitterリンクから飛んで実際の画面を確認してみましょう。

STEP
CocoonでTwitterカードが設定できた

SWELL編

STEP
SEO SIMPLE PACK

SWELL開発者が作ったSEO SIMPLE PACKプラグインをインストールし有効化

SEO SIMPLE PACK プラグインの説明
  • SEOに必要な基本的なメタタグを出力
  • ページ種別ごとに設定可能
  • FacebookやTwitterなどのSNSに必要なOGP情報の設定
  • 投稿・ページ・タームごとにメタタグ情報のカスタマイズ
  • Googleアナリクスやウェブマスターの認証コードの設定
STEP
OGP設定

SEO PACKOGP設定

Twitter用のメタタグはい

Twitterアカウント名を入力

カードタイプを選択

*カードタイプにはSummaryとSummary large imageがあります。

設定を保存する

STEP
基本設定

基本設定 → イメージのアップロード → 変更を保存する

STEP
Twitter Card Validatorでチェック

大きい画像サマリ

Twitter Card validatorで検索

Card URLブログのURLを入れクリック

小さいサマリー

Twitterカード画像が出てくれば設定成功です。ブログのTwitterリンクから飛んで実際の画面を確認してみましょう。

まとめ

いかがでしたか? 今回はTwitterURLの設定とTwitterカードの設定をテーマCocoon編とSWELL編に分けて紹介しました。

後回しになりがちなTwitterカード設定ですが、注目を集めるためにも早めに設定しておきましょう!

OBちゃん

最後まで読んでくれてありがとうございました♪

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次