动态 Twitter 卡片图像答案

【问题标题】：Dynamic Twitter Card Images动态 Twitter 卡片图像
【发布时间】：2017-12-22 10:41:42
【问题描述】：

我在application I'm building 上有一个 Twitter 分享按钮。我正在使用 Twitter 卡 <meta> 标签 (documentation) 来定义显示在 Twitter 上的图像。该应用程序是动态的，允许您共享个人“报告”。当你分享一个单独的报告时，我有一个查询参数?report=1608 (see example)。

问题：我只能为整个网站定义一张 Twitter 卡片。我很乐意为每个共享的报告动态更改卡片信息（标题、文本、图像）。

这可以吗？有什么想法吗？

我正在考虑只使用 JavaScript 动态更新元标记，但我认为这不是一个解决方案。

【问题讨论】：

标签： javascript html twitter meta twitter-card

【解决方案1】：

不，这是不可能的。 Twitter 的卡片爬虫 (Twitterbot) 不支持在页面中执行 Javascript，并且要求元标记是静态的。无法动态执行此操作。

【讨论】：

谢谢安迪，这是我的印象。我希望有一种方法可以将自定义卡片作为查询参数添加到共享 URL。
@AndyPiper，嗨，安迪，在我在博客的标题中设置了 twitter 卡图像元标记之后。每当我在我的博客上分享一篇新文章时，该图片就会出现。但是，在我设置推特卡片图像之前，推特似乎在我的博客文章中显示了第一张图像。是这样的吗？
如果你的博客是这样设置的，是的。

【解决方案2】：

我认为你可以做 SSR。祝你好运

【讨论】：

【解决方案3】：

有可能，您可以动态加载标题、文本和图像。我试过了，它奏效了……但是在浏览器/网站上填充需要一点时间，但它可以在 twitter 应用程序上完美/立即运行……需要一种解决方法……如果你发现，请告诉我任何解决方案。我是这样使用的：


<?php
    if (isset($_GET['code'])) {
    ?>

        <meta name="twitter:card" content="summary_large_image">
        <meta property="og:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png" />
        <meta name="twitter:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png">
        <meta name="twitter:image:alt" content="image_alt">

    <?php
    }
?>

【讨论】：