11 YとCloudaryの自動オープングラフ画像

5226 ワード
11ty eleventy cloudinary ssg テキストリンク

私は動的にそれぞれのブログ記事のためのユニークなオープングラフ(OG)イメージを生成するための方法を見つけるか、ポストデータを使用して自動的に注意してください.
この解決策の目的は、各ポストのブログ投稿イメージを手動で作成する必要がないことによって時間を節約するために、ブログの投稿をもっとTwitterのようなソーシャルメディアのウェブサイト上で共有するときに際立っている.
以前、私はポストのために一般的なイメージを使用していました、あるいは、私がブログ柱ヘッダーのために特定のイメージを使用するならば、それはOGイメージになります.しかし、私はポストごとにユニークな何かを欲しかったです、そして、それは即座に人々がソーシャルメディアの上で人々に話すという何かがポストでした.
例えば、これを達成する多くの方法があります.Drew McLellan 執筆Dynamic Social Sharing Images 2018年に戻ってください、しかし、Drawは造り時間でこれをしていて、Philpeteerとこのポストによる若干の非常に賢いものを使っていますStephanie Eckles それも、操り人形を使います.
これらは素晴らしい解決策ですが、私は何かを簡単に設定し、依存関係に軽量で、あまりにも技術的ではない'ちょうどそれを設定し、それを忘れることができる.

解決策


私が達成したかったのは、同様にイメージに加えられる私のロゴでイメージの上にポストタイトルを示すOpenGraphイメージを持つことでした.これは次のようになります.

最初に、あなたがイメージのためにOpenGraph<head> あなたのページテンプレートのうち、私の場合はblog.njk レイアウト.現在使用しているコードは以下の通りです.
{% if postImage %}
<meta name="twitter:image" property="og:image" content="{{ site.cloudinary_url }}{{ postImage }}" />
<meta name="twitter:image:alt" property="og:image:alt" content="{{ title }}" />
{% else %}
<meta name="twitter:image" property="og:image" content="{{ site.meta.ogImg }}" />
<meta name="twitter:image:alt" property="og:image:alt" content="{{ site.meta.ogImgAlt }}" />
{% endif %}
ここで私はポストがポストイメージを指定したかどうかを確認するためにチェックしています.OpenGraphタグをマージしたことに気づくでしょうname="twitter:image" property="og:image" ) そのFacebookやTwitterの代わりに、同じことのための複数の行のコードを使用します.Altテキストを指定できます.
私はすでにCloudaryを使用しているので、私は彼らのAPIがtext and image overlays あなたがそれらを要求するとき、あなたはイメージに加えることができます.
これは、ポストタイトルと私のロゴをイメージに重ねておくという私の考えが成し遂げられることを意味しました.

どうやって動くの？


これは、Cloudary画像リクエストURLの変数を渡すことによって動作し、これらの変数は、その場でこれらのカスタム画像を作成するCloudary APIで使用されます.
ここでは、いくつかのカスタムオーバーレイを使用してイメージを要求するための完全なURLです.
https://res.cloudinary.com/juanfernandes/w_1200,f_auto/l_juanfernandes-logo,w_100,g_south_east,x_60,y_40/l_text:Georgia_80_bold_center:Using Defer to improve performance,co_rgb:eee,c_fit,w_600//v1579162296/computer-18363301920-1.jpg
これについての大きなことは、URLにいくつかの変数を追加することにより、ブラウザの右側のイメージを設計することができます.
さて、これは私のOpenGraph画像のコードですblog.njk レイアウトテンプレートは、HTML変数と私のブログポスト変数を使用しているようです.
<meta name="twitter:image" property="og:image" content="{{ site.cloudinary_url }}w_1200,f_auto/l_juanfernandes-logo,w_100,g_south_east,x_60,y_40/l_text:Georgia_80_bold_center:{{ title }},co_rgb:eee,c_fit,w_600/{{ postImage }}" /><meta name="twitter:image:alt" property="og:image:alt" content="{{ title }}" />

それを壊しましょう


基本的に、私はununjucks変数を使用してポストタイトルテキストとイメージを通過しています.ここで、すべてのこれらの変数が意味するものの内訳です.
  • https://res.cloudinary.com/juanfernandes/ これは、私のアカウント名のCloudary URLを渡すための変数です
  • w_1200,f_auto/ ここでは、私は1200 pxワイドと自動画像形式で画像を要求しています
  • l_juanfernandes-logo これはオーバーレイ、私のロゴで使用するイメージの名前ですl_ そして、これはCloudaryをオーバーレイとして使うために
  • w_100,g_south_east,x_60,y_40/ これは、画像のサイズ、100 px幅、位置、右下、およびxとyの値を使用して正確な配置を指定します
  • l_text:Georgia_80_bold_center これはオーバレイテキストがジョージアフォントになければならないことを曇らせると、フォントサイズは80 px、太字で、中心にあるべきです
  • Automated Open Graph images with 11ty and Cloudinary これは、ブログ記事タイトルのためのNunjucks変数です
  • co_rgb:eee,c_fit,w_600 これは、オーバーレイテキストが欲しい色を縦方向と水平方向に集中し、テキストの最大幅を設定する
  • /v1579162296/computer-18363301920-1.jpg この変数は、すでにポストページにアップロードされたポストイメージの名前を渡します
    • 一般的なポストのために、私は私のブランドの色を使用して一般的なイメージを作成し、テキストの画像の中心部と右下にある私のロゴに追加されます.
    私がカスタムイメージを使用したポストのために、私はそれが白いテキストを読みやすくするために暗いイメージであることを確認します.
    これは、迅速な解決と私のポストは、ソーシャルメディア上で少しスタンドになる簡単な勝利だった.私は、一般的にCloudary APIオーバーレイについて詳しく調べて、学びました.

    ヒント：あなたの社会的共有イメージをテストする


    TwitterやFacebookはあなたの社会的なメディア'カード'をテストするためのツールを提供し、ここで私の今Twitterのように見えるものです.

  • Facebook Sharing Debugger

    • これをさらに


    私は、これをさらに一歩踏み出すことができて、テキストの色を通過することができるか、コンテンツ管理システムによってセットされることができるオーバーレイとして使うために異なるロゴまたはイメージを選ぶことができますForestry.io 投稿を作成するとき.
    私は、これを11 tyのプラグインに変えることさえできました.
    ホープは、この便利な場合は、それについて何かを議論する場合は、上に到達すると思います.
    enum属性をもつカラムの値を取得する [初心者][rails]
    [programmers]ブリッジトラック