Automatisch generierte Social-Media-Bilder

Ich habe wieder über Social-Media-Bilder nachgedacht. Sie wissen schon, die Bilder, die (können) erscheinen, wenn Sie einen Link in Orten wie Twitter, Facebook oder iMessage teilen. Ohne sie lassen Sie im Grunde Geld liegen, weil sie aus einem normalen Beitrag mit einem kleinen Link einen Beitrag mit einem großen, aufmerksamkeitsstarken Bild machen, mit einer riesigen klickbaren Fläche. Von jedem Bild auf einer Website ist das Social-Media-Bild vielleicht das am häufigsten angesehene, am besten erinnerte und am häufigsten netzwerkangeforderte Bild der Website.

Es ist im Grunde dieser HTML-Schnipsel, der sie zum Leben erweckt

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

Aber stellen Sie sicher, dass Sie sich darüber informieren, da es eine ganze Reihe anderer HTML-Tags gibt, die richtig gemacht werden müssen.

Ich glaube, ich denke wieder darüber nach, weil GitHub anscheinend neue Social-Media-Karten hat. Die sind neu, oder?

Diese GitHub Social-Media-Bilder sind eindeutig programmatisch generiert. Schauen Sie sich ein Beispiel-URL an.

Automatisierung

Obwohl ich denke, dass man viel Nutzen aus einem komplett handgefertigten, maßgeschneiderten Social-Media-Bild ziehen kann, ist das für Websites mit vielen Seiten nicht praktikabel: Blogs, E-Commerce... Sie wissen, was ich meine. Der Trick für solche Websites ist, ihre Erstellung irgendwie durch Templating zu automatisieren. Ich habe auf andere Meinungen dazu in der Vergangenheit verwiesen, aber lassen Sie uns kurz zusammenfassen.

• Drew McLellan: Dynamische Social-Sharing-Bilder
• Vercel: Open Graph Bild als Service
• Phil Hawksworth: social-image-generator
• Ryan Filler: Automatische Social-Share-Bilder

Wissen Sie, was all diese gemeinsam haben? Puppeteer.

Puppeteer ist eine Möglichkeit, eine headless Kopie von Chrome zu starten und zu steuern. Es hat dieses unglaublich nützliche Funktion, einen Screenshot des Browserfensters machen zu können: await page.screenshot({path: 'screenshot.png'});. So macht unsere Coding Fonts-Website die Screenshots. Die Idee des Screenshotting ist das, was die Köpfe der Leute ins Rollen bringt. Warum nicht eine Social-Media-Vorlage in HTML und CSS entwerfen, dann Puppeteer bitten, sie zu screenshotten, und *das* als Social-Media-Bild verwenden?

Ich liebe diese Idee, aber sie bedeutet, Zugriff auf einen Node-Server (Puppeteer läuft auf Node) zu haben, der entweder ständig läuft oder den man als serverless Funktion aufrufen kann. Es ist also kein Wunder, dass diese Idee bei der Jamstack-Szene Anklang gefunden hat, die es bereits gewohnt ist, Dinge wie Build-Prozesse durchzuführen und serverless Funktionen zu nutzen.

Ich denke, die Idee, die serverless Funktion unter einer URL zu "hosten" und ihr die dynamischen Werte, die in den Screenshot aufgenommen werden sollen, per URL-Parameter zu übergeben, ist ebenfalls clever.

Der SVG-Weg

Ich mag die Idee, SVG als Vorlage für Social-Media-Bilder zu verwenden, teils weil es so feste Koordinaten zum Designen gibt, was meinem mentalen Modell des Erstellens der exakten Abmessungen, die man für Social-Media-Bilder benötigt, entspricht. Ich mag, wie SVG so komponierbar ist.

George Francis bloggte „Create Your Own Generative SVG Social Images“, was ein wunderbares Beispiel dafür ist, wie all dies schön zusammenkommt, mit einem Hauch von Zufälligkeit und Laune. Ich mag auch den contenteditable-Trick, der ihn zu einem nützlichen Werkzeug für einmalige Screenshots macht.

Ich habe auch mit dynamischer SVG-Erstellung experimentiert: Schauen Sie sich diese Konferenzseite auf unserer Conferences-Website an.

