OGP画像を表示出来るようになった

• 日本語

• OGP

SVGではなくPNGをOGP画像に設定

SVGは非サポートのケースが多いみたいです。その情報を知らずに、動的に生成したSVGをOGP画像として設定していました。もっと調べないと…

PNGで記事タイトルが表示されない

PNGへの変換は以下の4つのクレートを使用しました。

resvg = "0.45.1"
usvg = "0.45.1"
tiny-skia = "0.11.4"
image = "0.25.8"

SVGの生成は実装出来ていたので、SVGからPNGへの変換処理を実装しました。 そしてビルド時に生成された同一のSVGとPNGを確認すると、SVGではタイトルが表示されるがPNGでは表示されない問題が発生しました。 いくつか切り分けを行いましたが、最終的な答えは 「 フォント 」 と 「 filter="url(#shadow)" の削除」 でした。

fontdb クレートを追加

フォントを扱えるように fontdb クレートを追加しました。

cargo add fontdb

そして、 Google Fonts からダウンロードした Noto Sans JP を設定しました。最近Windowsでも標準で入ってきた一般的なフォントです。

let mut font_db = fontdb::Database::new();
font_db.load_font_file("assets/NotoSansJP-Regular.ttf")?;
font_db.load_font_file("assets/NotoSansJP-Bold.ttf")?;

SVG生成から filter="url(#shadow)" を削除

タイトルの生成に使用していた filter="url(#shadow)" を削除して以下のようにしました。

    let title_svg = title_lines
        .iter()
        .enumerate()
        .map(|(i, line)| {
            format!(
                r#"<text x="600" y="{}" text-anchor="middle" 
        font-family="Noto Sans JP" 
        font-size="{}px" font-weight="bold" fill="rgba(0,0,0,0.8)">
    {}
  </text>"#,

SVGのフィルタ機能は高度で強力なので、使用するクレートや環境によってはサポート度合いに差が出てくるようです。必須でもなかったので今回削除しました。

解決

これらの作業を行うことでOGP画像を表示出来るようになりました。 SVGはOGP画像に適していないという前提知識を学ぶことが出来て良かったです。