[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

OGP画像の指定には、<meta property="og:image" content="OGP画像のURL">と指定しよう!

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では優先して利用するようになります。表示速度も変わりますので、オススメな設定です。

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

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

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

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

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

参考サイト

最後に

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

前へ

AWS S3に Cyberduck と Transmit でつないでみよう!レンタルサーバのようにドラッグ&ドロップでファイル管理できるのは便利!

次へ

簡単にSSIMを計算するツール6+2本を紹介