社交媒體自動生成圖片指南

發佈於2025-04-14

我一直在考虑社交媒体图像。您知道，当您在Twitter，Facebook或iMessage等地共享链接时（可以）显示的图像。您本质上是在没有他们的情况下将钱留在桌子上，因为他们将一份带有一些小链接的常规帖子变成了一个帖子，上面有一个很大的Honkin注意力Grabbin图像，并带有大量可单击的区域。在网站上的任何图像中，社交媒体图像可能是网站上最受欢迎，最记忆，最被网络要求的图像的第一。

本质上是HTML的实现：

我想我再次考虑它，因为Github似乎有新的社交媒体卡。这些是新的，对吗？

这些github社交媒体图像显然是编程生成的。查看一个示例URL。

自动化

虽然我认为您可以从完全手工制作的定制社交媒体形象中获得很多轰动，但对于拥有很多页面的网站而言，这是不切实际的：博客，电子商务……您知道我的意思是什么。这样的网站的诀窍是通过以某种方式模板来自动化其创建。我过去提到过其他人的意愿，但让我们回顾一下：

Drew McLellan: Dynamic Social Sharing Images

Vercel: Open Graph Image as a Service
Phil Hawksworth: social-image-generator
Ryan Filler: Automatic Social Share Images

用作社交媒体映像？我喜欢这个想法，但是这意味着可以访问一直在运行的节点服务器（Puppeteer在节点上运行），或者您可以作为无服务器函数点击。因此，难怪这个想法引起了jamstack人群的共鸣，他们已经习惯了运行构建过程和利用无服务器功能之类的事情。

我认为在URL上“托管”无服务器函数的想法 - 并传递通过URL参数在屏幕截图中包含的内容的动态值也很聪明。 SVG路由 我有点挖掘使用SVG作为您模板的社交媒体图像的事物的想法，部分是因为它具有如此固定的坐标，可以在内部设计，这与我的心理模型相匹配，以使您需要设计社交媒体图像所需的确切维度。我喜欢SVG如此合并。

乔治·弗朗西斯（George Francis）博客“创建自己的生成SVG社交图像”，这是所有这些都很好地结合在一起的绝妙例子，并带有随机化和奇思妙想。我也喜欢可满足的技巧，使其成为一次性屏幕截图的有用工具。

我也涉足动态SVG创建：在我们的会议网站上查看此会议页面。

不幸的是，SVG不是社交媒体图像的支持图像格式。以下是Twitter：

在卡中使用的图像URL。图像的大小必须小于5MB。支持JPG，PNG，WebP和GIF格式。仅使用动画GIF的第一帧。不支持SVG。

仍然，在SVG中组成/模板可能很酷。您将其转换为另一种格式以供最终使用。一旦

是SVG，从SVG到PNG的转换几乎很容易。就我而言，我使用了在构建过程中运行的SVG2PNG和非常小的Gulp任务。

wordpress呢？

我没有WordPress网站的构建过程 - 至少不是每次发布或更新帖子时运行的一个。但是WordPress将从动态的社交媒体图像中受益于

（在我的世界中）。

并不是我现在没有它们。 Jetpack在使这项工作很好的过程中有很长的路要走。它使《社交媒体形象》的“特色图像”成为了我的预览，并自动到社交网络。这是我对此进行的视频。那会让我到一个附着特色图像并很好地显示的地方。

，但并不能自动化他们的创建。有时，仅定制图形就是要走的路（上面的图形可能就是一个很好的例子），但也许更常见的模板卡是必经之路。

幸运的是，我从Daniel Post那里抓住了WordPress的社交图像生成器。看看如何花哨：
这正是WordPress所需的！

丹尼尔本人帮助我创建了一个针对CSS-Tricks的自定义模板。我有一个巨大的梦想，其中有一堆模板可供选择，其中包含标题，作者，选择的引号，特色图像和其他内容。到目前为止，我们仅定居两个，一个带有标题和作者的模板，以及带有特色图像，标题和作者的模板。这些图像是由该元数据创建的：

这不是木偶。这甚至不是Phantomjs供电的SVGTOPNG。这是PHP生成的图像！甚至不是想象中的，而是直截了当的GD，这是PHP中的东西。因此，这些图像不是用任何形式的语法创建的，这些语法可能对前端开发人员感到舒适。最好使用其中一个模板，但是如果您想了解我的自定义版本是如何编码的（Daniel），Lemme知道，我可以在公共场所发布代码。

很酷的结果，对？

我明白为什么必须这样构建它：它使用的是WordPress可以运行的任何技术。这非常具有WordPress的精神。但这确实使我希望创建模板可以以更现代的方式完成。就像如果您的社交媒体映像的模板就像其他模板文件一样，您的社交媒体图像的模板就像social-image.php一样，那不是很酷吗？您是否使用所有普通的WordPress API来模板和设计该页面？几乎像ACF块？并且它获取屏幕截图并使用了吗？我会为你回答：是的，那太酷了。