Glightbox linked images do not count as “indexable pages” on Google Search Console

26 Views Asked by At

I have implemented Glightbox for a photographer website, and the functionality is excellent, however as all the enlarged photos are shown as anchor linked

<figure class="gallery-item">
    <a href="../ppl/dugmanit-158-m.webp" class="glightbox" data-glightbox="title:Client; description:Peggy Lepage Model Scouting">
      <img src="../ppl/dugmanit-158-632.webp" alt="Toronto Headshots Photographer Portfolio" fetchpriority="high" width="250" height="250" class="gallery-img">
    </a>
    </figure>
    <figure class="gallery-item h-2">
    <a href="../ppl/ejecutivo-1-m.webp" class="glightbox" data-glightbox="title:Client; description:Bulman Communication Group - Winnipeg">
      <img src="../ppl/ejecutivo-1-927.webp" alt="executive headshot" width="250" height="500" loading="lazy" class="gallery-img"></a>
    </figure>
    <figure class="gallery-item"><a href="../ppl/eggshell-m.webp" class="glightbox" data-glightbox="title:Client:; description:Eggshell Resources Inc."><img src="../ppl/eggshell-632.webp" alt="Executive Headshot" class="gallery-img"></a></figure>
    <figure class="gallery-item h-2">
    <a href="../ppl/Lena-m.webp" class="glightbox">
      <img src="../ppl/Lena-811.webp" alt="Toronto Headshots Photographer Portfolio" width="250" height="500" loading="lazy" class="gallery-img">
    </a> </figure>
    <figure class="gallery-item w-2 h-2">
    <a href="../ppl/Combo-Fel-m.webp" class="glightbox" data-glightbox="title:Client; description:Peggy Lepage Model Scouting">
      <img src="../ppl/Combo-Fel-648.webp" alt="female model combined portraits" width="500" height="500" loading="lazy" class="gallery-img">
    </a>
    </figure>

Google console says they can not be indexed. I would like to place those images within an HTML file, but the problem is that Glightbox has a fixed size when its own JS programming creates an Iframe to display the content of every htm file. Glightbox treats the images as responsive and fills the available height and proportional width. When I place those images within an simple html file it has a set height and width for the iframe creation instead of creating every iframe size according to the image size. I do not have the knowlewdge to tweak the JS file from Glightbox to make those iframes responsive. Thanks

The following is the part of JS that defines how to treat the different media elements

` var SlideConfigParser = function () { function SlideConfigParser() { var slideParamas = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  _classCallCheck(this, SlideConfigParser);

  this.defaults = {
    href: '',
    sizes: '',
    srcset: '',
    title: '',
    type: '',
    videoProvider: '',
    description: '',
    alt: '',
    descPosition: 'bottom',
    effect: '',
    width: '',
    height: '',
    content: false,
    zoomable: true,
    draggable: true
  };

  if (isObject(slideParamas)) {
    this.defaults = extend(this.defaults, slideParamas);
  }
}

_createClass(SlideConfigParser, [{
  key: "sourceType",
  value: function sourceType(url) {
    var origin = url;
    url = url.toLowerCase();

    if (url.match(/\.(jpeg|jpg|jpe|gif|png|apn|webp|avif|svg)/) !== null) {
      return 'image';
    }

    if (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/)) {
      return 'video';
    }

    if (url.match(/vimeo\.com\/([0-9]*)/)) {
      return 'video';
    }

    if (url.match(/\.(mp4|ogg|webm|mov)/) !== null) {
      return 'video';
    }

    if (url.match(/\.(mp3|wav|wma|aac|ogg)/) !== null) {
      return 'audio';
    }

    if (url.indexOf('#') > -1) {
      var hash = origin.split('#').pop();

      if (hash.trim() !== '') {
        return 'inline';
      }
    }

    if (url.indexOf('goajax=true') > -1) {
      return 'ajax';
    }

    return 'external';
  }
},`

so if the linked media is an html file, it is treated as 'external', not as image. I tried to include in the image file extensions list the "htm", but did not work.

0

There are 0 best solutions below