Twitterカードに画像が正常に表示されない不具合の修正報告
当サイトのテンプレートについて、コメント欄で「Twitterカードに画像が表示されない」という不具合報告をいただきました。そこで、自分なりに調べてみたところ、指摘された不具合を解消することができたので ここで修正報告をさせていただきます。
なお、この記事の内容はBloggerのTwitterカード設定として他のテンプレートにも使えるものだと思われますので、もし、同様の不具合が起こっているテンプレートをお使いの方は、以下の方法を試してみると直すことができるかもしれません。
検証と解説
変更前の設定
<!-- OGP設定 -->
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
<!-- og:image -->
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<meta expr:content='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url' property='og:image'/>
<b:else/>
</b:if>
<!-- Twitterカード -->
<meta content='summary_large_image' name='twitter:card'/>
<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'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<!-- 自分の画像URLに変更する -->
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgI6nXrtnj9-Ys6pxuVvQUeYJcTaFA1WkFH1z9HwQVd_vnNc-hXoZXA0bgwYc9h4JGr75eBXx3tiucH9ahU5ILLH6fHhPKZrgvrV85kVBEaWMTQJjlg6aOBkjeJZVO2y_9fT6lDCDJJZk/s1600/blogger.png'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='Image URL' name='twitter:image:src'/>
</b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
上記が変更前のOGP設定のコードです。この設定の場合に各ページのTwitterカードを生成してみたところ、以下のような結果になりました。なお、この検証はTwitterの「Card validator」で試験しています。
変更前の画像の表示状況
・個別記事ページ（Bloggerにアップした画像あり）：アイキャッチ画像が表示される
・個別記事ページ（Blogger以外にアップした画像あり）：画像表示なし
・個別記事ページ（画像なし）：画像表示なし
・固定ページ（Bloggerにアップした画像あり）：<!-- og:image -->で設定した代替画像が表示される
・固定ページ（Blogger以外にアップした画像あり）：<!-- og:image -->で設定した代替画像が表示される
・固定ページ（画像なし）：<!-- og:image -->で設定した代替画像が表示される
・インデックスページ：最新記事のアイキャッチが表示される
アイキャッチ画像のある個別記事ページ以外は正常に表示されない模様です。
修正後の設定
<!-- OGP設定 -->
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
<!-- og:image -->
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<meta expr:content='"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url' property='og:image'/>
<b:else/>
</b:if>
<!-- Twitterカード -->
<meta content='summary_large_image' name='twitter:card'/>
<b:if cond='data:blog.postImageUrl'>
<!-- 記事に画像がある時 -->
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<!-- 記事に画像がない時（自分の画像URLに変更する） -->
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgI6nXrtnj9-Ys6pxuVvQUeYJcTaFA1WkFH1z9HwQVd_vnNc-hXoZXA0bgwYc9h4JGr75eBXx3tiucH9ahU5ILLH6fHhPKZrgvrV85kVBEaWMTQJjlg6aOBkjeJZVO2y_9fT6lDCDJJZk/s1600/blogger.png' name='twitter:image:src' property='og:image'/>
</b:if>
<!-- インデックスか固定ページの時 -->
<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "static_page"'>
<!-- 自分の画像URLに変更する -->
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgI6nXrtnj9-Ys6pxuVvQUeYJcTaFA1WkFH1z9HwQVd_vnNc-hXoZXA0bgwYc9h4JGr75eBXx3tiucH9ahU5ILLH6fHhPKZrgvrV85kVBEaWMTQJjlg6aOBkjeJZVO2y_9fT6lDCDJJZk/s1600/blogger.png' name='twitter:image:src' property='og:image'/>
</b:if>
上記が修正後のコードです。<!-- Twitterカード -->以下のコードを書き換えています。この設定の場合に各ページのTwitterカードを生成してみたところ、以下のような結果になりました。
修正後の画像の表示状況
・個別記事ページ（Bloggerにアップした画像あり）：アイキャッチ画像が表示される
・個別記事ページ（Blogger以外にアップした画像あり）：アイキャッチ画像が表示される
・個別記事ページ（画像なし）：自分で設定した代替画像が表示される
・固定ページ（Bloggerにアップした画像あり）：自分で設定した代替画像が表示される
・固定ページ（Blogger以外にアップした画像あり）：自分で設定した代替画像が表示される
・固定ページ（画像なし）：自分で設定した代替画像が表示される
・インデックスページ：自分で設定した代替画像が表示される
大体思惑通りに結果になりました。
しかし、固定ページに関しては画像の有無を判断するコードが分からなかったので、インデックスページと同じように代替画像を設定することにしました。この辺に詳しい方はコメント欄にてお知らせください。
修正方法
20/09/21以前にダウンロードしたテンプレートをお使いの方は下記の方法でテンプレートのコードを修正してください。
20/09/21現在、ダウンロードできるテンプレートのコードは修正済みなので そのままお使いいただけますが、代替画像は適当なものなので、画像をご自身で用意して代替画像を用意した画像URLに書き換えてご使用ください。
1．Twitterカードの該当コードを修正する
1-1．テンプレートのバックアップをする
失敗したときのために予めテンプレートをバックアップしておいてください。
バックアップと復元の方法は以下の通りです。
【バックアップ】
・管理画面で「テーマ」を選択する
・「カスタマイズ」横の「▼」ボタンをクリックする
・「バックアップ」をクリックしてテンプレートファイルをダウンロードする
【復元】
・管理画面で「テーマ」を選択する
・「カスタマイズ」横の「▼」ボタンをクリックする
・「元に戻す」をクリックしてバックアップしたテンプレートファイルをアップロードする
1-2．修正前の該当コードを探し出す
<!-- Twitterカード -->
<meta content='summary_large_image' name='twitter:card'/>
<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'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<!-- 自分の画像URLに変更する -->
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgI6nXrtnj9-Ys6pxuVvQUeYJcTaFA1WkFH1z9HwQVd_vnNc-hXoZXA0bgwYc9h4JGr75eBXx3tiucH9ahU5ILLH6fHhPKZrgvrV85kVBEaWMTQJjlg6aOBkjeJZVO2y_9fT6lDCDJJZk/s1600/blogger.png'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='Image URL' name='twitter:image:src'/>
</b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
上記がTwitterカードの修正前の該当コードです。下記の方法で該当コードを検索してください。
・管理画面で「テーマ」を選択する
・「カスタマイズ」横の「▼」ボタンをクリックする
・メニュー内の「HTMLの編集」をクリックする
・コード編集画面で「Ctrl」キーと「F」キーを同時に押して検索フォームを開く
・開かれた「Search」部分に「Twitterカード」と記述して「Enter」キーを押す
・該当コードがハイライトされるので、上記のコードを見つけ出す
※該当コードは結構上部にあるのでスクロールしても見つけられると思います。
1-3．該当コードに下記のコードをコピペして上書きする
<!-- Twitterカード -->
<meta content='summary_large_image' name='twitter:card'/>
<b:if cond='data:blog.postImageUrl'>
<!-- 記事に画像がある時 -->
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<!-- 記事に画像がない時（自分の画像URLに変更する） -->
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgI6nXrtnj9-Ys6pxuVvQUeYJcTaFA1WkFH1z9HwQVd_vnNc-hXoZXA0bgwYc9h4JGr75eBXx3tiucH9ahU5ILLH6fHhPKZrgvrV85kVBEaWMTQJjlg6aOBkjeJZVO2y_9fT6lDCDJJZk/s1600/blogger.png' name='twitter:image:src' property='og:image'/>
</b:if>
<!-- インデックスか固定ページの時 -->
<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "static_page"'>
<!-- 自分の画像URLに変更する -->
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgI6nXrtnj9-Ys6pxuVvQUeYJcTaFA1WkFH1z9HwQVd_vnNc-hXoZXA0bgwYc9h4JGr75eBXx3tiucH9ahU5ILLH6fHhPKZrgvrV85kVBEaWMTQJjlg6aOBkjeJZVO2y_9fT6lDCDJJZk/s1600/blogger.png' name='twitter:image:src' property='og:image'/>
</b:if>
上記が修正後のコードです。
該当コードすべてを選択し、上記のコードをコピペして上書きすることでTwitterカードの画像表示不具合を修正できます。詳しい修正方法と失敗した場合の対処法は以下の通りです。
【上書き方法】
・上記の修正コードを選択してコピーする
・「HTMLの編集」画面にて該当コード部分を選択する
・コピーしたコードを貼り付ける
・「HTMLの編集」画面上部の一番右にある保存ボタンをクリックして保存する
【失敗した場合】
1．「Ctrl」＋「Z」キーでコードを元に戻す
2．画面を移動してコードが元に戻せなくなった場合は「復元」の方法で元の状態に戻す
2．代替画像を自分で用意した画像に書き換える
2-1．代替画像を用意してBloggerにアップロードする
デフォルトでは当サイトが用意した適当な画像が代替画像となっています。オレンジバックのBloggerのロゴというシンプルなデザインなのでそのままお使いいただいても結構ですが、見た目はダサいです。なので、ご自身で用意した画像に変更することをオススメします。
・代替画像を用意する
・適当な記事に画像をアップロードする
・画像を右クリックして「画像のアドレスをコピー」などから画像のアドレスを取得する
2-2．コードの画像URLを自分の画像のURLに書き換える
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgI6nXrtnj9-Ys6pxuVvQUeYJcTaFA1WkFH1z9HwQVd_vnNc-hXoZXA0bgwYc9h4JGr75eBXx3tiucH9ahU5ILLH6fHhPKZrgvrV85kVBEaWMTQJjlg6aOBkjeJZVO2y_9fT6lDCDJJZk/s1600/blogger.png' name='twitter:image:src' property='og:image'/>
上記が先程の修正コードに含まれる代替画像を挿入コードで、2箇所あります。表示される場面についてはコメントアウトしてありますので、対応する場面に応じた画像を用意して「https://～.png」までのURL部分を、自分の画像のURLで上書きしてください。
3．修正コードが適応されているか確かめる
Twitterの「Card validator」でTwitterカードの表示状態を検証することができます。
このツールで検証して上手く行ってない場合はどこかに誤りがあると思われるので、再度修正作業を行ってください。どうしてもダメならコメント欄か当ブログのTwitterでお知らせいただければ対応するかも知れません。
なお、TwitterカードはBlogger設定で「検索エンジンに表示されるようにする」をONにしなければ表示されません。また、変更しても検証ツールに変更が反映されるまで数分～数十分のラグが発生するようです。ですので、検証用のブログなど検索設定をオフにした状態でご使用しているブログを使っている場合には注意が必要です。
コメント
0 件のコメント :
コメントを投稿