OGP画像について

質問一覧対象テーマ: LandscapeOGP画像について
lhchlhch asked 5年 前

BASEで有料テンプレを使ってます
緑の背景に白いロゴなので
そのままだとシェアした時真っ白になります。
なので、タグを編集しOGP画像を設定したのですが
LINEで人にURLを送った時のみ反映されてます
Twitterカードも設定したのですがTwitterだと
真っ白なままです。
Card validatorで確認したら
Twitter cardの設定は間違っていないようです
Logのところに
“summary_large_image tag found”
ときちんと表示されているので。
<meta property=”og:image”content=”画像のURL”/>
でLINEなどでは反映されていて
その下に
<meta name=twitter:image=””>
とツイッターのOGP画像を設定しましたが
反映されません。
これを消して、Twitterカードのタグのみ残してみてもダメです。
何か思い当たることはないでしょうか

baseadminBaseDesignInfo Staff replied 5年 前

ご質問ありがとうございます。
「有料テンプレ」というのはLandscapeのことでしたでしょうか?
また実際のサイトURLをお知らせ頂けるとこちらでも状況を把握しやすくなります。どうぞよろしくお願いいたします。

lhchlhch replied 5年 前

ごめんなさい、間違えていて貴社のテンプレではありませんでした
(BASE Shootというテンプレ)
その場合サポート不可ですか?
http://www.lilharbor.com

baseadminBaseDesignInfo Staff replied 5年 前

そうでしたか。
基本的にはそのテーマのクリエーターさんに問い合わせるのが最も正確で早い解決ができるかと思います。
せっかくなのでこちらでも少しだけ見させていただきますね。

2 Answers
baseadminBaseDesignInfo Staff answered 5年 前

そのテンプレートにOGP設定の項目がないとしたら、ロゴ画像がOGPとして利用されますので、ロゴが白抜きの場合に、外部サイトで真っ白になるということが起こります。
テンプレートの作者さまにOGP設定機能をリクエストされるのが1つです。(Landscapeも初期はそのような問題がありましたが、現在は多くの方のフィードバックによって透過ロゴでもを上手く使えるようになっています。)

次に、今回は独自でタグを追加したけど上手く行かない、ということですが、
拝見してすぐに分かるのは「twitter:image」の画像URL指定で「””」で囲まれていません。そのためコードが正常に読まれていない可能性はあります。

OGPの書式については詳しく調べられているようですので、コードが正確かどうか、コードの位置がどうか、などを検証して頂くと良いかもしれません。

どうぞよろしくお願いいたします。

lhchlhch replied 5年 前

ありがとうございます
テンプレ作られた方は
「BASE側のシステムで固定で決まっているので設定できない」と仰ってましたが
その後に、Twitter以外では出来たので…設定は可能なのだと思います。。

“”で囲われてないのは外出先でスマホで編集したので不便だったためで
最初<meta name="twitter:image"
と入力した時はきちんと囲ってました
今またパソコンで<meta nameに戻してもダメでした

でも、propertyをnameに変えてみてもダメみたいです。

本当にTwitter以外のSNSでは反映されるのですが。。

chorochoro answered 5年 前

http://ogp.buta3.net/
このサイトでOGPとTwitterカードが確認できるので試してみましたが、しっかり設定されているようです。
おそらく、キャッシュが効いているだけかもしれません。
「現在は既にちゃんと設定されているが、設定されていなかった状態がブラウザに保持されてしまっているだけ」ということですね。