![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
こんにちは、OBちゃんです♪
ここではブログとTwitterをリンクさせる設定方法について解説しています。
5分でできるので是非この機会にTwitterのリンクとTwitterカードの設定にトライしてみてね♪
- Twitterリンクボタンを機能させる方法
- Twitter カードを表示させる方法 Cocoon編
- Twitter カードを表示させる方法 SWELL編
ブログ基礎 とっても簡単Twitterとブログの連携
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/d2c4e8b54722b7ecdbcca586fce879f4-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/d2c4e8b54722b7ecdbcca586fce879f4-1024x538.png)
将来的にブログで収益を上げたいならSNSは必須と聞いてSNS嫌いだった私もブログ開設と同時にTwitterも始めました。
TwitterのSNSのハッシュタグやリプは聞いたことあるかな位の知識でTwitterを始めたので、Twitterとブログの連携など考えてもいませんでした。
気づかぬうちにアイキャッチがついた目立つお知らせに、ついつい毎回引き寄せられクリックしている自分。
実体験からもアイキャッチのついたツイートはクリック率が高くなることを感じ慌ててTwitterとブログの連携をしました。
二人の友人しか見ていなかった私のブログも、
Twitter でお知らせをするようになって驚くほど見てくれる人が増えました。
アイキャッチ画像をつけてブログの投稿をお知らせする効果は絶大、皆さんも是非試してみて下さいね!
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
それじゃ、やっていきましょ♪
Twitter URL設定
テーマ Cocoon 編
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/51af5da6c2a8f570e2388e3679c358b1-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/51af5da6c2a8f570e2388e3679c358b1-1024x538.png)
WordPress: ユーザー → プロフィールを選択。
TwitterのURLをコピペして変更を保存
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/profile-side-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/profile-side-1024x538.png)
サイドバーのプロフィールにあったTwitterリンクが機能しました。
テーマ SWELL編
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/d645cc4f77d7ce488668c0708ac06240-1-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/d645cc4f77d7ce488668c0708ac06240-1-1024x538.png)
外観 → カスタマイズ
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/65903475f790c6a793a036bf0d51e2d6-1-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/65903475f790c6a793a036bf0d51e2d6-1-1024x538.png)
SNS情報をクリック
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Twitter-URL-SWELL-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Twitter-URL-SWELL-1024x538.png)
TwitterページURLに貼り付け
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Twitter-URL-done-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Twitter-URL-done-1024x538.png)
Twitterカードの設定
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/30df1bb0a979b562b9583cf83fd88d67-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/30df1bb0a979b562b9583cf83fd88d67-1024x538.png)
Twitterでフォロワーに新規投稿のお知らせををする際に、ブログのリンクだけでは目立たず、せっかく書いた投稿に気が付いてもらえないなんて勿体無い!
Twitterカードを設定してブログに遊びにきてもらえるよう思い存分アピールしちゃいましょう♪
Twitterカードやアイキャッチは無料デザインツールのCanvaで簡単に作れます。
Canvaの記事で作り方を説明していますのでこちらも是非読んでみて下さいね♪
Twitterカードの設定をしていないと、トップページのデフォルトはこのような画像になっています。
Before
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/ad544e1c8f284134bcf4a61ce33b82b3-1.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/ad544e1c8f284134bcf4a61ce33b82b3-1.png)
After
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/017d9199fdba72fb4eb54e11dc85be9a-1.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/017d9199fdba72fb4eb54e11dc85be9a-1.png)
*トップページのOGPやTwitter Cardで表示する画像です。
オリジナルの画像をCanvaで作ったら早速設定してみましょう!
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
それではTwitterカードを設定していきますね!
Twitterカードの設定手順
Cocoon編
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/bc65ee1675db02e6fe3e57dde38e709c-1-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/bc65ee1675db02e6fe3e57dde38e709c-1-1024x538.png)
Cocoon設定→OGP設定で、Twitterカード設定までスクロールして下へ
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/3e505ffc75b17a330bae1d2ebd1aa0ba-1-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/3e505ffc75b17a330bae1d2ebd1aa0ba-1-1024x538.png)
Twitterカードタイプでサマリー 又は、大きな画像サマリーを選択し変更を保存します。
*トップページのOGPやTwitter Cardで表示する画像の設定
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/a006c8dcadde8f6c79fa5059cb72f57d-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/a006c8dcadde8f6c79fa5059cb72f57d-1024x538.png)
Twitter Card validatiorで検索し、ブログのURLを入れクリック。
Twitterカード画像が出てくれば設定成功です。ではブログのTwitterリンクから飛んで実際の画面を確認してみましょう。
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/017d9199fdba72fb4eb54e11dc85be9a-1.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/017d9199fdba72fb4eb54e11dc85be9a-1.png)
SWELL編
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/SEO-SIMPLE-PACK-1024x533.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/SEO-SIMPLE-PACK-1024x533.png)
SWELL開発者が作ったSEO SIMPLE PACKプラグインをインストールし有効化
- SEOに必要な基本的なメタタグを出力
- ページ種別ごとに設定可能
- FacebookやTwitterなどのSNSに必要なOGP情報の設定
- 投稿・ページ・タームごとにメタタグ情報のカスタマイズ
- Googleアナリクスやウェブマスターの認証コードの設定
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/SWELL-OGP-Setting-Twitter-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/SWELL-OGP-Setting-Twitter-1024x538.png)
SEO PACK → OGP設定
Twitter用のメタタグ→ はい
Twitterアカウント名を入力
カードタイプを選択
*カードタイプにはSummaryとSummary large imageがあります。
設定を保存する
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/SWELL-OGP-Setting1-1024x538.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/SWELL-OGP-Setting1-1024x538.png)
基本設定 → イメージのアップロード → 変更を保存する
大きい画像サマリー
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Card-validator-new-1024x533.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Card-validator-new-1024x533.png)
Twitter Card validatorで検索
Card URLにブログのURLを入れクリック。
小さいサマリー
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Card-Validator-small-1-1024x533.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/02/Card-Validator-small-1-1024x533.png)
Twitterカード画像が出てくれば設定成功です。ブログのTwitterリンクから飛んで実際の画面を確認してみましょう。
まとめ
いかがでしたか? 今回はTwitterURLの設定とTwitterカードの設定をテーマCocoon編とSWELL編に分けて紹介しました。
後回しになりがちなTwitterカード設定ですが、注目を集めるためにも早めに設定しておきましょう!
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
![](https://www.hitoridotambade-go.com/wp-content/uploads/2022/01/New-OBchan-White-1-150x150.png)
最後まで読んでくれてありがとうございました♪