1

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:

  1. Use the SVG as image for the Article type?
  2. Will this error really cause SEO or snippet problems?
  3. 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.

1

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.

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"

  • 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 3 at 11:55

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.