OGPが反映されない時の対処方法【ブログカードの実装】

ブログカードとOpen Graph Protocol(OPG)

URLをつけて投稿するとSNSなどにカードのように表示されるこれ。


画像の拡大

Open Graph Protocol(OGP)規格と呼ばれるメタタグを、ヘッダーに埋め込むことでコントロールできる。

<meta content="description説明が入ります" name="description" />
<meta content="og:titleタイトルが入ります" property="og:title" />
<meta content="article" property="og:type" />
<meta content="https://works.kamityping.com/post/2018/index.html" property="og:url" />
<meta content="https://works.kamityping.com/post/2018/images/kamityping-icon.png" property="og:image" />
<meta content="og:description説明が入ります" property="og:description" />

Pandocで自作ジェネレーターを組んでHTML生成しているとこういったこともすべて自分でやらなければならない。現在のWEBの仕組みに詳しくなると同時に、CMSやブログサービスがこういったことを自動でやってくれていたありがたみがわかる。

OGPに関してはこちらに詳しい規格が書いてある。

The Open Graph protocol

OGPが反映されない

Twitterなどでブログカードを反映させるまでにトラブルがあった。まずは、現状でブログカードがどのように反映されるか確認できるツールがある。

シェアデバッガー

確認するとこの警告がでた。

SSL証明書を検証できません。 自己署名(ブラウザの警告を引き起こす)または無効です。
Can't validate SSL Certificate. Either it is self-signed (which will cause browser warnings) or it is invalid.

サブドメインで運営しているためか、Let's Encrypt関連でうまくいっていないようである。

ルートドメインではエラーは吐かなかった。

バーチャルホストの鍵のパスをいじる

letsencryptは4つの鍵を生成する。

ファイル名 意味
privkey.pem 秘密鍵(SSL/TLS サーバ証明書の公開鍵に対応する)
cert.pem SSL/TLS サーバ証明書(公開鍵を含む)
chain.pem アクセス時にブラウザに提供する必要のある中間証明書
fullchain.pem SSL/TLS サーバ証明書(公開鍵を含む)と中間証明書の両方が含まれているファイルで、cert.pem と chain.pem の内容が結合されたものです。

chainの指定を追加したらなぜかうまくいったが、問題はさらに続く。

SSLCertificateFile /somewherepath/fullchain.pem
SSLCertificateKeyFile /somewherepath/privkey.pem
#以下追加
SSLCertificateChainFile /somewherepath/chain.pem

VirtualHost 443の複数記述

Virtualhostのconfに下のように複数記述していた。どうも書き方が間違っていたようだ。複数設定すると最後の設定のみが反映されてしまうようで、ドメイン証明書が使われてしまいブラウザーでエラーとなっていた。

<VirtualHost *:443>
...#サブドメイン1
</VirtualHost>

<VirtualHost *:443>
...#サブドメイン2
</VirtualHost>

<VirtualHost *:443>
...#サブドメイン3
</VirtualHost>

443に関する記述を消して、ssl.confをドメイン毎に書き直した。現状1つのドメインしかsslを必要としていないのでssl.confをrenameして使っただけだが、他のサブドメインにsslを設定したい場合はこのssl.confをコピーして編集すれば良さそうだ。

cp ssl.conf subdomain1.ssl.conf

SSL Server Test

自分のサーバーのSSLが最適化されているかテストしてみた。B評価だった。そのうちAになるように対応してみたい。

Qualys SSL Labs

画像キャッシュサービス

画像キャッシュにより画像表示を高速化できるサービス。

Images.weserv.nl

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazonRakuten
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazonRakuten
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazonRakuten

Amazonでお得に購入するなら、Amazonギフト券がオススメ!

\Amazonギフトがお得/

コンビニ・ATM・ネットバンキングで¥5,000以上チャージすると、プライム会員は最大2.5%ポイント、通常会員は最大2%ポイントがもらえます!
Amazonギフト券

\この記事をシェアする/