[wp-meta] [Making WordPress.org] #6617: Replace plugin page banner markup
Making WordPress.org
noreply at wordpress.org
Fri Dec 9 11:48:54 UTC 2022
#6617: Replace plugin page banner markup
------------------------------+---------------------
Reporter: jonoaldersonwp | Owner: (none)
Type: enhancement | Status: new
Priority: low | Milestone:
Component: Plugin Directory | Resolution:
Keywords: performance seo |
------------------------------+---------------------
Description changed by jonoaldersonwp:
Old description:
> The hero banner image on plugin pages uses suboptimal markup, which has a
> negative impact on performance and SEO. The following minor changes
> should significantly benefit end-users.
>
> - Remove the inline `<style>` tag (which sets the image as the background
> of the banner container).
> - Remove all attributes from `.plugin-banner`, except for the existing
> margin attribute(s).
> - Add CSS targeting `.plugin-banner img` to set `object-fit: cover;
> width: 100%;`
> - Add an `<img>` inside `.plugin-banner`, using the markup below.
>
> == Image markup
> `<img decoding="async" fetchpriority="high" src="https://ps.w.org
> /wordpress-seo/assets/banner-772x250.png?rev=2643727" width="930"
> height="304">`
>
> When a `1544x500` version is available, add a `srcset` attribute, to
> produce a result as follows:
>
> `<img decoding="async" fetchpriority="high" srcset="https://ps.w.org
> /wordpress-seo/assets/banner-1544x500.png?rev=2643727 2x"
> src="https://ps.w.org/wordpress-seo/assets/banner-
> 772x250.png?rev=2643727" width="930" height="304">`
New description:
The hero banner image on plugin pages uses suboptimal markup, which has a
negative impact on performance and SEO. The following minor changes should
significantly benefit end-users.
- Remove the inline `<style>` tag (which sets the image as the background
of the banner container).
- Remove all styling applies to `.plugin-banner`, except for the existing
margin attribute(s).
- Add CSS targeting `.plugin-banner img` to set `object-fit: cover; width:
100%;`
- Add an `<img>` inside `.plugin-banner`, using the markup below.
== Image markup
`<img decoding="async" fetchpriority="high" src="https://ps.w.org
/wordpress-seo/assets/banner-772x250.png?rev=2643727" width="930"
height="304">`
When a `1544x500` version is available, add a `srcset` attribute, to
produce a result as follows:
`<img decoding="async" fetchpriority="high" srcset="https://ps.w.org
/wordpress-seo/assets/banner-1544x500.png?rev=2643727 2x"
src="https://ps.w.org/wordpress-seo/assets/banner-772x250.png?rev=2643727"
width="930" height="304">`
--
--
Ticket URL: <https://meta.trac.wordpress.org/ticket/6617#comment:1>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org
More information about the wp-meta
mailing list