OGP(ブログカード)が反映されない時の解決方法【HTML】

OGP(ブログカード)が反映されない時の解決方法【HTML】

ブログカードと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

「キッチンノート.fun」という料理サイトを立ち上げました!このサイトで紹介していた料理記事は、そちらへ移動しました。
記事に関するご質問などがあれば、
Twitter または お問い合わせ までご連絡ください。
オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。

ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。

▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説しています。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。

関連記事