【SWELL】Twitterカードを表示する方法を解説!

当ページのリンクには広告が含まれています。
  • SWELLでTwitterカードを表示する方法を教えて!

上記のような疑問をお持ちの方の悩みを解決できる記事を書きました。

WordPress有料テーマSWELLを導入し、ブログ運営をしていく際に、ブログとSNSを同時に運用し、クリック率と拡散率を高めるためにTwitterカードの利用をお勧めします。

今回の記事では、SWELLでTwitterカードを表示する方法をわかりやすく解説しているので、最後まで目を通してくださいね。

目次

Twitterカードとは?

SWELLのTwitterカードとは、WordPressの有料テーマ「SWELL」を使って作成したサイトの各ページにTwitterカードを表示する機能のことを指します。

Twitterカードとは、Twitter上でリンクがシェアされた時に、リンク先のウェブページのタイトル、概要、サムネイル画像等の情報をまとめて表示する仕組みです。

Twitterカードを表示することで、リンクのクリック率や拡散率が上がるため、SWELLテーマでウェブサイトを作成する際にはTwitterカードの実装をオススメします。

Twitterカードを埋め込むメリット

ブログにTwitterカードを埋め込むメリットは以下の点があげられます。

  • Twitterでリンクをシェアした時にリッチな情報を表示できる
  • 記事のタイトルや概要、サムネイル画像が表示される
  • クリック率や拡散率が上がる
  • Twitterユーザーにコンテンツをアピールできる
  • Twitterとの連携でSEO効果が期待できる
  • SEO以外の集客を期待できる

ユーザーエンゲージメントを高めたいブログでは、ぜひTwitterカードを設定しておくことをオススメします。

少しの労力で大きな効果が期待できる便利な機能です。

SWELLでTwitterカード表示を設定する方法

ここからは、実際にSWELLでTwitterカードを表示する設定方法を解説していきます。

まずは、SWELLでTwitterカードを表示する際に、SWELL開発者が作った【SEO SIMPLE PACK】というプラグインをインストールしてから設定していきます。

SIMPLE SEO PACKプラグインで設定する

SWELLテーマを使っている場合、SEO SIMPLE PACKというプラグインを利用するとTwitterカードを簡単に設定できます。

設定方法は以下の通り。

1. SWELLテーマのダッシュボード【プラグイン・新規追加】から【SEO SIMPLE PACK】プラグインをインストール

2. 【プラグイン】の設定ページで【有効化】する

3. 【SEO SIMPLE PACK・OGP設定】【基本設定・Twitter】を設定していく

4. 各項目にサイトのTwitterアカウントやデフォルト画像などを入力

5. 【設定を保存する】で完了

以下で画像付きの解説をしていきます。

STEP
WordPress管理画面【プラグイン】【新規追加】をクリック、検索欄に【SEO SIMPLE PACK】を検索し有効化する
STEP
【プラグイン】【インストール済みプラグイン】の順にクリックし、【SEO SIMPLE PACK】を有効化する
STEP
【基本設定】画面でアイコン画像を設定する
STEP
【OGP設定】画面で【Twitterアカウント名】【カードタイプ】を設定する

Twitterカードには2種類あります。

1. Summary : タイトル、説明文、サムネイル画像が含まれる基本的な形式です。

2. Summary with Large Image : Summary Cardに大きな画像が追加されたバージョンです。

著者の場合、大きなTwitterカード表示が好きなので、【Summary with Large Image】を選択しています。

SEO SIMPLE PACKを使うとカード情報を自動で生成してくれるので、SWELLでのTwitterカード設定が簡単になります。投稿のカスタマイズも可能です。

プラグインとテーマの機能を併用することで、より効率的なTwitterカードの実装ができると思います。

カスタムHTMLを使ってTwitterを埋め込む方法

SWELLでのTwitterカードを表示する方法を解説します。

カスタムHTMLを使って埋め込む方法。

  • TwitterのURLを取得
  • ブログの埋め込みにコードを貼り付ける

TwitterのURLを取得

まずは、TwitterのURLを取得します。

STEP
Twitterを開き、【…】をクリックする
STEP
【</> Embed post】をクリックする

日本語バージョン【</> ツイートを埋め込む】

STEP
ページが飛び、URL欄の【Copy Code】をクリックしコピーする

TwitterのURLをコピーできました。

ブログの埋め込みにコードを貼り付ける

次に、ブロックエディターにURLを貼り付けましょう。

STEP
WordPressのブロックエディター【カスタム HTML】をクリックする
STEP
先ほどコピーしたURLを貼り付ける

表示内容を確認したい場合、【プレビュー】をクリックしましょう。

STEP
Twitterカードの貼り付けを確認

上記が、カスタムHTMLを使ってTwitterを埋め込む方法です。

1分でできるので、実際にやってみましょう。

まとめ

今回の記事では、Twitterカードを埋め込む方法を解説しました。

まとめです。

SWELLでTwitterカード表示を設定する方法

  • 【SEO SIMPLE PACK】プラグインをインストールする
  • ダッシュボードの【OGP設定・Twitter】より、設定を行う

Twitterカードには、2種類あります。

1. Summary : タイトル、説明文、サムネイル画像が含まれる基本的な形式。

2. Summary with Large Image : Summary Cardに大きな画像が追加されたバージョン。

HTMLコードを埋め込んで、Twitterカードを表示させる方法も解説しました。

  • TwitterのURLを取得
  • ブログの埋め込みにコードを貼り付ける

ユーザーエンゲージメントを高めたいブログでは、ぜひTwitterカードを設定しておくことをオススメします。

少しの労力で大きな効果が期待できる便利な機能です。

SWELL購入方法を知りたい方は、以下の記事を参考にしてください。

このフォームに入力するには、ブラウザーで JavaScript を有効にしてください。
Name

この記事はSWELLで書かれています

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次