Leider ist SVG kein unterstütztes Bildformat für Social-Media-Bilder. Hier ist Twitter speziell

URL des zu verwendenden Bildes auf der Karte. Bilder dürfen nicht größer als 5 MB sein. JPG-, PNG-, WEBP- und GIF-Formate werden unterstützt. Nur der erste Frame eines animierten GIFs wird verwendet. SVG wird nicht unterstützt.

Twitter-Dokumentation

Dennoch kann das Komponieren/Templating in SVG cool sein. Man konvertiert es für die endgültige Verwendung in ein anderes Format. Sobald man ein SVG *hat*, ist die Konvertierung von SVG in PNG fast trivial einfach. In meinem Fall habe ich svg2png und eine sehr kleine Gulp-Aufgabe verwendet, die während des Build-Prozesses ausgeführt wird.

Was ist mit WordPress?

Ich habe keinen Build-Prozess für meine WordPress-Website – zumindest keinen, der jedes Mal ausgeführt wird, wenn ich einen Beitrag veröffentliche oder aktualisiere. Aber WordPress würde am *meisten* (in meiner Welt) von dynamischen Social-Media-Bildern profitieren.

Es ist nicht so, dass ich sie jetzt nicht hätte. Jetpack leistet viel, um dies gut zu ermöglichen. Es macht das "Feature-Bild" des Beitrags zum Social-Media-Bild, erlaubt mir eine Vorschau und postet automatisch in sozialen Netzwerken. Hier ist ein Video, das ich dazu gemacht habe. Das bringt mich an einen Punkt, an dem die Feature-Bilder angehängt sind und gut aussehen.

Aber es automatisiert nicht ihre Erstellung. Manchmal ist eine maßgeschneiderte Grafik allein der richtige Weg (die obige könnte ein gutes Beispiel dafür sein), aber vielleicht öfter ist eine schön gestaltete Karte der richtige Weg.

Glücklicherweise habe ich von Social Image Generator für WordPress von Daniel Post erfahren. Schauen Sie, wie schick.

Das ist genau das, was WordPress braucht!

Daniel selbst hat mir geholfen, eine benutzerdefinierte Vorlage speziell für CSS-Tricks zu erstellen. Ich hatte große Träume von einer Reihe von Vorlagen zur Auswahl, die Titel, Autor, ausgewählte Zitate, Feature-Bilder und andere Dinge enthalten. Bisher haben wir uns auf nur zwei geeinigt: eine Vorlage mit Titel und Autor und eine Vorlage mit einem Feature-Bild, Titel und Autor. Die Bilder werden aus diesen Metadaten im Handumdrehen erstellt.

Das ist nicht Puppeteer. Das ist nicht einmal das PhantomJS-betriebene svgtopng. Das sind PHP-generierte Bilder! Und nicht einmal ImageMagick, sondern einfaches GD, das direkt in PHP integriert ist. Diese Bilder werden also nicht in einer Syntax erstellt, die sich für einen Frontend-Entwickler angenehm anfühlen würde. Wahrscheinlich ist es besser, eine der Vorlagen zu verwenden, aber wenn Sie sehen möchten, wie meine benutzerdefinierte Vorlage codiert wurde (von Daniel), lassen Sie es mich wissen, und ich kann den Code irgendwo öffentlich posten.

Ziemlich cooles Ergebnis, oder?

Ich verstehe, warum es so gebaut werden musste: Es verwendet Technologie, die buchstäblich überall funktioniert, wo WordPress laufen kann. Das ist sehr im Sinne von WordPress. Aber es lässt mich wünschen, dass die Erstellung der Vorlagen auf modernere Weise erfolgen könnte. Wie wäre es, wenn die Vorlage für Ihre Social-Media-Bilder einfach wie social-image.php im Stammverzeichnis des Themes liegt, wie jede andere Vorlagendatei? Und Sie gestalten und designen diese Seite mit allen normalen WordPress-APIs? Fast wie ein ACF-Block? Und sie wird gescreenshotet und verwendet? Ich antworte Ihnen: Ja, das wäre cool.