26559 Broken Images Links + Shopify CDN - How to fix ?

Highlighted
New Member
9 0 0

Hi All, 

 

I've done an seo audit on my cousins website to which I found 26559 broken image links all report .404 not found. 

I tried doing redirects via "navigation --> url redirect" however we cannot redirect https://cdn.shopify.com. 

I noticed if I replace {width}x.png from the url to grande it will display the image. 

 

I would like to be able to redirect these for SEO purposes. However if not can I stop search engines from indexing these ? e.g Via robots.txt 

 

I did read a similar discussion, one contributor said if it is not in the search console don't worry about it ? I'm not entirely convince by that solution though. 

 

Any ideas?

 

Sample links below. 

 

 

Thanks, 

 

John, 

0 Likes
Highlighted
Shopify Expert
10006 116 1818

The string "{width}" should not be in the url to start with so interested to know where this is coming from. Is this something in the html of the page that's getting changed with JavaScript post load?

Can totally understand why it's failing. What I don't know since there's no context/example of why it's there in the first place.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
9 0 0

Hi Jason, 

 

Thanks for your input. I'm just your average Shopify user. But you are right, I'll need to find out why those links were generated. 

 

I'm thinking either the theme that is doing this or the Bulk image editing app. 

 

Here's what I also found. If I paste part of those links e.g UJBS533588076802409E_{width}x.png search it'll pop up in google with the corresponding product page which has all the images. Nothing missing. In that sense it's not bad content to the user. Would anyone know if google still penalises our shop as it has picked up the link as broken?

 

I don't fancy removing over 20000 broken links via google search console :(

 

Thanks, 

 

John, 

0 Likes
Highlighted
New Member
9 0 0

This is one of the liquid files relating to images. I ran a string search for "{width}x" and they appear here, it may just be a coincidence. I'm no coder though. 

I wonder if anyone could advise ?

 

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

{% unless product.empty? %}
<div class="product__photos product__photos-{{ section_id }} product__photos--{{ thumbnail_position }}">

<div class="product__main-photos" data-aos>
<div id="ProductPhotos-{{ section_id }}">
{% for image in product.images %}
{%- assign is_featured = false -%}
{% if featured_image == image %}
{%- assign is_featured = true -%}
{% endif %}
{%- assign image_alt = image.alt -%}
{%- assign has_product_video = false -%}
{%- assign video_type = '' -%}
{% if image.alt contains 'youtube.com/watch' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{%- assign video_id = image.alt | split: 'v=' -%}
{%- assign video_id = video_id[1] | split: '&' | first -%}
{% endif %}
{% if image.alt contains 'youtu.be/' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{%- assign video_id = image.alt | split: '.be/' -%}
{%- assign video_id = video_id[1] | split: '&' | first -%}
{% endif %}
{% if image.alt contains 'vimeo.com' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'vimeo' -%}
{%- assign video_id = image.alt | split: '.com/' -%}
{%- assign video_id = video_id[1] | split: '/' | first -%}
{% endif %}
{% if image.alt contains '.mp4' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'mp4' -%}
{% endif %}
{% if has_product_video %}
{%- assign image_alt = product.title -%}
{% endif %}
<div class="{% if is_featured %}starting-slide{% else %}secondary-slide{% endif %}" data-index="{{ forloop.index0 }}">
<div class="product-image-main product-image-main--{{ section_id }}">
<div class="image-wrap
{% if has_product_video and video_type == 'youtube' %} hide{% endif %}
{% if has_product_video and video_type == 'vimeo' %} hide{% endif %}
{% if has_product_video and video_type == 'mp4' %} hide{% endif %}" style="height: 0; padding-bottom: {{ 100 | divided_by: image.aspect_ratio }}%;">
<div class="photo-zoom-link {% if settings.product_zoom_enable %}photo-zoom-link--enable{% endif %}" data-zoom-size="{{ image | img_url: product_zoom_size }}">
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if is_featured %}
<img class="photo-zoom-link__initial lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt | escape }}">
<noscript>
<img class="photo-zoom-link__initial lazyloaded" src="{{ image | img_url: product_image_size }}" alt="{{ image_alt | escape }}">
</noscript>
{% else %}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt | escape }}">
<noscript>
<img class="lazyloaded" src="{{ image | img_url: product_image_size }}" alt="{{ image_alt | escape }}">
</noscript>
{% endif %}
</div>
</div>
{% if has_product_video %}
{%- assign aspect_width = settings.product_video_width | divided_by: 100.00 -%}
{%- assign aspect_ratio = settings.product_video_height | divided_by: aspect_width -%}
<div
data-video-type="{{ video_type }}"
class="product__video-wrapper
{% if has_product_video %}
{% if video_type == 'youtube' or video_type == 'vimeo' %}
loading
{% endif %}
{% endif %}"
data-video-style="{{ settings.product_video_style }}"
style="padding-bottom: {{ aspect_ratio }}%;">
{% if video_type == 'youtube' %}
<div
id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
class="product__video"
data-image-count="{{product.images | size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ settings.product_video_style }}"
data-youtube-id="{{ video_id }}"
data-video-width="{{ settings.product_video_width }}"
data-video-height="{{ settings.product_video_height }}">
</div>
{% endif %}
{% if video_type == 'vimeo' %}
<div
id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
class="product__video"
data-image-count="{{product.images | size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ settings.product_video_style }}"
data-video-id="{{ video_id }}"
data-video-width="{{ settings.product_video_width }}"
data-video-height="{{ settings.product_video_height }}">
</div>
{% endif %}
{% if video_type == 'mp4' %}
<video
loop playsinline
{% if settings.product_video_style == 'muted' %}muted{% endif %}
{% if settings.product_video_style == 'unmuted' %}controls{% endif %}
controlsList="nodownload"
data-image-count="{{product.images | size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ settings.product_video_style }}"
{% if isModal %}
data-video-src="{{ image.alt }}"
{% endif %}
id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
class="product__video">
{% unless isModal %}
<source src="{{ image.alt }}" type="video/mp4">
{% endunless %}
Your browser does not support the video tag.
</video>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>

