[SNS共有]WordPressでTwitterカードを作成する方法
公開:2019.09.27 更新:2020.06.16

こんにちは、らいどらです。

最近のWebページにはSNS共有のボタンが必須ですよね。これ自体はプラグインでもコードを作っても実装することが出来ます。

実はTwitter用にちゃんと共有設定などをしてあげなければサムネの表示などはしてくれないです。

この設定のことをTwitterカードと呼びます。今回はこのTwitterカードの制作方法を、HTMLタグを使う場合とWordPressプラグインを使う方法の二通りに分けて解説していこうと思います。

metaタグでの実装方法

まずはmetaタグからの実装方法です。metaタグとは主にheadエリアに記述するもので、そのWebページの情報を伝える役割を持つタグです。

今回の場合はSNS共有をした場合の情報を記述してあげるということですね。

必要なmetaタグ文は6つです。

<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:site" content="@Twitterのユーザー名" />
<meta property="og:url" content="サイトURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="ディスクリプション" /> 
<meta property="og:image" content="画像URL" />

これを全て指定してやればTwitterカードを作成することが出来ます。

それぞれ属性値の[name][property]はそのままで良いので[content]の中身を適切なものにすればOKです。

解説ですが、下の4つは言わずもがなだと思います。どうしても分からなかった場合はすいません各自調べてください…….。

二番目Twitterユーザー名ですが、自分のTwitterアカウントのユーザー名(@から始まる英数字のやつ)をそのまま指定してあげれば大丈夫です。

赤線の部分の文字列

そして、問題なのは一番上の奴ですね。「カードタイプ」というのは表示させたいTwitterカードの大きさです。Twitterを使っている人ならばよく見かけるとは思いますが、ネット記事やブログの共有ツイートに表示されるカードタイプには二種類あります。

私が使っているカードタイプは大きい方です。どちらにするかはサムネの見栄えなどによって決めるといいでしょう。

実際の属性値としては[summary][summary_large_image]の二種類になります。後者が大きい画像が映る、私が使っているカードタイプになります。

お好きな方を選択してください。

WordPressプラグインを使った実装方法

metaタグを使った作成方法は理解できたと思います。

しかし、あくまで静的ページの方法ですからWordPressなどを使っている人には合わないでしょう。サイト自体の共有は出来ますが、個別記事も共有するにはいちいち、別途投稿記事のheadエリアにmetaタグを追記しなければなりません。

しかし、WordPressを使っている方ならとてもいい方法があります。

SEOで有名なプラグイン「All in One SEO Pack」を導入すれば、サイト本体のTwitterカードはもちろん、個別記事共有の際もTwitterカードの画像を該当記事のサムネに自動変更してくれます。

やり方は簡単で、「All in One SEO Pack」をインストール・有効化してタブの「ソーシャルメディア」欄から設定を行うだけです。

ソーシャルメディア欄が無い場合には、「機能管理」から「ソーシャルメディア」設定を有効にしましょう。

赤線で囲った部分がTwitter用設定になります。一番上の項目がカードタイプ。Twitterサイトとドメインは大体の場合、ほぼ同じ数値だと思うので画像を参考に入力してみてください。

これだけです。なんかmetaタグより楽なのに機能も高すぎでは……?

という訳で設定はこれで終了ですが、いざ試してみるとなると自分のアカウントでわざわざテストしなければならないんでしょうか?

答えはNOです。実はTwitterは公式がTwitterカードのテストページを運営してくれています。URL → https://cards-dev.twitter.com/validator

サイトに飛んだらログインした後で自サイトのURLを入力してあげればごく簡単にカードのテストを行うことが出来ます。

私は最初、言語不明なページだったので不安でしたがちゃんと公式のサイトでした。皆さんもパスワードなんて盗まれたら大ごとなのでやる前にチェックしてもいいかも。

それでは!

参考記事

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。