Google SDTT doesn't accept SVG as image in 'Article'

Question

Currently I'm creating a review website on which the items that are reviewed have their logo / main image as an SVG object.

Unfortunately Google's Structured Data Testing Tool doesn't allow SVG as value for images in the Article. Strangely enough Google does accept SVG as logo for an organization.

Anyway, is there a way around this problem to either:

Use the SVG as image for the Article type?
Will this error really cause SEO or snippet problems?
Can I define a JPG/PNG version of the SVG file but prevent it from loading? (first of all I don't see any place fit to load that image again and secondly it would increase loadingtime / data-use (and therefor also negatively impact seo without any real use for the user)

Update: the error Google SDTT is giving me:

Blockquote https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/clippath.svg (The value provided for image must be a valid URL.)

Example html:

<section itemscope itemtype="http://schema.org/Article">
   <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/clippath.svg"
                             alt="Logo" itemprop="image"/>
               <div class="title-wrapper">
                <h1 class="title" itemprop="name headline">
                    <strong>Title</strong>
                    <small>Review 2019</small>
                </h1>
                <span class="last-modified" itemprop="dateModified" content="2019-01-02">
                <strong>Laatst bijgewerkt:</strong> 2 januari 2019</span>
   </section>

Note: I changed and stripped some code unnecessary for this example.

Note2: I added an example SVG for privacy purposes

Note3: I know author, datepublished and publisher are missing in this example, but that's not the point here.

Related (not duplicate, as the other question isn’t about adding the image to Article): Does Google parse SVG images as value of the Schema.org 'image' property in JSON-LD? — unor, Jan 02 '19 at 23:25

score 2 · Answer 1 · answered Jan 05 '19 at 18:52

For Google’s Article rich result, image has this requirement (for Non-AMP as well as AMP):

Images must be in .jpg, .png, or .gif format.

(The same is the case for the publisher logo, and the video thumbnail.)

If you want to comply with these requirements, but still show an SVG to your visitors, you can provide an additional image in the requested format in a link element:

<link itemprop="image" href="image.png" />

<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  <link itemprop="contentUrl" href="image.png" />
</div>

Browsers don’t load this image.

In case other structured data consumers might be interested in the SVG version, you could use itemprop="image for it, too. Google’s SDTT will report an error, but it shouldn’t affect whether or not the page is qualified for the rich result, as long as a version with the requested format is provided.

score 2 · Accepted Answer · answered Mar 22 '22 at 23:10

2

I know it's old ... but the answer has changed. both SVG and WEBP formats are now acceptable.

"Google Images supports images in the following formats: BMP, GIF, JPEG, PNG, WebP, and SVG"

answered Mar 22 '22 at 23:10

karlton

36
1

score 1 · Answer 3 · answered Jan 03 '19 at 09:00

1

This is absolutely correct. Read the guidelines at https://developers.google.com/search/docs/data-types/article - everywhere you will see "don't use vector"

answered Jan 03 '19 at 09:00

Evgeniy

10,062
1
17
48

Thank you for your response. For AMP it states: "dont use SVG", for non-amp it indeed says: "Images must be in .jpg, .png, or. gif format." Any recommendations for my specific use-case in which using the svg on-site is desired, but we need tot tag a png version for microdata, preferably without loading it in real life..? – Justin Jan 03 '19 at 11:55

Google SDTT doesn't accept SVG as image in 'Article'

3 Answers3