search

momocus / sakazuki

自宅の酒を管理するアプリケーション
https://sakazuki.fly.dev/
MIT License
13 stars 4 forks source link

酒詳細ページ以外のサムネイルにロゴ画像を適用する #360

Closed yonta closed 2 years ago

yonta commented 2 years ago

酒詳細は酒画像がサムネイル、他はなんもサムネイルされてないようだ！

やること

yonta commented 2 years ago

https://github.com/momocus/sakazuki/blob/58f1bb1ce957593c9c635e60222537095eb08c0a/app/helpers/application_helper.rb#L27

ここでサムネイルを全体指定済みだった。 しかし画像ファイルがSVGのため表示できていない。 PNGなどにしたファイルをレポジトリに含めて、そっちを指定しよう。

yonta commented 2 years ago

og:imageはOGP公式によると複数のサイズをArrayで並べておけるとある。

yonta commented 2 years ago

Twitterの公式ドキュメントを見に行った。 ロゴのような複数ページにまたがる画像は使用しないほうがいいようだ。 どのページも同じサムネイルになるのは避けろとのこと。

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

ページの内容を表すユニークな画像のURLです。ウェブサイトのロゴや著者の写真など、複数のページにまたがるような一般的な画像は使用しないでください。このカードの画像は、アスペクト比が1:1で、最小144x144または最大4096x4096ピクセルをサポートします。画像のサイズは5MB以下である必要があります。画像は、すべてのプラットフォームで正方形に切り取られます。JPG、PNG、WEBP、GIF形式に対応しています。アニメーションGIFの最初のフレームのみが使用されます。SVGには対応していません。

yonta commented 2 years ago

メモ、便利なシミュレータ

yonta commented 2 years ago

酒indexはトップページだしロゴになるのは仕方ないな。 デフォルトロゴにしておく。 SNSでシェアするページにはちゃんとサムネイルをつけるようにすべきとのことだな。 今は酒showに個別サムネイルを指定しているし、いいでしょう！

yonta commented 2 years ago

facebook developer guide

高解像度デバイス上で最適に表示されるよう、幅が1080ピクセル以上の画像を使用します。画像リンク広告を表示するには、幅が600ピクセル以上の画像を使用してください。画像リンク広告でのパフォーマンスを高めるため、広告クリエイティブには1:1の画像を使用することをおすすめします. URLシェアデバッガーツールでURLを実行してウェブサイトのメタデータをプリフェッチすることにより、使用する画像をプリキャッシュします。この操作は、一部のコンテンツの画像を更新した場合も行ってください。 og:image:widthおよびog:image:height Open Graphタグを使用し、クローラーに対して画像サイズを指定します。そうすれば、クローラーは画像を非同期でダウンロードして処理することなく、すぐにレンダリングできます。

yonta commented 2 years ago

とりまロゴは情報量がないので推奨最小値の600x600として、og:image:heightとog:image:widthをきちんと指定するのが良さそう。

yonta commented 2 years ago

meta-tagsでも複数画像の登録やwidht/heightの指定方法があった

yonta commented 2 years ago

サイズ指定してsvg2png変換

yonta commented 2 years ago

ImageMagickでの手元での変換よりも、上記サイトのほうが小さな画像ができる。 上記サイトだと34.3KBほど。 一方でconvert -background transparent -density 1200 -resize 600x600 choko.svg choko.pngだと142KBほど。