Question

我正在尝试制作一张使用HTML元标记的Twitter照片卡。

第一个问题是，标签看起来像这样

<meta property="twitter:image" id="photo" content="http://chart.apis.google.com/chart?chst=d_text_outline&chld=000000|15|h|FFFFFF|_|I+didnt+want+to+be+embarrassed%2C+so+I+claimed+that+I+had+a%7Clot+of+work+to+do.|||" />

注意：网址中有＆符号（＆amp;）。通过Twitter验证程序运行时，它会将&更改为&。这使得网址无效。 %26（＆amp;的代码）也是如此。

接下来，内容实际上是一个占位符。我正在将一个来自Flask的URL传递给JavaScript document.getElementById("photo").content = {{ imageurl|safe }}，它可以工作（我检查加载页面的源代码）。但Twitter Photo Card验证器会拉出占位符，而不是更新的占位符。

如何解决这两个问题？

Answer 1

&是 HTML转义，因为它自己的&是转义开始的标记。换句话说，在HTML源代码中为角色使用&是正常且正确的。

看看这个HTML：

<a href="http://chart.apis.google.com/chart?chst=d_text_outline&amp;chld=000000|15|h|FFFFFF|_|I+didnt+want+to+be+embarrassed%2C+so+I+claimed+that+I+had+a%7Clot+of+work+to+do.|||">Correct link with &amp;amp; character in the URL</a>

请注意，&已在&属性中以href转义。如果您查看浏览器中的链接（例如使用JSFiddle live example），您会发现浏览器已正确解释了转义的＆符号。单击URL时，可以。

这同样适用于您的Twitter content标记上的meta属性。 Twitter将提取参数并考虑HTML转义。

您需要直接生成twitter卡属性，而不是使用JS，因为Twitter抓取工具不会执行Javascript：

<meta property="twitter:image" id="photo" content="{{ imageurl }}" />

请注意， Jinja2 将正确转义网址，包括将&替换为&，前提是您未在此使用|safe，以便实际上它会正确地逃脱它。

此外，您不能在Twitter照片卡中使用chart.apis.google.com网址，因为Google专门disallows robots from accessing the site。 Twitter不会接受chart.apis.google.com个网址，因为他们希望下载图片以进行调整大小，但也会遵守Google规定的robots.txt规则。

推特照片卡拉

1 个答案: