httpsサイトもはてブエントリーのogp画像が表示できるように対応されるみたい!

はてブでセルクマしてたら,アイキャッチが左端に表示されてないじゃないか.文字だけでそっけない.これじゃ誰もブクマしてくれないよう.

追記2017.10.12

この記事はssl化したサイトをはてなブックマークすると,エントリーにサムネイルが表示されない現象について調べたものです.ogp関連のトラブルの参考になると思います.

結論言っちゃうと,はてなサイトがhttps対応されるみたいなんで対応したらogpの画像の問題もなくなると思われます.

はてなの対応待ちです.

スポンサーリンク

原因はjetpackプラグインとのOGP2重表示

SimplicityとjetpackプラグインでOGPの2重表示の対処方法
WordPressのテーマ「Simplicity」で「jetpack」プラグインを使用するとOGPタグが2つ設定されていましたので、その対処方法をお伝えします。

対処はカンタン.以下をfunctions.phpにコピペするだけ

// delete JetPack OGP tags
add_filter( 'jetpack_enable_open_graph', '__return_false' );

でもちょっと待って!

決定版!JetpackプラグインのOGPタグを削除する方法いろいろ : おち研
WordPressのJetpackプラグインが出力するソーシャル向けOGPタグを消す方法を4種類まとめました。バージョンによってもオプトアウトの方法が異なるので、それぞれについて解説しています。

子テーマのfunction.phpに追記したほうがいいよ

Simplicityがバージョンアップしたら,またfunnction関数に追記しないといけなくなるから子テーマchildに追記したほうがいいっぽい.

子テーマのfunction.phpが親テーマより先に読み込まれるらしいから子テーマに追記しても有効なわけ.

管理画面から

外観>テーマ編集>Simplicity childテーマ>functions.php

に追記すること

参考:

【Simplicity】子テーマのfunctions.phpに追加した内容
当サイトの子テーマfunctions.phpに追加した内容を参考サイト様と共に掲載しています。

【追記】それでもダメだった.sslが原因か?

jetpackをoffにしてもダメでした.サムネイル画像が表示されない原因をぐぐってみたら,ヘッダーのogpタグをいじると直ったというのが見つかったのでやってみました.

og:image:secure_urlというオプションがある

:secure_urlというオプションをつけることができるようです.知らなかった.このサイトはssl対応しているので,このオプションをつける必要があるのかも.

とりあえずog:imageの後に全部secure_urlとつけてみることに.

これもまた子テーマで編集しないと,アップデートしたときに消えちゃうのでsimplicityでは,親テーマのheader-ogp.phpを子テーマにコピーしてきて,編集する必要があります.

編集しても,すぐには画像が表示されるというわけではないみたい.ページのキャッシュをクリアするといいみたい.

og:imageのwidth,heightを設定する

これで直ったという記事もありました.上でダメだったらこれもやってみる.

最終結論,はてなブログがhttpsになるから対応されるはず!

公式ブログでアナウンスがありました.以下

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ
はてなブログでは、ユーザーの皆様により安全にご利用いただくため、それぞれのブログをHTTPSで配信できる機能のリリースを予定しています。対応内容とスケジュールをお知らせいたします。

つまりhttps/sslサイトはもともと対応していなかった.なのでogpの画像が表示できなかったもよう.

スポンサーリンク