私は再びソーシャルメディアの画像について考えてきました。ご存知のように、Twitter、Facebook、Imessageなどの場所でリンクを共有するときに（可能な）画像が表示されます。あなたは本質的に彼らなしでテーブルにお金を残しています。なぜなら、彼らはその中に小さなリンクが入っている定期的な投稿を、大きなクリック可能な領域を備えた大きなホンキンの注意力のイメージを備えた投稿に投稿するからです。 Webサイト上の任意の画像の中で、ソーシャルメディアの画像は、サイト上の最も視聴され、最も記憶に残る、ほとんどのネットワーク要求の画像である可能性があります。

それを実現させるのは本質的にこのHTMLのビットです：

ただし、他のHTMLタグが正しくなるための束があるので、必ず読んでください。

Githubには新しいソーシャルメディアカードがあるように見えるので、もう一度考えていると思います。これらは新しいですよね？

これらのgithubソーシャルメディア画像は、明らかにプログラム的に生成されます。 URLの例をご覧ください。

オートメーション

完全に手作りされたオーダーメディーのソーシャルメディアイメージから多くのことを得ることができると思いますが、それはブログ、eコマースなど、多くのページがあるサイトでは実用的ではありません。そのようなサイトのトリックは、何らかの形でテンプレートを介して作成を自動化することです。私は過去に他の人がこれについて見たと言及しましたが、要約しましょう：

• Drew McLellan：Dynamic Social Sharing Images
• Vercel：vercel：open graph image as a service
• phil hawksworth：social-image-generator
• ryan filler：自動社会共有画像

あなたはそれらすべてが共通していることを知っていますか？操り人形。

Puppeteerは、Chromeのヘッドレスコピーをスピンアップして制御する方法です。ブラウザウィンドウのスクリーンショットを撮影できるというこの非常に便利な機能があります。これが、コーディングフォントのWebサイトがスクリーンショットを行う方法です。スクリーンショッティングのアイデアは、人々の心を動かすものです。 HTMLとCSSでソーシャルメディアテンプレートを設計してから、Puppetersにスクリーンショットを依頼して、をソーシャルメディアイメージとして使用してください。

私はこのアイデアが大好きですが、それは常に実行されているノードサーバー（Puppeteerがノードで実行される）にアクセスできるか、またはサーバーレス関数としてヒットすることができることを意味します。したがって、このアイデアが、ビルドプロセスの実行やサーバーレス機能の活用などのことにすでに慣れているJamstackの群衆と共鳴したのも不思議ではありません。

URLでサーバーレス関数を「ホスト」するという考えと、URLパラメーターを介してスクリーンショットに含めるものの動的な値を渡すことも賢いと思います。

svgルート

SVGをソーシャルメディア画像のテンプレートとして使用するというアイデアを掘ります。これは、ソーシャルメディアイメージを設計するために必要な正確な寸法を作成するという私のメンタルモデルと一致するような固定された座標があるためです。私はSVGがとても構成可能である方法が好きです。

ジョージ・フランシスは、「独自の生成的なSVGソーシャルイメージを作成する」というブログを書いています。私は満足のいくトリックも好きで、1回限りのスクリーンショットのための便利なツールになります。

動的なSVG作成にも手を出しました。会議サイトでこの会議ページをご覧ください。

残念ながら、SVGはソーシャルメディア画像のサポートされている画像形式ではありません。これが具体的にTwitterです：

カードで使用する画像のurl。画像は5MB未満のサイズでなければなりません。 JPG、PNG、WebP、およびGIF形式がサポートされています。アニメーションGIFの最初のフレームのみが使用されます。 SVGはサポートされていません。

それでも、SVGでの作曲/テンプレートはクールな場合があります。最終使用のために別の形式に変換します。

が

を持っていると、SVGからPNGへの変換はほぼ簡単になります。私の場合、私はSVG2PNGと、ビルドプロセス中に実行される非常に小さなガルプタスクを使用しました。 WordPressはどうですか？

WordPressサイトのビルドプロセスはありません。少なくとも、投稿を公開または更新するたびに実行されるものはありません。しかし、WordPressは、ダイナミックなソーシャルメディアイメージから

（私の世界で）の最も多くのことに役立ちます。 今は持っていないわけではありません。 Jetpackは、この作品をうまく作るのに大いに役立ちます。投稿の「注目のイメージ」をソーシャルメディアイメージにし、プレビューすることができ、ソーシャルネットワークへの自動ポストを可能にします。これが私がそれについてしたビデオです。それは、注目の画像が添付されてきれいに表示される場所に私を連れて行くつもりです。

しかし、それらの作成を自動化するわけではありません。オーダーメイドのグラフィックだけが行く方法である場合があります（上記のものはその良い例かもしれません）が、おそらくより頻繁にテンプレートされたカードが行く方法です。

幸いなことに、私はダニエル・ポストのWordPressのためにソーシャルイメージジェネレーターのWindを捕まえました。派手なことを見てください： これはまさにWordPressが必要とするものです！

ダニエル自身が、CSS-Tricksのためだけにカスタムテンプレートを作成するのを手伝ってくれました。タイトル、著者、選ばれた引用、特集画像などを組み込んだテンプレートを選択できるという大きな夢がありました。これまでのところ、タイトルと著者のテンプレート、および特集画像、タイトル、および著者を備えたテンプレートである2つだけに落ち着きました。画像はその場でそのメタデータから作成されます：

これは操り人形ではありません。これは、Phantomjsを搭載したsvgtopngでさえありません。これはPHP生成された画像です！そして、ImageMagickでさえ、まっすぐにGD、PHPに直接構築されたものです。したがって、これらの画像は、フロントエンド開発者に快適に感じる可能性のあるいかなる種類の構文でも作成されていません。おそらく、テンプレートのいずれかを使用する方が良いでしょうが、カスタムのカスタムがどのようにコーディングされたか（ダニエルによる）を確認したい場合は、レムが知っているので、コードをどこかに投稿できます。

かなりクールな結果、そうですか？

なぜこのように構築しなければならなかったのかを理解しています。WordPressが実行できる場所ならどこでも文字通り動作するテクノロジーを使用しています。それは非常にワードプレスの精神にあります。しかし、それは私がよりモダンな方法でテンプレートを作成できることを願っています。ソーシャルメディアの画像のテンプレートが、他のテンプレートファイルのようにテーマのルートにあるSocial-Image.phpのようなものだったら、それはクールではないでしょうか？そして、あなたはそのページをすべての通常のWordPress APIでテンプレートしてデザインしますか？ ACFブロックのようにほとんど？そして、それはスクリーンショットを取得して使用しますか？私はあなたのために答えます：はい、それはかっこいいでしょう。