<!-- HC- Add solution based on tags-28 Jan'19 -->
{% assign x = false %}
{% assign y = false %}

{% for tag in product.tags %}
{% if tag == 'Metal_Sterling Silver' %}
{% assign x = true %}
{% endif %}
{% if tag == 'Metal_Sterling Silver Posts' %}
<img class="material" src="{{ 'symbols925posts.png' | asset_url }}" />
{% endif %}
{% if tag == 'Metal_Gold Plated' %}
{% assign y = true %}
{% endif %}
{% if tag == 'Metal_Gold Filled' %}
<img class="material" src="{{ 'symbolgf.png' | asset_url }}" />
{% endif %}
{% endfor %}

{% if x == true and y == false %}
<img class="material" src="{{ 'symbols925.png' | asset_url }}" />
{% endif %}

{% if x == false and y == true %}
<img class="material" src="{{ 'symbolgp.png' | asset_url }}" />
{% endif %}

{% if x == true and y == true %}
<img class="material" src="{{ 'symbolgps925.png' | asset_url }}" />
{% endif %}
</div>

<div
id="ProductThumbs-{{ section_id }}"
class="product__thumbs product__thumbs--{{ thumbnail_position }} {% if product.images.size == 1 %} medium-up--hide{% endif %} small--hide"
data-position="{{ thumbnail_position }}"
data-aos>

{% if product.images.size > 1 %}
{% for image in product.images %}
{%- assign image_alt = image.alt -%}
{%- assign has_product_video = false -%}
{%- assign video_type = '' -%}
{% if image.alt contains 'youtube.com/watch' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{% endif %}
{% if image.alt contains 'youtu.be/' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{% endif %}
{% if image.alt contains 'vimeo.com' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'vimeo' -%}
{% endif %}
{% if image.alt contains '.mp4' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'mp4' -%}
{% endif %}
{% if has_product_video %}
{%- assign image_alt = product.title -%}
{% endif %}

<div class="product__thumb-item"
data-index="{{ forloop.index0 }}">
<div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: image.aspect_ratio }}%;">
<div
class="product__thumb product__thumb-{{ section_id }} js-no-transition"
data-id="{{ image.id }}"
{% if settings.product_zoom_enable %}data-zoom="{{ image.src | img_url: product_zoom_size }}"{% endif %}
>
{% if has_product_video %}
<span class="product__thumb-play">
{% include 'icon-play' %}
</span>
{% endif %}

