Errors and warnings from the W3C validator for plug-in generated code
-
Recently, I wanted to see in the W3C validator how my blog code looks like in terms of compliance of the html code with the W3C guidelines.
Unfortunately, WordPress and many plugins generate a lot of warnings and errors in this regard.
Also WebP Express generates more than 300 lines of errors and warnings on the indicated page. Can you please make corrections to the trivia?
On other pages, depending on the number of photos, the number of errors and warnings is proportional.- This topic was modified 1 year, 3 months ago by tripsoverpoland.
The page I need help with: [log in to see the link]
-
I had a look at your page and the very first image has this code: <picture><source srcset="https://blog.tripsoverpoland.pl/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/07/23_Malbork_003.jpg.webp 1280w, https://blog.tripsoverpoland.pl/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/07/23_Malbork_003-650x342.jpg.webp 650w, https://blog.tripsoverpoland.pl/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/07/23_Malbork_003-1000x527.jpg.webp 1000w, https://blog.tripsoverpoland.pl/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/07/23_Malbork_003-150x79.jpg.webp 150w, https://blog.tripsoverpoland.pl/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/07/23_Malbork_003-768x404.jpg.webp 768w" sizes="(max-width: 1280px) 100vw, 1280px" type="image/webp"><img width="1280" height="674" src="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image webpexpress-processed" alt="Malbork 15.06.2023" decoding="async" style="object-fit:cover;" fetchpriority="high" srcset="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003.jpg 1280w, https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-650x342.jpg 650w, https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-1000x527.jpg 1000w, https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-150x79.jpg 150w, https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-768x404.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px" data-attachment-id="337183" data-permalink="https://blog.tripsoverpoland.pl/23_malbork_003/" data-orig-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003.jpg" data-orig-size="1280,674" data-comments-opened="1" data-image-meta="{" aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}"="" data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p> " data-image-caption="<p>Malbork 15.06.2023</p> " data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-650x342.jpg" data-large-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-1000x527.jpg"></picture>
All this part:
data-attachment-id="337183" data-permalink="https://blog.tripsoverpoland.pl/23_malbork_003/" data-orig-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003.jpg" data-orig-size="1280,674" data-comments-opened="1" data-image-meta="{" aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}"="" data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p> " data-image-caption="<p>Malbork 15.06.2023</p> " data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-650x342.jpg" data-large-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_003-1000x527.jpg"
it doesn’t come from the plugin. You must either have some other plugin adding this, or check the actual image, in the media folder by editing it and going to “edit more details” – that’s where you will find things like “Alternative text”, “Caption”, “Description”, it can also be added by Yoast or some other SEO plugin? When I use <Picture> after all versions of images to be used I literally have just one last thing sizes=”(max-width: 1920px) 100vw, 1920px” and that’s it. Same as in your source section, img should have the same thing, if it doesn’t it had to be there before the conversion and webp express simply replicates the old code here.
Thanks for explanation. I also have the Jetpack plugin, which can also affect the code when publishing photos, especially since it sends them to the cloud server https://i1.wp.com/ (and similar addresses) and i found in file: jetpack-carousel.php: “array( ‘camera’, ‘aperture’, ‘shutter_speed’, ‘focal_length’, ‘copyright’ )”. I have also written to the authors of Jetpack, but have not received a reply yet.
Thank you very much for taking a look at the reported problem.
Anyway, it’s worth taking a look at your code generated in the page source to see if there are any redundant things or errors in it. Compliance with W3C is good practice, although many blogs in this area generate a lot of lines with errors, warnings, etc.- This reply was modified 1 year, 3 months ago by tripsoverpoland.
Not waiting for Jetpack’s fixes, I replaced all PHP files ” />” and “/>” with “>”, and also commented out the meta so that the strings “{data-image-meta=”{” aperture”:”0″, “credit”:””,…” were no longer appearing. And looking at the validation of my entry:
https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fblog.tripsoverpoland.pl%2F2023%2F07%2F26%2Fmalbork-15-06-2023-zmiany-wokol-zamku-i-w-panoramie-zza-nogatu%2F
now the following errors are left for each photo:- Error: When the
srcset
attribute has any image candidate string with a width descriptor, thesizes
attribute must also be specified.From line 42, column 1702; to line 46, column 1141ry__item"><img data-attachment-id="337191" data-permalink="https://blog.tripsoverpoland.pl/23_malbork_015/" da… data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p>?" data-image-caption="<p>Malbork 15.06.2023</p>?" data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-650x61… data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p>?" data-image-caption="<p>Malbork 15.06.2023</p>?" data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-650x61…land.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?ssl=1" data-amp-layout="responsive"/></figu
Can you please take a look at the validator results for the code created by WEBP EXPRESS?- This reply was modified 1 year, 3 months ago by tripsoverpoland.
In situations like this best to switch off plugins one at a time and see if there is a difference. From the code I can see this refers to the section starting with this div:
class=”tiled-gallery__gallery” data-jetpack-block-initialized=”true”
And from the code it seems like Webp express didn’t actually make any changes to this part of the code. For starters see if you are using this option at the bottom of the settings page:
The complete page (using output buffering)
If not, try it and see if there is a difference. If not, perhaps this gallery is added after webp had a chance to go over the source of the page and make replacements? Perhaps Jetpack is messing around here as well? Try switching it off and see if there is a difference and if there is, then it is not a Webp Express issue, you need to either try chasing the other developers or decide what is more important, using Jetpack or having less errors.
- I disabled the “Display images in a full-screen carousel gallery” option in Jetpack and now the code here looks like this:
Error:?When the?srcset
?attribute has any image candidate string with a width descriptor, the?sizes
?attribute must also be specified.From line?34, column?17168; to line?34, column?18118ry__item"><img decoding="async" srcset="https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/2…land.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?ssl=1" data-amp-layout="responsive"/></figu
- So as if it didn’t change much, although some code from Jetpack is still visible.
<div class="wp-block-jetpack-tiled-gallery alignwide is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:31.29535%"><figure class="tiled-gallery__item"><img decoding="async" srcset="https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=600&ssl=1 600w,https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=900&ssl=1 900w,https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=1200&ssl=1 1200w,https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=1280&ssl=1 1280w" alt="Malbork 15.06.2023" data-height="1202" data-id="337191" data-link="https://blog.tripsoverpoland.pl/23_malbork_015/" data-url="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg" data-width="1280" src="https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?ssl=1" data-amp-layout="responsive"/></figure></div>
Strangely, I can’t disable the WEBP Express plugin from the admin panel…
After enabling the “Display images in a full-screen carousel gallery” option in Jetpack, the code looks like this again:
- Error: When the
srcset
attribute has any image candidate string with a width descriptor, thesizes
attribute must also be specified.From line 42, column 1702; to line 46, column 1141ry__item"><img data-attachment-id="337191" data-permalink="https://blog.tripsoverpoland.pl/23_malbork_015/" da… data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p>?" data-image-caption="<p>Malbork 15.06.2023</p>?" data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-650x61… data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p>?" data-image-caption="<p>Malbork 15.06.2023</p>?" data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-650x61…land.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?ssl=1" data-amp-layout="responsive"/></figu
<div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:31.29535%"><figure class="tiled-gallery__item"><img data-attachment-id="337191" data-permalink="https://blog.tripsoverpoland.pl/23_malbork_015/" data-orig-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015.jpg" data-orig-size="1280,1202" data-comments-opened="1" data-image-meta="" data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p>? " data-image-caption="<p>Malbork 15.06.2023</p>? " data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-650x610.jpg" data-large-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg" decoding="async" data-attachment-id="337191" data-permalink="https://blog.tripsoverpoland.pl/23_malbork_015/" data-orig-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015.jpg" data-orig-size="1280,1202" data-comments-opened="1" data-image-meta="" data-image-title="Malbork 15.06.2023" data-image-description="<p>Malbork 15.06.2023</p>? " data-image-caption="<p>Malbork 15.06.2023</p>? " data-medium-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-650x610.jpg" data-large-file="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg" srcset="https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=600&ssl=1 600w,https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=900&ssl=1 900w,https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=1200&ssl=1 1200w,https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?strip=info&w=1280&ssl=1 1280w" alt="Malbork 15.06.2023" data-height="1202" data-id="337191" data-link="https://blog.tripsoverpoland.pl/23_malbork_015/" data-url="https://blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg" data-width="1280" src="https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?ssl=1" data-amp-layout="responsive"/></figure></div>
Today we managed to turn off WBP EXPRESS, so please consider the message from 4 days ago as non-existent.
Even with WEBP EXPRESS disabled, Jetpack generates a lot of errors, which I reported here:Could you please take a look at the last reply from Jetpack:
https://github.com/Automattic/jetpack/issues/32819#issuecomment-1708425500 –“I see in your latest pdf that many of the specific errors you were complaining about in this task are no longer present with WebP Express disabled: the “no space between attributes”, “quote in attribute name”, complaints about bogus attribute names like “aperture”, etc. This is because WebP Express, being disabled, is no longer mangling attribute values that Jetpack has generated with correctly encoded
"
characters.“True, there are still some errors relevant to Jetpack’s Carousel and/or Tiled Galleries features (e.g. “Duplicate attribute” and “srcset without sizes”) and other more generic errors (e.g. “trailing slash”), but those seem better covered under?#32818?or in yet-to-be-created subtasks that focus on those issues without the confusion in this task over all the errors caused by WebP Express’s mangling of Jetpack’s output.”
And please compare the results with the W3C for the WEBP EXPRESS plugin enabled:
https://tripsoverpoland.pl/ftp/WEBP_EXPRESS-ON-NuHtmlChecker.pdfand for plugin disabled:
https://tripsoverpoland.pl/ftp/WEBP_EXPRESS-OFF-NuHtmlChecker.pdf- This reply was modified 1 year, 2 months ago by tripsoverpoland.
As I mentioned before, instead of turning off Webp Express try turning off Jetpack instead and see how things look then.
I disabled part of Jetpack – full-screen carousel gallery – results from W3C are available in the file:
https://tripsoverpoland.pl/ftp/BLOG-Jetpack-full-screen-carousel-gallery-OFF.pdf
If the photo is a single photo, there are no problems with it – W3C does not report errors. However, when photos are grouped in tilled galleries, errors are reported as follows:
“Error:?When the?
srcset
?attribute has any image candidate string with a width descriptor, the?sizes
?attribute must also be specified.From line?452, column?241; to line?452, column?1191ry__item"><img decoding="async" srcset="https://i1.wp.com/blog.tripsoverpoland.pl/wp-content/uploads/2023/07/2…land.pl/wp-content/uploads/2023/07/23_Malbork_015-1000x939.jpg?ssl=1" data-amp-layout="responsive"/></figu
“It’s unclear what to do with it, because I use this type of gallery very often. As a last resort, I can disable the WEBP Express plug-in altogether, because without files in the webp format, the blog will still work, especially since I already insert photos in the webp format into some entries, which WordPress has been natively supporting for a long time. But the question is, are you able to do something with such cases to make it look and work properly in the tilled gallery?
- The topic ‘Errors and warnings from the W3C validator for plug-in generated code’ is closed to new replies.