ホームページの記事をtwitterにカードで表示させるには

こんにちは　FULL Web Designの渡邊です。

本日、金曜日の修正アップしたクライアントから、

twitter（X)にホームページの更新・公開したURLをツイートした際、

カードで表示されなくなったと報告がありました。

そういえば、ページフッターについているTwitterとFacebookを使っていないようだったので削除したのを思い出し、（読み込みが遅くなるので）

必要なコードがどれなのか、チェックし、必要なコードを掲載してテストしてうまく表示されました。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

シェアボタンはフッター意外以外にに記事にはついており、それ以外にページ内に必要だったコードは

こちらのコードは見えないコードですが、

これがないと、カードで表示されないようです。

随分昔に埋め込んだコードで、ツイートボタンを設置する歳、ずっと使っていたコードですが、

フッターに設置したツイートボタンとセットにコードを書いていたようで、

復習を兼ねて、記事にしました。

また、どの部分がどうカードで掲載されるかは、

Facebookが流行っていた頃から設定している、OG プロパティが利用されるようです。

関連リンク

https://tedate.jp/wp-tips/card-for-wordpress

削除:

「Unable to render Card preview」と出るのは仕様らしい

Fullウェブデザインでは、facebookが流行した10年頃前から、 OGプロパティの設定もしております。

制作者からしか見えないところだからこそ、しっかりとした作りを心がけております。

ホームページ制作ならFULL ウェブデザインにお任せ下さい。

開業１２年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。

グラフィックデザインは２０年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。

お気軽にお問い合わせください。

初回お問い合わせは、メールにてお願いいたします。

お問い合わせフォーム