TwitterとWordPressの連携方法 SANGOでSummary Cardを設定する方法も解説

SANGOでTwitterとWordPressの連携方法について説明します。

連携する上での注意点、Twitterカードの種類の変更方法(Summary Card with Large Image → Summary Card )についても解説します。



Twitterにサイトを登録する

まずはTwitterに自分のサイトを登録します。

自分のアカウントで「プロフィール」→「プロフィールを編集」をクリックします。

ウェブサイト」に自分のサイトのURLを貼り付けます。

「保存」をクリックします。

以上でTwitterでの設定は完了です。

WordPressでTwitterの設定をする

TwitterでWordPressのブログの記事のURLを貼り付けた際に、何も設定していなければそのままURLのリンクが表示されます。

しかし、WordPressでTwitterの設定をしておけば、「Twitterカード」というおしゃれな表示をすることができます。

Twitterカードについては下記のサイトがわかりやすいので参考にしてください。

設定方法についても記載されていますが、SANGOでの設定方法についてはこの記事の方が分かりやすいです。

SANGOではTwitter関連の設定は基本必要ない

SANGOでは、初期設定でTwitter関連の設定をしてくれています。

ブログ記事のURLをツイッターに張り付ければ、Twitterカードを表示してくれます。

ただし、いくつか追加でしておいた方が良い設定と注意点があります

「All in One SEO Pack」はSANGOでは非推奨

ネットで「TwitterとWordPressの連携方法」や「Twitterカードの使い方」を検索すると、多くがプラグインの「All in One SEO Pack」を使用した方法が紹介されています。

ただし、SANGOでは上記で書いたように初期設定でTwitter関連の設定をしてくれており、「All in One SEO Pack」は初期設定と機能が被っていてサイトが重くなる原因になるので非推奨とされています。

以下は、SANGO公式のツイートです。

「All in One SEO Pack」とSANGOの相性 については、下記のページを参考にしてください。

【SANGOとの相性を解説】WordPressにおすすめのプラグイン13選

やっておいた方が良い設定

デフォルトのサムネイル画像

アイキャッチ画像が未登録の場合に代わりに表示する画像を設定しておきます。

Twitterカードにはアイキャッチ画像が表示されます。

アイキャッチ画像を設定し忘れた時のために設定しておいた方が良いです。

注意点としては、画像サイズは幅600px以上、高さ310px以上を登録します。

設定場所

WordPressの管理画面から、「外観」→「カスタマイズ」→「サイトの基本設定」→「デフォルトのサムネイル画像」。

トップページのOGP画像

TOPページがTwitterやSNSでシェアされた時に表示される画像を登録します。

未登録の場合は、上記の「デフォルトのサムネイル画像」が表示されます。

設定場所

WordPressの管理画面から、「外観」→「カスタマイズ」→「サイトの基本設定」→「トップページのOGP画像」


SANGOでは上記以外にもやっておいた方が良い基本設定がありますので、以下の記事を参考に設定してみてください。

SANGOでおすすめの3つの基本設定 【追従する目次がおすすめ】

Twitterカードの表示を確認する

ここまでで、Twitterカードに関する設定は完了したので、下記のサイトで見た目を確認してみてください。

Twitterの公式サイトで、ツイートがどのような見た目で表示されるかをプレビューできます。

使い方は簡単で、下記の赤枠内に記事のURLを貼り付けて、「Preview card」を押します。

下記のように、プレビューが表示されます。

上記のようにTwitterカードが表示されていれば、自分のTwitterに記事のURLを貼り付ければ上記のような表示で投稿できます。

「Summary with Large Image」→「Summary Card」に変更する

SANGOの初期設定では、Twitterカードは下記のような大きい画像で表示される設定(Summary with Large Image)になっています

Summary with Large Image

これを下記のような小さい画像(Summary Card)に変更するためには、設定を変更する必要があります

設定場所

WordPressの管理画面から、「外観」→「カスタマイズ」→「詳細設定」→「headタグ内にコードを挿入」

上記のように、下記のコードを貼り付けて、「公開」をクリックします。

<meta name="twitter:card" content="summary">

以上で設定は完了です。

上記で説明したプレビュー確認サイトで、Twitterカードが変更されていることを確認してください。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


検索

アーカイブ

プロフィール

プロフィール背景画像
プロフィール画像

チャベス

1989生まれ、機械機器メーカーで研究開発をしている機械系エンジニアです。 業務効率化や日々の生活を効率化できるプログラミングネタを発信しています。PythonとNotionとSANGO(WordPress)が特に好きです。 詳細プロフィールはこちらnoteにNotionの記事も書いています。

WP-Searchにサイト事例として掲載されています。