html code -> non-compliance with W3C

Hi there. I have not been able to reproduce this issue in testing so far. Could you please provide step by step instructions for reproducing this issue on a test page? Thanks.

First of all, in addition to Jetpack, the WebP Express plugin is installed – but it only adds images converted from jpg to webp to the code.
Secondly, I create an entry and in it Tiled galleries and here I add photos either directly from the media gallery in WordPress, or just inserted from the local disk.
And that’s basically it. The generated html code can be seen in the first post.
Now, since two versions of Jetpack, without waiting for your corrections, I have replaced the ” />” (and “/>”) strings with “>” in all PHP files and commented out the meta tags with the code meta=”{“aperture”:”0″, ”credit”:””,”camera”:”,”,”caption”:””,”created_timestamp”:”0″,”copyright”:””,”focal_length”:”0″,”iso”:”0 ″,”shutter_speed”:”0″,”title”:””,”orientation”:”0″}”, so I won’t see this error in the W3C validator anymore. But with the original PHP files unchanged, W3C will show the same errors as on my site.

Hi @tripsoverpoland,

I’ve taken some time to attempt to replicate the errors you’ve mentioned by running a website through the W3C Validator. Here are the steps I took:

1. Set Up a Fresh WordPress Installation: Created a new WordPress site to ensure no other plugins or themes could interfere.
2. Install Jetpack: Installed and activated the latest version of Jetpack 12.5.
3. Install WebP Express plugin as you specified.
4. Default Theme: Used the same theme you are using, WordPress Twenty Twenty Two.
5. Minimal Content: Added a sample post to the website. Ensured that they include some of the Jetpack features you mentioned.
6. W3C Validation: Submitted the website’s URL to the W3C Validator for analysis.

Interestingly, I was unable to replicate the exact errors you’ve described regarding duplicate IDs and the issues with the type attributes on JavaScript and CSS <link> elements.

Could you provide more information on how you encountered these errors? For example:

• Are there any other plugins that you have activated?
• Are there any specific settings you made within the WebP Express plugin?
• Did you notice this error on multiple pages or just one specific page?

Additional details will be greatly beneficial for our team as we look into resolving this issue promptly.

Thank you for using Jetpack, and we appreciate your efforts to help us improve the plugin.

• This reply was modified 1 year, 2 months ago by Alin (a11n).

At the request of Jetpack Support, I moved the content of the issue to the thread: https://github.com/Automattic/jetpack/issues/32819 . But in short:

Yes, I actually commented out a few lines in the jetpack-carousel.php file so that you don’t see the snippet in the source code of the page:
“data-image-meta=”{“aperture”:”0″,”credit”:””,”camera”:””,”caption”:””,”created_timestamp”:”0″,”copyright”: “”,”focal_length”:”0″,”iso”:”0″,”shutter_speed”:”0″,”title”:””,”orientation”:”0″}”.
Now only a small fragment of data-image-meta=”” is visible in the code of the page, and the point is that the settings in the plugin’s control panel do not display the exif data of the photos in the code at all. It does not work according to these settings.
I asked how can I do it effectively by changing something in the code of the jetpack-carousel.php file, because my changes are not entirely effective. So I kindly ask you to take into account the plugin settings in generating the code regarding the visibility or not of the exif parameters. In the case of my photos, I have been deleting all exif parameters for many years to make the size of the photos as small as possible and I do not want these parameters to be visible in the website code.

Just to clarify, the picture../picture code is created by another WEBP Express plug-in and it does not generate the code related to the exif parameters of the photos. So this issue is still related to the Jetpack plugin..

I don’t know which plugin creates the first code for embedded images and which one modifies it and creates the final code.
The following actions were performed on the indicated entry:

1. Uploading photos to the blog’s media and then WEBP creates their equivalents in webp format for jpg files in a separate folder
2. Creating a new blog entry
3. Adding content and several tiled galleries containing a dozen/dozens of photos downloaded from the blog’s media – this is the moment for Jetpack to work and insert its code. Whether WEBP EXPRESS adds its code before or after Jetpack is hard for me to determine.

Errors/warnings appear with subsequent blog entries, e.g. here:

https://blog.tripsoverpoland.pl/2023/07/21/ruiny-zamku-kapituly-pomezanskiej-w-szymbarku-wizyta-w-dniu-14-06-2023/

https://blog.tripsoverpoland.pl/2023/07/19/kanal-elblaski-i-pochylnie-buczyniec-oraz-katy/

https://blog.tripsoverpoland.pl/2023/07/05/waplewo-wielkie-wizyta-w-muzeum-tradycji-szlacheckiej/

and in the following…

There are a few plugins, but those that affect the code of the photos are maybe a few:

• Rank Math SEO
• Simple Lightbox
• WebP Express
• Jetpack ->Tiled Gallery from jetpack-carousel.php
• LiteSpeed Cache

There are practically no changes in the WEBP Express plugin:

And last info:

WordPress ver. 6.3.1
and Twenty Twenty-Two theme 1.4

Hi @tripsoverpoland,

Thank you for the details provided, I appreciate it.

Let’s keep the conversation going on Github, where we’re already tracking this issue.

Thank you!