自動生成されたソーシャルメディア画像

ソーシャルメディアの画像について考えています 再び。 Twitter、Facebook、iMessage などの場所でリンクを共有すると、表示される (可能性がある) 画像です。なぜなら、彼らは小さな古いリンクが含まれた通常の投稿を、大きなクリック可能領域を備えた大きな注意を引く画像を含む投稿に変えるからです。 Web サイト上の画像の中で、ソーシャル メディア画像は、サイト上で最も多く閲覧され、最も記憶され、最もネットワークからリクエストされた画像である可能性があります。

基本的に、これらを実現するのは次の HTML 部分です。

<meta property="og:image" content="/images/social-media-image.jpg" />

ただし、必ず それを読んでください 他にも正しく設定する必要のある HTML タグがたくさんあるためです。

GitHub に新しいソーシャルメディアカードが追加されたようなので、また考えてみようと思います。これらは新しいですよね？

これらの GitHub ソーシャル メディア画像は明らかにプログラムによって生成されています。チェックアウト URLの例.

オートメーション

完全に手作りのオーダーメイドデザインのソーシャル メディア画像から多くの効果を得ることができるとは思いますが、ブログや e コマースなど、ページ数の多いサイトではそれは現実的ではありません。このようなサイトの秘訣は、テンプレートを使用して作成を自動化することです。これに関する他の人の見解については、 過去ですが、要約してみましょう。

これらすべての共通点を知っていますか? 人形.

Puppeteer は、Chrome のヘッドレス コピーを起動して制御する方法です。これがある 信じられないほど便利な機能 ブラウザウィンドウのスクリーンショットを撮ることができるかどうか： await page.screenshot({path: 'screenshot.png'});。そのようにして 私たちのコーディングフォント Web サイトでスクリーンショットが撮影されています。スクリーンショットのアイデアは人々の心を動かします。 HTML と CSS でソーシャル メディア テンプレートをデザインし、Puppeteer にスクリーンショットを撮ってもらい、 それ ソーシャルメディアのイメージとして？

私はこのアイデアが大好きですが、それは常に実行されているノードサーバー (Puppeteer はノード上で実行されます) にアクセスできるか、または次のコマンドを実行できることを意味します。 サーバーレス関数。したがって、このアイデアが、ビルド プロセスの実行やサーバーレス機能の活用などの作業にすでに慣れている Jamstack 群衆の共感を呼んだのも不思議ではありません。

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

SVGルート

ソーシャル メディア画像のテンプレートとして SVG を使用するというアイデアは、ちょっと気に入っています。理由の 1 つは、SVG には内部でデザインするための固定座標があり、ソーシャル メディア画像のデザインに必要な正確な寸法を作成するという私のメンタル モデルと一致するからです。好き SVG はどのようにして構成可能なのか.

ジョージ・フランシスがブログを書きました 「独自の生成 SVG ソーシャル イメージを作成する」 これは、ランダム化と奇抜なタッチを加えて、これらすべてがうまくまとまっている素晴らしい例です。私は好き contenteditable トリックもあり、1 回限りのスクリーンショットを撮るのに便利なツールです。

私も動的な SVG の作成に手を出しました。チェックしてください。 このカンファレンスページ カンファレンスサイトで。

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

カードで使用する画像の URL。画像のサイズは 5MB 未満である必要があります。 JPG、PNG、WEBP、GIF 形式がサポートされています。アニメーション GIF の最初のフレームのみが使用されます。 SVG はサポートされていません。

ツイッタードキュメント

それでも、SVG での合成やテンプレート化は素晴らしいものになります。最終的に使用するために別の形式に変換します。一度あなたが 持ってる SVG の場合、SVG から PNG への変換はほとんど簡単です。私の場合、使用したのは、 svg2png & 非常に小さなGulpタスク ビルドプロセス中に実行されます。

WordPress についてはどうですか?

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

今は持っていないわけではありません。 ジェットパックは大いに活躍します これをうまく機能させるために。投稿の「アイキャッチ画像」をソーシャル メディア画像にして、プレビューしたり、ソーシャル ネットワークに自動投稿したりできるようにします。 これについて私が作ったビデオがあります。 これで、注目の画像が添付され、適切に表示される場所に移動します。

ただし、作成が自動化されるわけではありません。場合によっては、オーダーメイドのグラフィックのみを使用する方がよい場合もありますが (上記のグラフィックはその良い例かもしれません)、おそらく多くの場合、適切にテンプレート化されたカードを使用する方が適切です。

幸いなことに、私はその風をキャッチしました ソーシャルイメージジェネレーター Daniel Post の WordPress 用。なんて豪華でしょう：

これはまさに WordPress に必要なものです。

Daniel 自身が、CSS-Tricks 専用のカスタム テンプレートの作成を手伝ってくれました。私には、タイトル、著者、選択した引用文、注目の画像などを組み込んだ大量のテンプレートから選択できるようにするという大きな夢がありました。これまでのところ、タイトルと作成者を含むテンプレートと、アイキャッチ画像、タイトル、作成者を含むテンプレートの 2 つだけに落ち着きました。画像はそのメタデータからオンザフライで作成されます。

これはパペティアではありません。これは PhantomJS を利用した svgtopng ですらない。これは PHP で生成された画像です。そしてさえない ImageMagick、 だけど ストレートにGD、PHP に直接組み込まれているものです。したがって、これらのイメージは、フロントエンド開発者が快適に感じるような構文では作成されていません。おそらくテンプレートの 1 つを使用する方が良いでしょうが、私のカスタム テンプレートが (ダニエルによって) どのようにコード化されたのか知りたい場合は、教えてください。そのコードを公開の場所に投稿できます。

かなり素晴らしい結果ですね?

なぜこの方法で構築しなければならなかったのか理解できます。文字通り、WordPress が実行できる場所ならどこでも機能するテクノロジーを使用しているからです。それはまさに WordPress の精神に沿ったものです。しかし、テンプレートの作成をもっと現代的な方法で行うことができればいいのにと思います。ソーシャル メディアの画像のテンプレートが次のようだったら素晴らしいと思いませんか? social-image.php 他のテンプレート ファイルと同様にテーマのルートにありますか?そして、通常の WordPress API をすべて使用してそのページをテンプレート化し、デザインしますか?のように ACFブロック ほとんど？そしてそれはスクリーンショットを取得して使用されますか？私はあなたのために答えます：はい、それは素晴らしいでしょう。

出典: https://css-tricks.com/auto-generated-social-media-images/