Es ist ziemlich aufwandsarm, eine große, schicke Linkvorschau in sozialen Medien zu erhalten. Werfen Sie eine Handvoll spezifischer <meta>-Tags auf eine URL und Sie erhalten eine große Bild-Titel-Beschreibung. Hier ist die Twitter-Version eines Artikels auf dieser Seite
Es ist auf dieser Seite besonders aufwandsarm, da unser Yoast SEO-Plugin die korrekten Tags automatisch setzt. Das Bild, das es standardmäßig verwendet, ist die „Featured Image“-Funktion von WordPress, die wir sowieso verwenden.
Ich bin ein Fan dieser Art von Verbesserung für so wenig Arbeit. Jetpack hilft auch dabei, indem es Dinge automatisiert.
Aber nehmen wir an, Sie verwenden diese speziellen Tools nicht. Vielleicht ist das Erstellen eines Bildes pro Blogbeitrag nicht einmal etwas, das Sie tun möchten, aber Sie möchten trotzdem etwas Schönes für die Vorschau in den sozialen Medien haben.
Wir haben das schon einmal behandelt. Sie können das „Bild“ mit HTML und CSS gestalten, indem Sie Inhalte und Metadaten verwenden, die Sie bereits aus dem Blogbeitrag haben. Sie können es mit Puppeteer (oder ähnlichem) in ein Bild umwandeln und dieses dann für das Bild in den Meta-Tags verwenden.
Ryan Filler hat diesen Prozess so detailliert beschrieben, wie ich es bisher gesehen habe.
- Erstellen Sie eine Route auf Ihrer Website, die dynamische Daten aus der URL übernimmt, um das Layout zu erstellen
- Erstellen Sie eine Cloud-Funktion, die diese Route aufruft, sie in ein Bild umwandelt und es in Cloudinary hochlädt (zur Optimierung und Auslieferung)
- Jedes Mal, wenn das Bild angefordert wird, prüfen Sie, ob Sie es bereits erstellt haben. Wenn ja, liefern Sie es von Cloudinary aus; wenn nicht, erstellen Sie es und liefern Sie es dann aus.
Diese Dinge bringen mein Gehirn zum Kochen. Was wäre, wenn wir gar kein Rasterbild erstellen müssten?
Vielleicht könnten wir anstelle eines Rasterbilds SVG verwenden? SVG wäre einfach zu schablonieren, und wir wissen, dass <img src="file.svg" alt="" /> extrem leistungsfähig ist. Aber... Twitter sagt
Bilder müssen kleiner 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.
Fünfzig traurige Gesichter, Twitter. Aber fahren wir mit diesem Gedankenexperiment fort.
Wir brauchen Raster. Das <canvas>-Element kann eine PNG-Datei ausgeben. Was wäre, wenn die Cloud-Funktion, mit der Sie gesprochen haben, ein tatsächlicher Browser wäre? Richard Young nannte das letztes Jahr eine „Browserfunktion“. Vielleicht könnte der Browser-in-der-Cloud diese SVG-Schablonierung durchführen, von der wir träumen, und sie dann auf eine Leinwand zeichnen und diese PNG-Datei ausgeben?
Meh, ich bin mir nicht sicher, ob das etwas löst, da Sie immer noch die Puppeteer-Abhängigkeit hätten und dies die Bilderstellung eher noch komplizierter macht. Dennoch reizt mich die Möglichkeit, native Browserfunktionen auf Serverebene nutzen zu können.
Hey, ich bin's!
Ich glaube nicht, dass ich es in diesem Artikel erwähnt habe, aber ich habe tatsächlich herumprobiert, indem ich versucht habe, einen Base64-kodierten String direkt in der Antwort zurückzugeben, aber wie Sie sagten, ist der Twitterbot etwas wählerisch, was genau er akzeptiert.
Etwas mit SVG zu machen ist jedoch super interessant und nicht einmal etwas, worüber ich nachgedacht habe, und es könnte viele coole Möglichkeiten eröffnen.
Interessant – ich weiß, dass .net auf dem Server Bilder generieren kann, da ich das in den 00er Jahren gemacht habe; das würde wahrscheinlich immer noch in dotnet core in einer Lambda- oder Azure-Funktion funktionieren, sodass diese Bilder als leichtgewichtiger Dienst generiert werden könnten?
Wenn das nicht geht, hat imagemagick eine Lambda-Layer-Funktion, sodass dies sicherlich möglich wäre.
Beides wäre wahrscheinlich schlanker als Puppeteer oder Phantom.
Ich habe darüber nachgedacht, und wenn man Inhalte bereits in einem Browser bearbeitet, könnte man dann die Vorschau über einen Service Worker oder eine Hintergrundaufgabe rendern, wenn man auf „Senden“ klickt?