【Card_validator】"Unable to render Card preview"の原因と対処



Card validatorで[Preview Card]を実行したところ以下のエラーが発生しました。

このエラーはCard validatorで入力したURLがアクセスできなかった場合に表示されます。入力したURLが正しいか確認してください。"Card URL"に入力したURLをブラウザなどで表示させてただしく表示されるか確認してください。もし表示されない場合はホームページやブログ側に問題がありそうです。
確認してから[Preview Card]を実行してください。

ただし同時に log で以下が表示される場合はタグに問題があります。タグを再度確認してください。


INFO: Page fetched successfully
WARN: No metatags found



実例として以下不要なスペースが入っていたためエラーとなったケースがありました。
【間違ったケース】

<meta property="og:image" content="http://example.com/img/thumbnail.png" / >



【修正後】

<meta property="og:image" content="http://example.com/img/thumbnail.png" />

解決方法


(1)
必要最小限に近い設定は以下のとおりです。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="テストのホームページ" />
<meta name="twitter:description" content="SNSのomg情報を確認するためのホームページです" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:site_name" content="Card Validator 確認ページ" />
<meta property="og:title" content="テストのホームページ" />
<meta property="og:url" content="http://example.com/" />
<meta property="og:image" content="http://example.com/img/myimage001.png" />

(2)
Card Validatorはインターネット上のサービスです。よって例えばWindows PC の場合、Card URLに C:\temp\test.png のようなローカルファイルの指定はできません。

(3)
Car Validatorがファイルへアクセス可能なことを確認してください。





ツイッターの Card validator に関する質問




このページは個人的に独自に調査した事項をまとめています。他組織や開発ベンダーとは一切関係ありません。
内容に誤りがある可能性があります。また情報が古い可能性があります。内容は保証しません。
参考程度に閲覧ください。万が一誤りがあっても保証はありません。自己責任で読んでください。