ShifterでTCDテーマMuumを使用したらツイッターカードが表示されない

TCD

このサイトは「Shifter 」というワードプレスをJamstack化するホスティングサービスを利用しているのですが、ツイッターカードが表示されない不具合があり最終的に解決することができたのでその対処法をメモ程度に残しておきます。

ツイッターカードが表示されない原因

検証ツールでタグの中にある「twitter:image:src」の画像パスを確認したら相対パスで指定されてしまっていました。※ツイッターカードは絶対パスで指定しなきゃいけないのでこれが原因だと思います。

最初はTCDテーマのほうを疑ったのですが、Shifter環境でない場合は絶対パスでちゃんと指定されていたので、この原因はShifterを使っていることにあると判断しました。

対応策

twitter_image関数で出力される画像パスの前にドメイン名が出力されるように変更しました。
※前提として絶対パスが出力されるように元々wp_get_attachment_image_src関数で指定があったため、Shifter環境化以外ではこんな処理はしないです。

該当のファイルはテーマ内のfunctionsフォルダの中にある「ogp.php 」になります。

<?php
list($src, $width, $height) = $image;
$home = home_url();
echo esc_attr($home.$src);
?>

不明点

ツイッター上にはツイッターカードが表示されるようになりましたがCard validatorで試したところ、画像が表示されずに「Unable to render Card preview」の表記が出たままです。
※Log上にエラーはでないです。

まとめ

時間経過で改善するのか、キャッシュの問題なのか、テーマの問題なのか判断がむずかしかったですが、All in One SEOだと正常に出力がされていることや1日経過して改善されなかったので、テーマが怪しいと判断して改善策を探してみました。

この記事が少しでもお役に立てれば幸いです!

Akira

Akira

未経験から制作会社に入社し3年ほど技術周りをやってます。最近はJamstackに興味があってこのサイトもShifterというサービスを使用してJamstack化しています。

特集記事

TOP