Rankletでは、OGP画像をサムネイルに利用する仕様になっています。OGP画像が指定されていないと、Rankletはサムネイル画像を指定することができないので、ぜひ設定をお願いします！

OGP画像の設定方法

アイデアマンズブログでは、こんな感じで設定しています。実際に記事詳細ページで設定している内容です。

<meta property="ranklet:image" content="https://blog.ideamans.com/assets_c/2018/09/2018-09-20-meta-ogp-image-ogp-thumb-120xauto-768.jpg">
<meta property="og:image" content="https://blog.ideamans.com/assets_c/2018/09/2018-09-20-meta-ogp-image-ogp-thumb-1200xauto-768.jpg">

metaタグは、設定する内容によって記述が変わるので注意が必要です。OGP画像を指定する場合は、「property属性」を利用するようにしましょう。

Rankletでは、OGP画像じゃないものをサムネイル指定したい

OGP画像はサイズが大きいし、ランキングでは小さいサムネイルを表示したい...。という方は、ranklet:image を指定してみてください。

meta property="ranklet:image"

このメタタグを、og:image の前に記述いただくと、Rankletでは優先して利用するようになります。表示速度も変わりますので、オススメな設定です。

• ランキングツールの Rankletのサムネイル画像を最適化して、表示速度の改善をする方法

metaタグの属性値は複数ある

余談ですが、metaタグの属性値をいくつかご紹介します。

• http-equiv
• charset
• name
• content
• scheme

http-equivは、HTMLファイルでリダイレクトをさせたい時に利用しますね。文字コードの指定も、http-equiv か HTML5 では charset を用いるようになります。

name は、keywords などの一般的なものから、viewport の指定など、内容が幅広いです。これは定義されたものしかないわけではなく、拡張されていくタイプのものだからではないかと考えられます。ブラウザの解釈のためにも、どんどん使っていくのがよいですね。

参考サイト

• HTML/jp/Elements/meta - W3C Wiki
• HTML meta tag

最後に

HTMLは、W3Cという団体が管理しているので、困った時は公式サイトをチェックするのが最も正確です。英語ですがある程度はGoogle翻訳でも見えてきますし、説明も難しくないので英語のままでもなんとかいけると思います。