$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

BloggerにTwitter Cardsを設定する方法


Bloggerは、基本機能がしっかりしています。無料ブログでありながら、カスタマイズも柔軟に行うことができ、機能拡張することができます。しかし、WordPressでほぼ標準で装備されているTwitterカードやFacebookのOpen Graph機能などの設定はマニュアルで行う必要があります。

本記事では、ブログを活用する上で役立つTwitterカードの設定方法を紹介します。
[post_ads]

Twitter Cardsとは

ブログ記事の下にあるTwitterの共有ボタンを押してツイートを投稿したり、TwitterのツイートにURLを貼ると、記事のサムネイル画像、タイトル、概要説明(スニペット)、サイトURLがツイートに加わえて表示する機能です。

以下はTwitter カードを使用したツイートの表示例です。
Twitter カード (Cards) を設定すると、サイトや記事の紹介をTwitterで簡単かつ効率よく行うことができます。記事のサムネイル画像やタイトル、スニペットなどが表示されるため、ユーザーエンゲージメントの向上につながりやすい効果があります。

Twitter Cards の種類

現在サポートされているTwitterカードは以下の4種類です。
  • サマリーカード:タイトル、説明、サムネイル画像
  • 大きな画像付きサマリーカード:サマリーカードと同機能で大きな画像が表示されます。
  • アプリカード(App Card):モバイルのアプリを直接ダウンロードできます。
  • プレイヤーカード:ビデオ、オーディオ、メディアを表示するカードです。

Twitterカードの導入手順

ブログやウェブページにTwitterカードを導入する大まかな手順は以下の通りです。

  1. カードの種類を選ぶ。
  2. ページに適切なメタタグを設定する。
  3. バリデーターツールにページのURLを入力して、動作テストを行う。
  4. 実際にツイートにURLを貼り付けて投稿する。

BloggerにTwitterカードを設定する手順

Twitterカードをブログやウェッブページで使用する場合は、サマリーカードか大きな画像付きサマリーカードのどちらかを選びます。どちらを選ぶかは、サイト運営者のお好みとサイトのコンテンツの種類などによります。

テキストが中心のコンテンツの場合は前者、魅力的な画像を使用している場合は後者などを選ぶのも一案です。両方試して選ぶのもよろしいかと思います。

Blogger テンプレートにTwitterカードを設定する

以下の手順で設定します。

1. Bloggerの管理メニューから[テーマ]をクリックします。
2. テーマを編集する前にバックアップを行います。
3.[HTMLの編集]ボタンを押します。


4. テンプレートのコードが表示されます。コードが表示されている枠内のどこかをクリックして、[コントロール + F](マックの場合は、コマンドと”F"キー)を同時に押すと、枠内上部に検索ボックスが表示されます。

5. "/head"を入力して検索します。

6. </head>  の上に以下のコードを追加します。
<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@で始まるTwitter ID' name='twitter:site'/>
<meta content='@で始まるTwitter ID' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
      <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:else/>
      <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
      <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:else/>
      <meta content='デフォルト画像のURL' name='twitter:image'/>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>

<!--END Twitter Card -->
上のコードで、「@で始まるTwitter ID」(Twitterアカウント名)を入力して下さい。

デフォルト画像のURL」は、記事に画像が含まれていない場合に使用する画像です。サマリーカードか大きい画像付きサマリーカードにあったサイズの画像のURLを使用します。
備考:
デフォルト画像を設定していないと、ホームページのURLをツイートに添付した時に画像が表示されません。デフォルト画像を設定することをお勧め致します。
デフォルト画像を設定していない場合と設定後のツイート表示の違いを添付します。 以下は、BloggerのテンプレートファイルにTwitterカードの設定コード(画面赤枠内)を貼り付けた状態です。

設定内容を確認後、[テーマを保存]のボタンを押します。

以上で設定作業は完了です。

Twitterカードの表示テストを行う

Twitter Cards Validatorのページを表示します。Card URLの欄に設定を行なったBloggerの記事ページのURLを入力します。(どのページでも構いません)続いて、URL入力欄の下の"Preview card"のボタンを押します。

設定が適切に行われていれば、右側に入力した記事ページURLのTwitterカードがプレビューで表示されます。

Card validator での表示テストは、記事ページとホームページの両方で確認することをお勧め致します。

以下は、ホームページのURLを入力してテストを行なった結果です。ホームのURLでは、Twitterカードの設定コード内で指定したデフォルト画像が表示されています。

以上で作業完了です。

コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : BloggerにTwitter Cardsを設定する方法
BloggerにTwitter Cardsを設定する方法
Bloggerは、基本機能がしっかりしています。ブログを活用する上で役立つTwitterカードの紹介とBloggerでの設定方法を紹介します。
https://1.bp.blogspot.com/-p9W73n4J8mk/WvxMVG4eZ6I/AAAAAAAACkY/MHrcivWbDRgkE6rmsYNY8IJB97uLq4vXgCK4BGAYYCw/s640/Set%2Bup%2BTwitter%2BCards%2Bin%2BBlogger.png
https://1.bp.blogspot.com/-p9W73n4J8mk/WvxMVG4eZ6I/AAAAAAAACkY/MHrcivWbDRgkE6rmsYNY8IJB97uLq4vXgCK4BGAYYCw/s72-c/Set%2Bup%2BTwitter%2BCards%2Bin%2BBlogger.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/01/setting-up-twitter-cards-on-blogger.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/01/setting-up-twitter-cards-on-blogger.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy