【Hexo】ブログカード内のファビコンが表示されない問題の対処

当ページのリンクには広告が含まれています。

Hexo(Icarusテーマ)で、はてなブログカードを使用した際に、faviconがうまく表示されなかったので、解消法を備忘録的にまとめます。

✓目次

• エラーの事象
• 使用しているプラグイン
• 原因
• 対処その①：faviconの画像パスをhttpsからhttpに変更　※非推奨
• 対処その②：適用しているIcarus(v3.0)テーマの修正
• 検証

エラーの事象

以下のように、faviconが出てきません。

使用しているプラグイン

shundroidさんが提供してくれているプラグインを使用させていただきました。

以下のコマンドでインストール可能です。

terminal

npm install shundroid/hexo-embed-hatena-blog-card --save

記事を作成する際に実施するhexo new "{記事名}"コマンドで生成されるマークダウンファイルに｛% hatenablogcard https://omathin.com/2020/01/16/knee-surgery/ %｝という風に、｛% hatenablogcard (記事のURL) %｝と記述していました。

しかしながら、本記事の冒頭の通り、faviconだけが表示されませんでした。

原因

画像のパスがhttps://となっていると、faviconが表示されない場合があるようです。
※セキュリティ的によろしくない。

Icarus v3.0においてOpen Graph Protocolが正常に適用できない状態になっていたようです。

対処その①：faviconの画像パスをhttpsからhttpに変更　※非推奨

自身のブログ記事をChromeで表示し、F12で正常に表示されていないFaviconの箇所を確認すると、以下の通りとなっていました。

html

<img src="https://cdn-ak.favicon.st-hatena.com?url=https%3A%2F%2Fomathin.com%2F2020%2F02%2F01%2Fmatsuba%2F" alt="omathin.com" title="omathin.com" class="favicon">

Chromeのデベロッパーツール上で、試しに、?url= httpsとなっている部分を、?url=httpという形に変更すると、Faviconが表示されました。

よって、ブログ記事を作成するマークダウンファイル上で、｛% hatenablogcard https://omathin.com/2020/01/16/knee-surgery/ %｝と記載していた箇所を、｛% hatenablogcard http://omathin.com/2020/01/16/knee-surgery/ %}という風に、https:形式からhttp:に変更すれば、ブログカード内にFaviconが表示されるようです。

しかしながら、これはセキュリティ的にあまりよろしくないですよね。

他に対策はないのか、とOpen Graph Protocolなどを調査してみると、なんと私が現在使用しているIcarus(v3.0)では、Open Graph Protocolが正常に適用できない状態になっているバグがあったようです。

対処その②：適用しているIcarus(v3.0)テーマの修正

私が適用していたIcarusのバージョン3.0では、Open Graph Protocolが正常に適用できない状態になっていたそうです。

修正するコードはgithubを参照し、以下のように修正すればOKです。

layout/common/head.jsx

               author={open_graph.author || config.author}
               description={open_graph.description || page.description || page.excerpt || page.content || config.description}
               keywords={page.keywords || (page.tags && page.tags.length ? page.tags : undefined) || config.keywords}
-               url={open_graph.url || url}
+               url={open_graph.url || page.permalink || url}
               images={openGraphImages}
               siteName={open_graph.site_name || config.title}
               language={language}

package.json

    "bulma-stylus": "0.8.0",
    "deepmerge": "^4.2.2",
    "hexo": "^4.2.0",
-    "hexo-component-inferno": "^0.2.3",
+    "hexo-component-inferno": "^0.2.4",
    "hexo-log": "^1.0.0",
    "hexo-pagination": "^1.0.0",
    "hexo-renderer-inferno": "^0.1.3",

検証

本ブログの別記事のブログカードを以下に張り付けてみると問題なく画像が表示されました。