CODEWITHSUNDEEP
javascriptphpjquerywordpressfacebook
Nicolai Simonsen
Nicolai Simonsen

Reputation: 5

How to set og:url to jquery gallery slides?

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 :)

Upvotes: 0

Views: 137

Answers (3)

andyrandy
andyrandy

Reputation: 74004

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

Upvotes: 0

Nirmal Bajpai
Nirmal Bajpai

Reputation: 229

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.

Upvotes: 0

Paul
Paul

Reputation: 380

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();
});

Upvotes: 1

Related Questions