twitter

TwitterカードをWPプラグイン無しでSTINGER5ブログに設定する方法

投稿日:

TwitterCard完成

Twitterカードとは、Webサイトのリンクつきツイートをした時に

サイト内コンテンツを様々な形で表示させることができる機能です。

早速、どんな感じか見てみましょう。

Twitterカードを設定されていない場合

TwitterCard無し

Twitterカード設定後

TwitterCard有り

ひと目で違いが分かると思います。

どちらがクリックされやすいか?お分かりですね。

はてなブログなどには最初から実装されていますが、

WordPressブログだと自分で設定する必要があります。

STINGER5にプラグイン無しで設定したい

本サイトのテンプレートはSTINGER5です。

STINGERは極力プラグインを入れずに済むように設計されています。

せっかくなので、その特徴を最大限活かすべくプラグインを増やすのは避けたい。

こう考えるのは私だけではないはず。

WordPressSTINGER5プラグイン無しでTwitterカードを設定していきましょう。

Twitterカード実装までの流れ

Twitterカードの設定手順はざっくり以下の通りです。

TwitterCard手順

1.カードタイプを選択する

カードタイプは全部で7種類あります。

Summary Card

SummaryCard

今回適用するカードです。

一番よく見かけるタイプですね。

Summary Card with Large

SummaryCard-Large

画像が大きめのタイプです。

イメージで強く訴えかけたい時に使いやすそうですね。

Photo Card

PhotoCard

画像用のカードです。

Gallery Card

GalleryCard

複数枚の画像を、サムネイル形式で表示できるカードです。

App Card

AppCard

アプリケーションのインストールを促すことができるカードです。

Player Card

PlayerCard

動画を再生できるカードです。

Vineはこれを使ってたんですね。

Product Card

Productカード

最後は、商品紹介などに使えるカードです。

以上7種類のカードから選ぶことができますが、

今回は最初の「Summary Card」を設定していきます。

2.METAタグをブログに追加する

SummaryカードのMETAタグは以下に記載されています。

Summaryカード 

ですが、これだと値をベタ打ちしているので記事が変わると使えません。

WordPress用に、記事内容が変わっても正しく動くカスタマイズ方法が

どこかに載っていないか?検索します。

すると、Niji_Lifeさんが公開されていました。

※Niji_Lifeさん、ありがとうございます!

それを元に、以下のコードをheader.phpに追加します。(/headの手前です。)

色が変わっている部分は、ご自身のサイトに合わせて変更する必要があります。

8行目:サムネイル画像が無い時に代わりに表示する画像のURL。

16行目:サイトと連動させるTwitterのID。

3.検証ツールでテストする

METAタグを設置したら、正しく動作するかチェックします。

Cards Validator

しかし、エラーになってしまいました。

どうやら必須項目の「description」サイト説明の値が上手く取れていないようです。

WordPressに標準搭載されている「the_excerpt()」という機能がありますが、

それだと上手く情報が取れないようです。(私だけ?)

ここから苦労しました。

いろんな角度から解決の糸口を探りました。

そしてようやく、一つのサイトにたどり着きます。

KoToRi-blogさんです。※KoToRi-blogさん、ありがとうございます!

「the_excerpt()」をカスタマイズして下さっています。

こちらを拝借して、先ほどのMETAタグを以下のように変更しました。

※ KoToRi-blogさんのコードもfunction.phpに設定して下さい。

そして、再テスト。

うまくいきました!

テストが成功したら赤枠のボタンを押して申請をします。

screenshot_20141107_163037

申請画面はこんな感じです。

入力箇所を埋めて、申請しましょう。

screenshot_20141107_163130

これで作業は完了です。あとは連絡が来るのを待ちます。

screenshot_20141107_163752

連絡は先程申請時に入力したメールアドレスに届きます。

screenshot_20141107_164420

以上でTwitterカードの設定が完了しました。

お疲れ様でした。

みそごろうメルマガ

-twitter

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

favstarとは?TwitterでRTやふぁぼられた人気ツイートがチェック可能

Twitter関連の便利ツール、favstarの機能とネットビジネス的な使い道をご説明します。 favstarとは favstarとは、調査対象のTwitterアカウントがツイートしたつぶやきの中で、 …

twitterで大量凍結発生!9/2仕様変更か?原因と対象アカウントの傾向は

どうやら、2014年9月2日にtwitterで大量凍結が発生した模様です! あなたのアカウントは大丈夫でしたか?   私のアカウントから原因や凍結されたアカウントの 傾向を探ってみたいと思い …

フォローマティックXY活用のメリット!twitterで稼ぐ効果大な機能とは

Twitterのフォロワーを増やすには、地道な作業が必要です。   Twitterフォロワーを増やす!1万人獲得だ!自動で簡単な増やし方とは   この作業をほとんど自動化してくれる …

ツイッターフォロワーの増やし方!最初の100人までのアプローチ

「Twitterのフォロワーを増やしたいけど、増やし方がわからない。」 「アカウント作ってみたけど、どうやってフォロワーを増やすのか分からない。」 そんな初心者の方へ。まずはフォロワー100人目指して …

Twitterショートカットキー機能の使い方

私も最近まで知らなかったのですが、 Twitterにはショートカットキーの機能が備わっています。   Twitterを駆使してネットビジネスを行う場合には重宝しますので、ご紹介します。 &n …

プロフィール:みそごろう

元日立系のシステムエンジニア。
脱サラして東京から妻子と田舎へ。

自己投資に1000万円以上つぎ込み、ネットビジネスで起業を決意。
完全に0から月収10万→150万→そして今ではサラリーマンの年収をゆうに超える額の月収を稼ぐまでに。不動産収入など不労所得を増やす投資実践をしながら、田舎で家族と自由でストレス軽めな生活を送っています。

子供に仕事内容を堂々と話せる、健全なネットビジネスを第一に実践中。ネットビジネスや田舎起業のことでしたら何でも下記のフォームからご質問下さい。

実績

【ブログ】
月収:¥118,056

【メルマガ(情報発信)】
2015年
企画販売開始3分で完売。月収150万。
2016年
年収1000万以上。

【指導実績】
月収20万以上…3名
月収10万以上…7名
月収5万以上…多数
日給3万…妻

検索

follow us in feedly

・強力な媒体×100記事未満で月10万稼ぐ術
・3年間のノウハウコレクターから
 10万→150万と一気に駆け上がったワケ
・Yahoo!に掲載される良質メディアを作る術

これら全てを無料メール講座に登録して手に入れて下さい。500ページを超えるマニュアルもプレゼント中。