根据参数生成自定义预览图

问题描述

当我在 Google 地图上分享某个位置的链接时，该链接会附带该位置的预览图像，如下所示：

据我所知，您可以将预览图像作为标签放在网页的某个部分，如下所示：

<Meta property="og:image" content="example.png"/>

但是这个标签是静态的，并没有真正的方法可以让它动态化。那么 Google 地图是如何做到的？

解决方法

Google 可能正在做一些特别的事情，因为他们是 Google，但绝对有可能使其成为动态的服务器端。如果 sevrer 使用模板渲染页面并了解其渲染的路线，它可以将图像替换为另一个图像，甚至可以即时生成它，例如作为 this question 中的 base64 图像。

使用 Jinja 模板（用于 Python）的一个示例是 <meta property="og:image" content="{{ map_location.thumbnail }}"/>。使用 JavaScript 模板字符串的更复杂示例可能是：

render(
  `
  <html>
  <!-- other content -->
  <meta property="og:image" content="/images/${request.parameters.id}.png"/>
  <!-- other content -->
  </html>
  `
)

html meta preview preview