Question

我正在尝试用他的tumblr博客帮助我的朋友，因为我知道代码而他没有。 Facebook Open Graph要求og：image至少为200x200，以便在链接到您的网站时显示图像，但tumblr会在您的主页上强制显示128x128的图标，因此Facebook无法正确链接到您的图片。

例如，访问Facebook的his site对象调试器，您可以看到有警告说

提供og：图像不够大。请使用至少200x200像素的图像。将使用图像“http://24.media.tumblr.com/7058d8a59658ff7e39e8ee83a8a72fc9/tumblr_n2ho09BYPS1sej21so1_500.jpg”。

我尝试编写一个jQuery函数，该函数应该在他的网站上更改他的og:image的值，但是几乎看起来tumblr后来进入并在我完成更改后更改了代码。以下是我的代码：

<script>
$( document ).ready(function() {
    var metas = document.head.getElementsByTagName("meta");
    for (var i=0; i<metas.length;i++)
    {
        if(metas[i].getAttribute("property"))
            console.log(metas[i].getAttribute("property"));
        if(metas[i].getAttribute("property") == "og:image")
        {
            console.log("GOT IT!");
            metas[i].setAttribute("content", "http://25.media.tumblr.com/avatar_8c69b027eab0_512.png");
            console.log(metas[i].getAttribute("content"));
        }
    }
});
</script>

它似乎打印出了我所期望的一切，但当我访问他的网站并查看他的源代码时，它保留了他的og：image的旧值，而不是我设置的新值。

您可以转到his site并查看控制台以查看我的代码是否打印出预期结果，但是当您查看源代码时，og：图像没有得到更新。

Answer 1

当facebook读取发布到其网站的页面时，Javascript不会被执行。 jQuery被忽略，因此它将抓取页面上的第一个大图像。

如果您只是设置为头像。为什么不直接硬编码tumblr主题HTML中的链接？

<meta property="og:image" content="http://25.media.tumblr.com/avatar_8c69b027eab0_512.png"/>

如何将tumblr og：image更改为至少200x200？

1 个答案: