BloggerでTwitterカードを使う方法メモ

2020年1月30日木曜日

PCメモ

t f B! P L

  1. 設定のとこからメタ タグを有効化する。
  2. テーマのhtml編集で/headの上の行にmetaタグをコピペ&編集して追記して保存する。
  3. Twitterのvalidatorで結果を確認する。

html編集のページはctrl+Fをすると検索窓が開いてそこに/headを入力すればすぐ案内されるから便利。

以下自分の場合のコード。
----------ここから-----------
    <!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@sam_mh' name='twitter:site'/>
<meta content='@sam_mh' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnI6axv3tBvI8MCk72qZhCRXvk_jmOm7uzIe8OtVBMYJjdRLRVkNcihxThyjkOOIaP6nZOmIkNjQlIqX7meKkwTrQP3gx4jWmVKM_CbHNz_Lf6-Yre5i21DknxUoFW_ydCl4yVuZ7YbCU/h120/Twittericon2019summer.jpg' 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とかデフォ画像URL)
画像URLはブログ用に一旦bloggerにアップロードして右クリック→画像のアドレスをコピーで貼り付ければおk。

Twitter validatorはこちら。
記事のURL入れてPreview card押すだけ。
https://cards-dev.twitter.com/validator

このブログを検索

QooQ