如何将 og:url 设置为 jquery 画廊幻灯片？答案

【问题标题】：How to set og:url to jquery gallery slides?如何将 og:url 设置为 jquery 画廊幻灯片？
【发布时间】：2017-10-09 07:11:35
【问题描述】：

嘿，互联网上的好人。

我想将 meta og:url 设置为我的 jquery 库中的幻灯片。
我在 Wordpress 网站上使用 lightGallery。

当使用 facebook 对象调试器时，我的 url（幻灯片）site/page#lg=1&slide=0 变为 site/page。
站点/页面在对象调试器中被列为规范 URL - 我希望这是画廊幻灯片，site/page#lg=1&slide=0。

那么如何将 og:url 设置为幻灯片，然后希望将完整的 url 设置为规范的 url？

这里已经完成了，我想...https://postimg.org/image/7472hl0g7f/

这里有一个巨大的高五：)

【问题讨论】：

url 片段被调试器忽略
@luschn 非常感谢您的回答。但是必须有一种方法可以将片段设置为 og:url。在这里完成：postimg.org/image/7472hl0g7f 或者我完全偏离了标准？ :)
你能分享一个你自己的网址吗？
我希望你不要动态设置标签，因为 facebook 忽略了 javascript ;)
@luschn 当然。 thunder-power.dk/album/guldtuben#lg=1&slide=0

标签： javascript php jquery wordpress facebook

【解决方案1】：

可能是因为您的插件使用了 'href' 而不是 'data-src' 属性。检查此链接：https://github.com/sachinchoolur/lightGallery/issues/103

编辑：

在执行lightGallery插件之前手动添加data-src：

$("article section.body figure").each(function() {
    var image = $(this).find('img'),
        link = $(this).find('a');

    image.attr('data-src', link.attr('href'));

    link.lightGallery();
});

【讨论】：

@Paul 谢谢。我正在使用数据属性

【解决方案2】：

您的测试网址：http://thunder-power.dk/album/guldtuben#lg=1&slide=0

该网址的OG标签：

<meta property="og:url" content="http://thunder-power.dk/album/guldtuben" />

如您所见，og:url 中缺少该片段。 JavaScript 将被忽略，您必须设置正确的og:url 服务器端。

关于如何使用 PHP 获取片段的信息：Get fragment (value after hash '#') from a URL in php

【讨论】：

太棒了。非常感谢！我看不出如何在服务器端为正确的幻灯片获取正确的片段。那得开始打字和尝试了。

【解决方案3】：

我认为您正在使用 Jquery/js 动态设置元数据。对于元属性集内容属性如：<meta property="og:url" content="https://csample.com">

Facebook 爬虫无法执行 Jquery 来获取 url 的动态状态参数（如 #lg=1&slide=0）的更新元数据。 FB 对象调试器将为 #lg=1&slide=0 显示 nil 并仅对 site/page 提供元响应，直到您不为每个 #lg=1&slide=0 制作静态页面页面或为爬虫制作预渲染的 html 引用。

【讨论】：

感谢回复:)