Blogger新デザインでのTwitterCardの設定方法

TwitterCardをご存知ですか？

この赤線の部分のことです。

これはURLリンクをイメージで出しているものですが、サイト側で設定が必要です。

これをGoogleのBloggerで表示できるようにします。

□■□■□

Bloggerは、どこのタイミングかは分からないんですがデザインが新しくなりました。

このデザインでTwitterCardを設定する方法の記事が少なかったので、紹介します。

まず、Bloggerの管理画面を表示します。

左のメニューからテーマを選びます。

テーマ画面が表示されたら、右上の点々を押します。

点々を押すとメニューが出るので、HTMLを編集を押します。

そうすると、HTMLが表示されます。

ここに、記述を行います。

書く場所は、</head>タグの上です。

ここに赤枠の文字を追加します。

コピペ用に以下にも用意しました。

<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@K344Left' name='twitter:site'/>
<meta content='@K344Left' 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/AVvXsEjCbiyHKkaEQSw1eMhwq7zy2SyLPB0Tk94MMhnlMFxcJ2YmskOsk-ze58-CsT6D0GN9bVnMx__SgVUbSWKBBI-2LFY7LAA9uoe6CmNky3Mr0YVm_Ey3wxNzxFJKypZu6mGREx-qFyjnTP0/s113/%25E3%2582%25A2%25E3%2582%25A4%25E3%2582%25B3%25E3%2583%25B3.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を書きます。

下は、TwitterCardの画像のURLを書きます。

そしたら、右下の保存ボタンを押します。

これでしばらくすると、TwitterのURLがTwitterCardになります。

□■□■□

というわけで、TwitterCardの表示方法を紹介しました。

Bloggerのデザインが新しくなって色々なツールの場所が分からなくなってしまいましたが、そのうち慣れると思います。

以上！