WordPressテンプレートでオシャレで機能的な『TCD』テンプレート。

実際に私のサイトもTCDテンプレートを利用しています。

TCDテンプレートが凄いと思う部分が『OGP(Open Graph protocol)』や『Twitterカード』をコードを挿入することなく、1クリックで超絶簡単に設定が出来きる所です。基本的に最近のTCDテンプレートだと実装されている機能なんだとか。

分かってしまえば簡単ですが、最初は迷うと思います(笑)

また、ボタンを1クリックで『Twitterカード』を作成できますが、デフォルト状態だと画像の表示が小さいです。なので、ボタン1クリックで『Twitterカード』が出来る実装機能を活用しながら、画像の大きさの表示種類を簡単にカスタマイズできる方法を解説していきます。

TCDは『OGP』と『Twitterカード』が簡単に設定できる!

最近のテンプレートTCDは『OGP』と『Twitterカード』が簡単に設定できるんです。

その前に簡単に『OGP』と『Twitterカード』を簡単に説明すると。

SNSでブログ記事をシェアした時に、アイキャッチ画像・タイトル・記事概要を綺麗に正しく表示してくれます。

 

 

TCDの『OGP』と『Twitterカード』の設定方法を解説

テンプレートTCDの『OGP』と『Twitterカード』の設定方法を解説していきます。

『OGP』の設定方法を解説

ダッシュボードの『外観』から『TCDテーマオプション』をクリック。そして『基本設定』をクリックして下にスクロールすると『Facebook OGP設定』があります。そこで『OGP』設定を行います。

 

 

OGPを利用する:チェックを入れてください。

fb:admins ID:IDを数字で入力してください。

※自身のfb:admins IDの調べ方ですが、Facebookにログイン後にマイページに移行してマイページURLをコピーしてください。そして、  https://findmyfbid.com/ に移行してマイページURLを貼り付けるとfb:admins IDが表示されます。

画像を選択する:SNS上でシェアした際に画像が存在しない記事の場合のアイキャッチ画像を選択できます。

設定を保存:忘れずに設定を保存をクリックしてください。

以上で『OGP』の設定は完了です。

『Twitterカード』の設定方法を解説

『Facebook OGP設定』の下に『Twitter Cards』設定があります。

 

Twitter Cardsを利用する:チェックを入れてください。

あなたのTwitterアカウント名:@マーク移行の英数字を入力してください。

設定を保存:忘れずに設定を保存をクリックしてください。

これでTwitter Cardsの設定は完了です。SNS上でブログ記事をシェアした際には、アイキャッチ画像・タイトル・記事概要が綺麗に表示されます。

『Twitterカード』画像の表示種類について

『Twitterカード』には画像表示の種類があります。それについて少し解説します。

『Twitterカード』種類:『Summary Card』

先程の設定(※TCDテーマオプション)で表示されるTwitterカードの種類は『Summary Card』です。

画像の大きさはこんな感じ、スタイリッシュで画像も小さめです。なので、画像よりはタイトルや概要をしっかりと準備する必要があります。

 

 

『Twitterカード』種類:『Summary Card with Large Image

本記事の冒頭のTwitterカードの例に使用した種類は『Summary Card with Large Image』です。

画像の大きさはこんな感じです。『Summary Card』よりも画像が大きくスタイリッシュ感はやや劣りますが、写真のインパクトを強くできます。私はこちらのTwitterカードにしています。

 

 

Twitterカードには他にも種類がありますが、ブログや一般的なサイトであれば『Summary Card』か『Summary Card with Large Image』です。

一概にどちらが良いとは判断できませんので、自身の運営するブログやウェブサイトのイメージに合うTwitterカードを選択しましょう。

テンプレートTCD|『Twitterカード』種類のカスタマイズ

テンプレートTCDの『Twitterカード』種類のカスタマイズを解説していきます。

まず、『TCDテーマオプション』の『基本設定』で『Twitter Cards設定』を行った場合は、設定を解除してください。

Twitter Cardsを利用する:チェックを外してください。

あなたのTwitterアカウント名:アカウント名を削除してください。

設定を保存:忘れずに保存してください。

 

 

続いて『ダッシュボード』の『外観』から『テーマ編集』をクリックしてください。そして『テーマヘッダー (header.php)』を選択して<head>から</head>の間に下記コードを挿入してください。

 

 

Twitterアカウント部分に@マーク以降の英数字を入力してください。これでカスタマイズが完了です。

出来上がりを確認したい場合は、 https://cards-dev.twitter.com/validator にブログ記事URLを入力するとTwitterカードの表示方法を確認できます。

これで『Summary Card』ではなく、『Summary Card with Large Image』でSNS上でシェアすることができます。

最後に

WordPressのTCDテンプレートのTwitterカードの設定方法を解説しました。

TCDテンプレートの実装機能で『OGP』や『Twitterカード』の設定は簡単にできるので、ありがたいですね!またカスタマイズも簡単にできるのも助かります。

これでSNSで気兼ねなくシェアすることが出来ますね!

OTHER POSTS