How to set og:url to jquery gallery slides?

Question

Hey good people of the internet.

I'd like to set the meta og:url to the slides in my jquery gallery.
I'm using lightGallery on a Wordpress site.

When using facebook object debugger my url (slide) site/page#lg=1&slide=0 becomes site/page.
site/page is listed as Canonical URL in the object debugger - I would like this to be the gallery slide, site/page#lg=1&slide=0.

So how can I set the og:url to the slides and then hopefully have that full url to be the canonical url?

It has been done here, I think... https://postimg.org/image/7472hl0g7f/

There's a huge high five at stakes here :)

@luschn Really appreciate your answer. But there must be a way to set the fragment as og:url. It's done here: https://postimg.org/image/7472hl0g7f/ Or am I completely off mark? :) — Nicolai Simonsen, Oct 09 '17 at 07:42
i hope you don´t set the tags dynamically, because facebook ignores javascript ;) — andyrandy, Oct 09 '17 at 07:52
@luschn sure. http://thunder-power.dk/album/guldtuben#lg=1&slide=0 — Nicolai Simonsen, Oct 09 '17 at 08:19

Paul · Answer 1 · 2017-10-09T07:41:08.413

1

Maybe it's because your plugin using 'href' instead of 'data-src' attributes. Check this link : https://github.com/sachinchoolur/lightGallery/issues/103

EDIT :

Manually add the data-src before executing the lightGallery plugin:

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

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

    link.lightGallery();
});

edited Oct 09 '17 at 07:41

answered Oct 09 '17 at 07:16

Paul

380
1
10

@Paul Thanks. I'm using data-attributes – Nicolai Simonsen Oct 09 '17 at 08:53

score 0 · Answer 2 · answered Oct 09 '17 at 07:48

I think You are setting dynamically meta data using Jquery/js. For meta property set content attribute like: <meta property="og:url" content="https://csample.com">

It is not possible for facebook crawler to execute Jquery to get updated meta data for dynamic state parameters of url like #lg=1&slide=0. FB object debugger will show nil for #lg=1&slide=0 and gives meta response only for site/page , until you does not make static page page for each #lg=1&slide=0 or make prerendered html reference for crawler.

Thanks for replying :) – Nicolai Simonsen Oct 09 '17 at 10:26 — Nicolai Simonsen, Oct 09 '17 at 10:26

score 0 · Accepted Answer · answered Oct 09 '17 at 08:30

0

Your test URL: http://thunder-power.dk/album/guldtuben#lg=1&slide=0

The OG tag of that URL:

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

The fragment is missing in the og:url, as you can see. JavaScript will be ignored, you have to set the correct og:url server side.

Information about how to get the fragment with PHP: Get fragment (value after hash '#') from a URL in php

answered Oct 09 '17 at 08:30

andyrandy

72,880
8
113
130

Awesome. Thanks a lot! I can't see how I would be able to get the right fragment for the right slide, server-side. Gotta get to typing and trying out then. – Nicolai Simonsen Oct 09 '17 at 08:55

How to set og:url to jquery gallery slides?

3 Answers3