用jQuery点击更改OG:IMAGE的值

Question

我刚刚建立了一个只有一个HTML页面的图像组合，其中所有图片都是动态加载的。到目前为止一切都很顺利，除了Facebook META OG:IMAGE。

由于该页面只加载一次，因此我只能一次性分配OG:IMAGE URL...但是，由于这是一个相册，我真的希望每张图片都有自己的OG:IMAGE。

这些图片是通过点击 --li class="open-pic"-- 标签来加载的。我想在每次点击 --li class="open-pic"-- 标签时更改OG:IMAGE值。

这可能吗? 我找到了一些类似这样的东西：

$('meta[name=og\\:image]').attr('content', newImageUrl);

然而，我不知道如何将这个链接到li.open-pic的onclick事件。谢谢！G.

- Cospefogo

Answer 1

由于页面只加载一次，我可以分配OG：IMAGE URL一次……但是我真的很想让每张图片都有自己的OG：IMAGE，因为这是一个相册。

客户端更改OG meta标签毫无用处——因为Facebook将通过它的爬虫读取这些标签，这意味着他们将对您的URL进行HTTP请求并查看HTML代码中的内容；而爬虫不执行任何JavaScript。

解决方案：为每个照片提供一个单独的URL，具有其自己的元信息，并使您的喜欢按钮/共享功能/任何FB功能指向每个照片的该URL。

（您如何在客户端处理事情并不重要-您仍然可以在一个页面中显示所有照片，通过AJAX加载新内容，无论您喜欢什么-但是您需要为您的照片提供单独的URL，以便将它们识别为单独的Open Graph对象。）

- CBroe

---

非常感谢您，CBroe！我真的很感激您的澄清。我正在使用WordPress环境，并且最终，我将为每张图片创建一个单独的页面 - 这是无法避免的。 - Cospefogo

Answer 2

$('li.open-pic').click(function(){
 $('meta[name=og\\:image]').attr('content', newImageUrl);
});

- Parv Sharma

---

哎呀...原来这么简单。我感到很羞愧。非常感谢。 - Cospefogo

不需要感谢 :)…如果有帮助，请不要忘记标记为答案或点赞。这可能也会帮助其他人 - Parv Sharma

我相信这不起作用...是的，它会更改元标记的值...但这是无用的，因为Facebook仍然会显示在元标记中注册的原始图像...请参阅CBroe的答案... - dsdsdsdsd

我认为你需要使用$('meta[property="og:image"]')而不是$('meta[name=og\:image]')。 - Kate

Answer 3

问题出在冒号上。尝试使用单引号和双引号，像这样：

var imgSrc = $(this).find('img').attr('src'); // image stored as variable
$('meta[property="og:image"]').attr('content', imgSrc); // assigns meta property

- danwarfel