Topic website seo lighthouse - #7020
Open
vanshika2720 wants to merge 7 commits into
Open
Conversation
vanshika2720
requested review from
Warashi,
khanhtc1202,
mohammedfirdouss and
t-kikuc
July 12, 2026 13:50
Contributor
Author
|
@yashisrani please review. |
|
@vanshika2720 can you attach new lighthouse report to see the improvements ? |
Contributor
Author
|
@yashisrani @mohammedfirdouss @rahulshendre I have attached the screenshot. PTAL! |
|
@vanshika2720 Looks good to me |
This was referenced Jul 14, 2026
| <div class="col-8 py-3 order-sm-2 {{ $text_color }}"> | ||
| <a href="https://www.cncf.io/projects/pipecd/" target="_blank"> | ||
| <img src="{{ $cncf_logo }}" alt="cncf logo" width="250"> | ||
| <img src="{{ $cncf_logo }}" alt="cncf logo" width="250" height="{{ $cncf_logo_height }}"> |
Contributor
There was a problem hiding this comment.
overall LGTM
could you confirm the footer CNCF logo isn't squished on the rendered site? It has no height:auto CSS so width="250" height="40" forces the box ratio, please attach a screenshot
Contributor
Author
There was a problem hiding this comment.
@rahulshendre I verified the rendered site and the logo isn't squished. I also added height: auto; to make the sizing robust while preserving the CLS improvement
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #7020 +/- ##
==========================================
- Coverage 29.36% 28.39% -0.98%
==========================================
Files 601 501 -100
Lines 64328 55810 -8518
==========================================
- Hits 18891 15846 -3045
+ Misses 43969 38662 -5307
+ Partials 1468 1302 -166 Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Contributor
|
This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
✅ Deploy Preview for pipecd-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the PipeCD documentation website (Hugo templates/content/styles) to address a subset of Lighthouse SEO/accessibility recommendations, primarily by improving meta descriptions, semantic structure, image alternative text, and reducing layout shift.
Changes:
- Add a
<meta name="description">tag with a fallback to a truncated page summary. - Improve homepage SEO/semantics by adding a homepage description and promoting the tagline to an
<h1>(styling preserved via existing class). - Improve accessibility/CLS by adding
alttext for core value images and explicitheightfor the CNCF footer logo.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/layouts/shortcodes/blocks/value.html | Adds alt text for core value images derived from the value title. |
| docs/layouts/partials/head.html | Adds a meta description tag using page description or summary fallback. |
| docs/layouts/partials/footer.html | Adds explicit height to the CNCF logo image to reduce layout shift. |
| docs/content/en/_index.html | Adds homepage description and changes the hero tagline to an <h1>. |
| docs/assets/scss/_styles_project.scss | Tweaks headline styling (line-height) to keep the new <h1> visually consistent. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Lighthouse's SEO audit flags every page on pipecd.dev for lacking a meta description, since the project's override of the Docsy head partial never included one. Emit <meta name="description"> using the page's own description front matter when set, falling back to a truncated page summary otherwise. The tag is only rendered when a non-empty value is available, so pages with no body content are left unchanged rather than shipping an empty description. Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
The homepage has no explicit description, so it falls back to a truncated dump of its shortcode-rendered body text, which reads as a run-on sentence and is a poor meta/OG description for search and social previews. The homepage also has no <h1>: its main tagline is a plain <p> styled to look like a heading, so the page lacks a top-level heading entirely. This trips Lighthouse's SEO and accessibility heading-order checks and leaves screen reader users without a page landmark. Add a hand-written description front-matter field, and change the tagline element from <p> to <h1>. Add line-height: 1.5 to the .headline rule so the heading renders identically to the previous paragraph (browser default heading line-height differs from body text). Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
The four core-value images on the homepage (multi-provider, secure, automation, visibility) render without an alt attribute, so screen readers cannot describe them and Lighthouse's accessibility audit flags them as images without alt text. Use each value block's own title as the image's alt text, since it already describes what the image represents. Capture the title in a variable before entering the "with $value_image" block, since "." is rebound to the image resource inside that block and no longer exposes .Params. Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
The CNCF logo in the footer sets width="250" but no height, which Lighthouse's performance audit flags as missing explicit image dimensions, since the browser cannot reserve layout space for the image before it loads and this can contribute to layout shift. Add a height attribute matching each logo variant's real aspect ratio (the color-on-white homepage logo and the white footer logo have different intrinsic proportions), so the rendered size is unchanged. Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
Review feedback on the previous width/height fix pointed out that the img has no height:auto CSS, so a mismatch between the fixed width/height attributes and the logo's intrinsic ratio could distort it, and asked for confirmation this isn't happening. The homepage variant's height attribute (48) is a rounded value: the CNCF color logo's real intrinsic ratio yields ~47.65 for a 250-wide box, a ~0.7% difference. Rendering showed no visible distortion, because both logo files are SVGs with a viewBox and no preserveAspectRatio override, so the default "xMidYMid meet" behavior scales them uniformly within the box instead of stretching them like a raster image. Confirmed by inspecting the built site: the swoosh mark renders as a perfect square in both before/after screenshots. Add height: auto so the browser derives the rendered height from the image's real aspect ratio instead of the rounded attribute, removing that small mismatch outright. This keeps the CLS benefit of the previous fix: browsers compute a default aspect-ratio from the width/height attributes even when height:auto is set, so layout space is still reserved before the image loads. Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
vanshika2720
force-pushed
the
topic-website-seo-lighthouse
branch
from
August 31, 2026 13:56
f427b34 to
d94b959
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this PR does:
This PR addresses a focused subset of the Lighthouse recommendations by improving the website's SEO and accessibility without changing its appearance or functionality.
Specifically, it:
<meta name="description">tag to the site head.<h1>while preserving its existing styling.altattributes to the homepage core value images.heightattributes to the footer CNCF logo to reduce layout shift.These changes are intentionally limited to a small, reviewable subset of the recommendations from Issue #7019.
Why we need it:
A Lighthouse audit identified several opportunities to improve the website's SEO and accessibility.
This PR addresses a number of low-risk, high-impact recommendations by:
Which issue(s) this PR fixes:
Fixes #7019
Does this PR introduce a user-facing change?:
Yes.
How are users affected by this change:
Is this breaking change:
How to migrate (if breaking change):