ブログカード周りを整える
サイトのリンクを貼る際、今までは「Iframely」というサービスを利用していました。
まさに↑のような『ブログカード』を表示させるためのコードを生成してくれるサービスです。
WordPressでブログを作っていれば簡単に作れるみたいですが、当サイトは静的サイトなので…😅
URLを貼り付けるだけで埋め込みコードを生成してくれるのはとても便利✨というわけでしばらく利用していました。
が、使用頻度が増えるにつれ、「ちょっと表示に時間がかかるし、1000リクエスト/月の表示(※)が気になるから、何とか自前で用意できないかな…？」と考えるように。
※「1000リクエスト/月」はデザインのカスタマイズをしたコードについてのようです。
参考にしたサイト
まずは検索してこちらのサイトにたどり着きました。
ブログカードが使いたい。その２
数日前にブログカードが使いたくなって調べた結果をブログに書きました。 そのときは Embedly を使うことにした
hikikomorisos.blogspot.comそして↑の記事内で紹介されてるこちら↓のサイト。
この方の作成されたブログカードがめっちゃ良いじゃん！シンプルで使いやすそう！
ということで、早速使用させていただくことに。
使用できる環境か確認
まず、このブログカードが使用できる環境か確認してみました。
記事の途中でなぜブックマークレットを作ったのかが書いてあったのですが、そこに「ブログをSSL化したので 混在コンテンツを避けたい」と書いてありました。
ん？待てよ…
当サイトはSSL非対応なのでは…？😥
当サイトのサーバーにはロリポップのエコノミープランを使っているのですが、SSLに対応してなくて… 対応させるにはお金かかりそう(独自ドメイン取得が必要？)だからとそのままにしていました。
(最近のネット環境的に非対応なのは良くないって知ってはいたのですが…)
使えないわけではないみたいだけど、サイトがSSL非対応ってやっぱりダメだよなぁ…と思ってロリポップサイトを確認していたところ、このような記述が。
共有SSLの利用法
※プランのアップデートを行った最新の環境では、ロリポップ！ドメインがSSL化されるため共有SSLは利用できません。
（例：https://ロリポップ！アカウント・ドメイン/）
え！？SSL化が既にされてるの！？？
ちょうど先日アップデートしたじゃん！！
ということで慌てて確認したところ、無事できました✨というかできてましたｗ
いやぁ気付かなかったなぁ… 今はもう独自ドメインを持ってるのが普通で、自分のように借りたままのドメインを使ってる人は少ないのかも… お知らせにも大きくは書いてなかった気がするし…
とにかく、無事サイトもSSLに対応できたので、配布サイトさんと同じ環境にすることができました。
使い始める前の準備
次に一通り使い方から注意点まで目を通していると、『OGP設定』ができていないサイトでは使えないとのこと。
ふむ、とはいえ最近のサイトは大体設定してくれてるし、自分のサイトもバッチリ設定できてる！大丈夫！と思ったら…
自サイト設定できてないじゃん…😱
設定してると思ったらTwitter用の設定のみで、一般のOGP設定はできていませんでした💧
OGPの設定方法について調べたのですが、記入箇所が多いと管理が大変💦ということで、こちらの記事を参考に項目を絞ることに。
最終的に、
・og:title
・og:description
・og:url
・og:image
・twitter:card
を設定することにしました。
※【2021/7/17修正】「twitter:site」「twitter:image」の項目を削除しました。
今まで作成したページを何とか書き換えて、設定完了！
手打ちだとこういう修正が大変ですね… 最初にちゃんと設定しておけば楽だったんですけども💧
デザインを少しいじる
OGPの設定ができたので、次はブログカードを導入するための設定をしていきます。配布記事の通りスタイルシートを既存のCSSに貼り、ブックマークレットを登録して…
試しにコードを貼り付けてデザインを確認したら結構ずれてる。これは元々使っているCSSが色々な値を設定しているせいですね。干渉していたっぽいです。
さらに、「できればIframelyっぽいシンプルなデザインにしたい！」ということで、↓の余白なしのスタイルシートを適用することに。
値を増やしたり減らしたり、弄って弄って…何とか完成！
このページでも使用していますが、結構いい感じになったのではないでしょうか。密かに気に入っています✨
ブックマークレットを手直し
先程登録したブックマークレットを確認してみると、第三者のサイトの画像URLが直リンクになっているんですね。
OGPに設定してある画像なら直リンクしても良いのかな…？とも考えましたが、先ほど紹介したひき太郎さんのサイトで「Images.weserv.nl」が紹介されていました。
images.weserv.nl<img src="//images.weserv.nl/?url=画像のリンク&w=幅&h=高さ">このように指定してあげると、キャッシュを利用して画像を表示させることができます。
ブックマークレットの画像リンクの前部分に、
https://images.weserv.nl/?&url=を追加するだけでOKなので簡単でいいですね。
このサービスを紹介しているサイトを見かけなくてちょっと不安だったんですが、無料で使えるサービスのようです。
What is images.weserv.nl?
Images.weserv.nl is an image service which is free for use to anyone, and we offer it as-is, it's just basic image resizing, available to anyone, easy to use. We try to keep everyone as happy as we can.
今回の作業によるメリット
今回ブログカード周りを整えたことで、かなりブログカードの管理が楽になりました！
具体的には、
・ブックマークレットを使うことで、以前と同じ様に手軽にブログカードのコードが作成できる。
・画像は他サービスを使っているが、それ以外の部分はHTMLのコードなので描写が軽い。
・デザインの変更がしやすい。
・自サイトのOGP設定ミスに気づいた時、すぐに修正できる。
特に一番下が重要かもｗ
Iframelyだと作成後に「あ！設定ミスってる！」と気付いて修正しても、なかなか修正が反映されなくて困ったことが多々あったので😅
今の所ブログカードを貼る場合、一番多いのが自サイトのリンクなので、修正しやすいのはとても助かるのです。
最後に
軽い気持ちで始めたのですが、思ってた以上に作業量が多くて丸2日ほどかかってしまいました💦
とはいえこれで気兼ねなくブログカードを使用することができるので一安心。ブログ記事も書きやすくなって満足です✨
