Blogger情報を発信します。今回はBloggerブログでTwitterカードを設定する方法です。
Twitterカードとは
Twitterカードとは、Twitterのツイートにリンクを貼った際に、ブログの『アイキャッチ』や『記事タイトル』などを掲載する機能です。
こんな感じです。Twitter初心者の私も設定したばかりですけどね。
では、早速設定方法を書いていきます。Web上には複数の設定方法が落ちてましたが、その中で成功した方法をご紹介します。私は５回くらいソースコードをいじる羽目になったので、皆さんは１回で成功するよう是非この記事をご活用ください（2021.2の情報です🙆）
Twitterカード設定方法
※この設定方法はBlogger用です。
まずは、ブログマイページの左上にあるハンバーガーメニュー『≡』⬅ ここをクリック。そしてメニュー内の『テーマ』をいじりにいきます。
テーマをタッチし、テーマ編集画面内にある『カスタマイズ』下の矢印をクリックします。
クリックするとメニューが開きますので、まずは万が一に備えてバックアップします。次に、『HTMLの編集』をクリック。すると、ソースコードが表示されます。
ここからは、初めていじる場合少し難しいかもしれませんが、これから書く手順通りに設定すれば問題無いはずです。
まずは、このソースコード（英語の羅列）中から「<head>」というワードを探します。
探すと言ってもかなり上部にありますので、直ぐに見つかると思います。
【参考】
この「<head>」の下に以下のコードを貼り付けします。
※分かりやすいように<head>の下を改行し、スペースを作っちゃってください。
―――――――貼付コード――――――
<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@Twitterアカウント' name='twitter:site'/>
<meta content='@Twitterアカウント' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<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 -->
―――――――――――――――――
以上が貼付するコードとなります。ただし、赤字の部分は適宜修正が必要です。
◆ summaryは、アイキャッチ（画像）のサイズとなります。大きな画像表示としたい場合は、そこをsummary_large_imageに変えてください。
◆ @Twitterアカウントは、ご自身のTwitterアカウントを入力してください。
◆ デフォルト画像のURLは、ブログ内に画像が存在しない場合に、ツイート内のアイキャッチ（画像）としてデフォルトで表示する画像のURLです。そのURLを入力すれば完了です。
これらの工程を終え、保存すればTwitterカードの設定は終了です。
画像のURLて何？となると思いますので、画像ファイルをURL化する方法も記載しておきます。
画像をURL化する方法
ブログに画像をアップロードして、HTMLビューで開きます。
ソースコードの中から「https〜〜〜〜.jpg」をコピーするだけです。
※jpgはpngの場合もあります。
設定が上手くいったか確認
最後になりますが、実際にツイートする前に、上手く設定が出来ているか確認しましょう。
以下のURLから確認出来ます。
アクセスして、ブログURLを入力しプレビュー。うまくTwitterカードが表示されればオッケーです。
一度設定すれば、記事毎に作業する必要はありませんので、Twitterをやっている方はぜひ設定してみてください。
今回のBlogger情報は以上です。また有益な情報がありましたら発信していきます。では、またお会いしましょう。
★アフィリエイトはこちら★
0 件のコメント:
コメントを投稿