{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="animation-delay-{{ forloop.index | times: 3 }} lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt | escape }}">
<noscript>
<img class="lazyloaded" src="{{ image | img_url: product_thumb_size }}" alt="{{ image_alt | escape }}">
</noscript>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
{% else %}
<div class="product__photos product__photos-{{ section_id }}">
<div class="product__main-photos" style="width: 100%">
<div id="ProductPhotos-{{ section_id }}">
<div data-index="{{ forloop.index0 }}">
<a href="#">
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
</a>
</div>
</div>
</div>
</div>
{% endunless %}

0 Likes
Highlighted
New Member
9 0 0

This is one of the liquid files relating to images. I ran a string search for "{width}x" and they appear here, it may just be a coincidence. I'm no coder though. 

I wonder if anyone could advise ?

 

Part of the code below given the word limit:

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<div class="{% if is_featured %}starting-slide{% else %}secondary-slide{% endif %}" data-index="{{ forloop.index0 }}">
<div class="product-image-main product-image-main--{{ section_id }}">
<div class="image-wrap
{% if has_product_video and video_type == 'youtube' %} hide{% endif %}
{% if has_product_video and video_type == 'vimeo' %} hide{% endif %}
{% if has_product_video and video_type == 'mp4' %} hide{% endif %}" style="height: 0; padding-bottom: {{ 100 | divided_by: image.aspect_ratio }}%;">
<div class="photo-zoom-link {% if settings.product_zoom_enable %}photo-zoom-link--enable{% endif %}" data-zoom-size="{{ image | img_url: product_zoom_size }}">
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if is_featured %}
<img class="photo-zoom-link__initial lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt | escape }}">
<noscript>
<img class="photo-zoom-link__initial lazyloaded" src="{{ image | img_url: product_image_size }}" alt="{{ image_alt | escape }}">
</noscript>
{% else %}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt | escape }}">
<noscript>
<img class="lazyloaded" src="{{ image | img_url: product_image_size }}" alt="{{ image_alt | escape }}">
</noscript>
{% endif %}
</div>
</div>
{% if has_product_video %}
{%- assign aspect_width = settings.product_video_width | divided_by: 100.00 -%}
{%- assign aspect_ratio = settings.product_video_height | divided_by: aspect_width -%}
<div
data-video-type="{{ video_type }}"
class="product__video-wrapper
{% if has_product_video %}
{% if video_type == 'youtube' or video_type == 'vimeo' %}
loading
{% endif %}
{% endif %}"
data-video-style="{{ settings.product_video_style }}"
style="padding-bottom: {{ aspect_ratio }}%;">
{% if video_type == 'youtube' %}
<div
id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
class="product__video"
data-image-count="{{product.images | size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ settings.product_video_style }}"
data-youtube-id="{{ video_id }}"
data-video-width="{{ settings.product_video_width }}"
data-video-height="{{ settings.product_video_height }}">
</div>
{% endif %}
{% if video_type == 'vimeo' %}
<div
id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
class="product__video"
data-image-count="{{product.images | size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ settings.product_video_style }}"
data-video-id="{{ video_id }}"
data-video-width="{{ settings.product_video_width }}"
data-video-height="{{ settings.product_video_height }}">
</div>
{% endif %}
{% if video_type == 'mp4' %}
<video
loop playsinline
{% if settings.product_video_style == 'muted' %}muted{% endif %}
{% if settings.product_video_style == 'unmuted' %}controls{% endif %}
controlsList="nodownload"
data-image-count="{{product.images | size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ settings.product_video_style }}"
{% if isModal %}
data-video-src="{{ image.alt }}"
{% endif %}
id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
class="product__video">
{% unless isModal %}
<source src="{{ image.alt }}" type="video/mp4">
{% endunless %}
Your browser does not support the video tag.
</video>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>

<!-- HC- Add solution based on tags-28 Jan'19 -->
{% assign x = false %}
{% assign y = false %}

{% for tag in product.tags %}
{% if tag == 'Metal_Sterling Silver' %}
{% assign x = true %}
{% endif %}
{% if tag == 'Metal_Sterling Silver Posts' %}
<img class="material" src="{{ 'symbols925posts.png' | asset_url }}" />
{% endif %}
{% if tag == 'Metal_Gold Plated' %}
{% assign y = true %}
{% endif %}
{% if tag == 'Metal_Gold Filled' %}
<img class="material" src="{{ 'symbolgf.png' | asset_url }}" />
{% endif %}
{% endfor %}

{% if x == true and y == false %}
<img class="material" src="{{ 'symbols925.png' | asset_url }}" />
{% endif %}

{% if x == false and y == true %}
<img class="material" src="{{ 'symbolgp.png' | asset_url }}" />
{% endif %}

{% if x == true and y == true %}
<img class="material" src="{{ 'symbolgps925.png' | asset_url }}" />
{% endif %}
</div>

<div
id="ProductThumbs-{{ section_id }}"
class="product__thumbs product__thumbs--{{ thumbnail_position }} {% if product.images.size == 1 %} medium-up--hide{% endif %} small--hide"
data-position="{{ thumbnail_position }}"
data-aos>

{% if product.images.size > 1 %}
{% for image in product.images %}
{%- assign image_alt = image.alt -%}
{%- assign has_product_video = false -%}
{%- assign video_type = '' -%}
{% if image.alt contains 'youtube.com/watch' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{% endif %}
{% if image.alt contains 'youtu.be/' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{% endif %}
{% if image.alt contains 'vimeo.com' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'vimeo' -%}
{% endif %}
{% if image.alt contains '.mp4' %}
{%- assign has_product_video = true -%}
{%- assign video_type = 'mp4' -%}
{% endif %}
{% if has_product_video %}
{%- assign image_alt = product.title -%}
{% endif %}

<div class="product__thumb-item"
data-index="{{ forloop.index0 }}">
<div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: image.aspect_ratio }}%;">
<div
class="product__thumb product__thumb-{{ section_id }} js-no-transition"
data-id="{{ image.id }}"
{% if settings.product_zoom_enable %}data-zoom="{{ image.src | img_url: product_zoom_size }}"{% endif %}
>
{% if has_product_video %}
<span class="product__thumb-play">
{% include 'icon-play' %}
</span>
{% endif %}

{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="animation-delay-{{ forloop.index | times: 3 }} lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt | escape }}">
<noscript>
<img class="lazyloaded" src="{{ image | img_url: product_thumb_size }}" alt="{{ image_alt | escape }}">
</noscript>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
{% else %}
<div class="product__photos product__photos-{{ section_id }}">
<div class="product__main-photos" style="width: 100%">
<div id="ProductPhotos-{{ section_id }}">
<div data-index="{{ forloop.index0 }}">
<a href="#">
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
</a>
</div>
</div>
</div>
</div>
{% endunless %}

0 Likes