问题标签 [twitter-card]

我正在构建的应用程序上有一个 Twitter 分享按钮。我正在使用 Twitter 卡片<meta>标签（文档）来定义显示在 Twitter 上的图像。该应用程序是动态的，允许您共享个人“报告”。当您共享单个报告时，我有一个查询参数?report=1608（参见示例）。

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

这可以做到吗？有任何想法吗？

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

我想用图像显示内容。我已经看到 twitter 标签是现在我可以分享 twitter 的形式。我需要给什么链接。甚至它已通过 twitter 验证器工具进行验证。

这是形成的标签

我正在使用 shareX 将我的屏幕截图上传到网络服务器，并且我希望 Twitter 卡与我的图像直接链接一起使用。我知道这是可能的，因为有带有 Puu.sh 直接链接的 Twitter 卡片。

我正在重构一个旧页面，但我遇到了Facebook 调试验证器的问题。

这种类型的无关属性
对象不允许名为“twitter:card”的属性。

这种类型的无关属性
对象不允许名为“twitter:title”的属性。

这种类型的无关属性
对象不允许名为“twitter:description”的属性。

Parser Mismatched Metadata
此元数据的解析器结果与输入元数据不匹配。这可能是由于数据以一种意外的方式排序、为一个属性提供了多个值而只期望一个值、或者给定属性的属性值不匹配造成的。以下是解析结果中未显示的输入属性：'twitter:card, twitter:title, twitter:description'

这些标签应该有什么重要性吗？或者我该如何修复它？

Blogger 有一些用于获取帖子图片的布局数据标签，例如data:blog.postImageUrl（获取帖子中第一张图片的 URL）和data:blog.postImageThumbnailUrl（生成帖子中第一张图片的 70×70 像素缩略图，这太小了在 Facebook/Twitter/等上分享时使用）。

但是，在发布帖子时，Blogger 会自动使用您帖子中的第一张图片生成自己的og:image元标记，并使用您图片的特别调整大小和/或裁剪的版本。重要的是，此生成的图像将忽略您可能通过修改s1600其 URL（在此处解释）中对帖子图像进行的任何自定义调整大小或裁剪，返回一个非常适合在社交媒体网站上共享的大尺寸图像。（它甚至按照 Facebook 的“<a href="https://developers.facebook.com/docs/sharing/best-practices#images" rel="nofollow noreferrer" 中的建议将图像裁剪为 1.91:1 的比例>最佳实践”。）

这是一个例子：

原图网址（尺寸：600×450：）
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/s1600/Montreal-Biodome-exterior.jpg

使用自定义大小值调整大小的图像w180（最大宽度为 180 像素）：
https ://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w180/Montreal-Biodome-exterior.jpg

这是 Blogger 自动生成的图像（裁剪为 600×315）： https ://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-pk-no-nu/Montreal -Biodome-exterior.jpg

请注意自动生成的图像如何使用自己的大小值w1200-h630-p-k-no-nu，完全忽略了w180I 指定的值。

对我来说，问题是我还使用 Twitter 的“大图像摘要卡”。我尝试twitter:image使用 Blogger 数据标签指定用于卡片元标签的图片 URL，如下所示：

除了postImageThumbnailUrl上面提到的第一个 ( ) 太小了 70×70 px，而第二个 ( data:blog.postImageUrl) 获取自定义大小值为 的图像 URL w180，返回的图像只有 180 px 宽——同样没用用于在 Twitter 上共享（生成的 Twitter Card 使用空白占位符图像）。

我现在所做的是twitter:image完全删除标签，这迫使 Twitter 使用og:image标签，以便链接共享工作。但是，如果可能的话，我更愿意使用twitter:image带有正确图像数据标签的标签。

所以这是我的问题：有谁知道数据标签是什么（如果存在），以获取w1200-h630-p-k-no-nuBlogger 为每个帖子生成的大的、裁剪版本的帖子图像？像这样：

在使用上图的帖子中，将呈现为：

这是我的网站https://www.healthdrop.in的网址，我得到了

错误：由于请求超时，获取页面失败。

在https://cards-dev.twitter.com/validator上尝试时

我尝试了在不同网站上提到的每一个修复，但没有成功。

检查所有元数据

我与twittercommunity取得联系，他们说我的apache配置不正确，问题是

“其他错误”最常见的是 SSL 错误配置。对于您的服务器，我看到 SSL3 警报 read:warning:unrecognized name，这表明您遇到了与此类似的错误，该错误也在故障排除帖子中链接。

所以我跑来apachectl configtest测试我的apache配置，结果是

语法OK

我在SSLLABS上检查我的网站的 SSL

我尝试了这里提到的步骤，但仍然没有成功。

谁能指导我更多。我正在使用AWS EC2 ubuntuwithAWS S3图像。

我想 在我的 Twitter 帐户上集成类似https://twitter.com/BlackLifesMater/status/904648980750934016的功能，我将如何做到这一点。

我阅读了这两个文档页面：summary和 summary-card-with-large-image，但我并没有真正看到区别。

例子：

最后两者之间的实际区别是什么？渲染看起来相同：

我看过一些网站，通过查看其来源，没有任何twitter:*元标记，例如：

但在 Twitter 上共享 URL 时，仍然会出现在 Twitter 卡片上。

他们有og:image元标签，所以我认为带有 Opengraph 标签的页面：og:image、og:title等会自动在 Twitter 上用卡片呈现。但经过测试，似乎没有。

问题：是否有 Twitter 功能使该页面没有特定于 Twitter 的元标记，但 Opengraph 标记将使用摘要或 summary_large_image 卡自动呈现？

我在我的html页面中写了下面的代码

但是显示的图像preview card和我在推特上发布的帖子图像未显示在推特帖子页面上

twitter card我可以在代码中完成的任何其他步骤或任何错误，所以请帮助我解决这个问题