Skip to content

Commit c034156

Browse files
nimrodkraclaude
nimrodkra
and
claude
authored
feat: enhance SEO metadata and fix Core Web Vitals accessibility issues (#474)
- Add comprehensive Open Graph and Twitter Card metadata for better social sharing - Enhance JSON-LD structured data with multi-entity graph structure - Update header navigation labels ("Changelog" → "What's new?", "GitHub" → "Contribute") - Fix ARIA role accessibility issues by wrapping articles with proper list items - Remove visible list markers while maintaining semantic structure - Improve DocSearch button contrast ratio for accessibility compliance - Add llm.txt for better AI model understanding - Clean up mobile search styling to show icon-only button on mobile 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com>
1 parent c6cebdc commit c034156

11 files changed

Lines changed: 524 additions & 192 deletions

File tree

‎docusaurus.config.js‎

Lines changed: 150 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,26 @@ const config = {
1616
organizationName: 'dailydotdev', // Your GitHub org/user name
1717
projectName: 'docs', // Your repo name
1818

19-
// SEO metadata
19+
// Enhanced SEO metadata
2020
customFields: {
2121
metadata: [
22-
{name: 'keywords', content: 'daily.dev, developer tools, tech news, programming, documentation'},
22+
{name: 'keywords', content: 'daily.dev, developer tools, tech news, programming, documentation, developer feed, coding news, software development, tech articles, programming tutorials, developer community'},
2323
{name: 'author', content: 'daily.dev'},
24-
{name: 'robots', content: 'index, follow'},
24+
{name: 'robots', content: 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1'},
25+
{name: 'description', content: 'Comprehensive documentation for daily.dev - the leading platform for developers to discover, read, and stay updated with the latest tech news, programming articles, and developer content.'},
26+
{name: 'subject', content: 'Developer Tools Documentation'},
27+
{name: 'rating', content: 'General'},
28+
{name: 'revisit-after', content: '7 days'},
29+
{name: 'distribution', content: 'global'},
30+
{name: 'language', content: 'EN'},
31+
{name: 'copyright', content: 'daily.dev'},
2532
],
2633
experimental_faster: true,
2734
},
2835

29-
// Resource hints for external assets
36+
// Enhanced SEO and performance tags
3037
headTags: [
38+
// Performance optimization
3139
{
3240
tagName: 'link',
3341
attributes: {
@@ -73,6 +81,142 @@ const config = {
7381
type: 'image/png',
7482
},
7583
},
84+
// Open Graph metadata
85+
{
86+
tagName: 'meta',
87+
attributes: {
88+
property: 'og:type',
89+
content: 'website',
90+
},
91+
},
92+
{
93+
tagName: 'meta',
94+
attributes: {
95+
property: 'og:site_name',
96+
content: 'daily.dev Documentation',
97+
},
98+
},
99+
{
100+
tagName: 'meta',
101+
attributes: {
102+
property: 'og:title',
103+
content: 'daily.dev Documentation - Complete Developer Guide',
104+
},
105+
},
106+
{
107+
tagName: 'meta',
108+
attributes: {
109+
property: 'og:description',
110+
content: 'Comprehensive documentation for daily.dev - the leading platform for developers to discover, read, and stay updated with the latest tech news, programming articles, and developer content.',
111+
},
112+
},
113+
{
114+
tagName: 'meta',
115+
attributes: {
116+
property: 'og:url',
117+
content: 'https://docs.daily.dev',
118+
},
119+
},
120+
{
121+
tagName: 'meta',
122+
attributes: {
123+
property: 'og:image',
124+
content: 'https://docs.daily.dev/img/daily-cover-photo.png',
125+
},
126+
},
127+
{
128+
tagName: 'meta',
129+
attributes: {
130+
property: 'og:image:width',
131+
content: '1200',
132+
},
133+
},
134+
{
135+
tagName: 'meta',
136+
attributes: {
137+
property: 'og:image:height',
138+
content: '630',
139+
},
140+
},
141+
{
142+
tagName: 'meta',
143+
attributes: {
144+
property: 'og:image:alt',
145+
content: 'daily.dev Documentation - Developer Platform Guide',
146+
},
147+
},
148+
{
149+
tagName: 'meta',
150+
attributes: {
151+
property: 'og:locale',
152+
content: 'en_US',
153+
},
154+
},
155+
// Twitter Card metadata
156+
{
157+
tagName: 'meta',
158+
attributes: {
159+
name: 'twitter:card',
160+
content: 'summary_large_image',
161+
},
162+
},
163+
{
164+
tagName: 'meta',
165+
attributes: {
166+
name: 'twitter:site',
167+
content: '@dailydotdev',
168+
},
169+
},
170+
{
171+
tagName: 'meta',
172+
attributes: {
173+
name: 'twitter:creator',
174+
content: '@dailydotdev',
175+
},
176+
},
177+
{
178+
tagName: 'meta',
179+
attributes: {
180+
name: 'twitter:title',
181+
content: 'daily.dev Documentation - Complete Developer Guide',
182+
},
183+
},
184+
{
185+
tagName: 'meta',
186+
attributes: {
187+
name: 'twitter:description',
188+
content: 'Comprehensive documentation for daily.dev - the leading platform for developers to discover, read, and stay updated with the latest tech news, programming articles, and developer content.',
189+
},
190+
},
191+
{
192+
tagName: 'meta',
193+
attributes: {
194+
name: 'twitter:image',
195+
content: 'https://docs.daily.dev/img/daily-cover-photo.png',
196+
},
197+
},
198+
{
199+
tagName: 'meta',
200+
attributes: {
201+
name: 'twitter:image:alt',
202+
content: 'daily.dev Documentation - Developer Platform Guide',
203+
},
204+
},
205+
// Additional SEO metadata
206+
{
207+
tagName: 'meta',
208+
attributes: {
209+
name: 'format-detection',
210+
content: 'telephone=no',
211+
},
212+
},
213+
{
214+
tagName: 'link',
215+
attributes: {
216+
rel: 'canonical',
217+
href: 'https://docs.daily.dev',
218+
},
219+
},
76220
],
77221

78222
presets: [
@@ -316,13 +460,13 @@ const config = {
316460
position: 'left',
317461
},
318462
{
319-
label: 'Changelog',
463+
label: "What's new?",
320464
href: 'https://app.daily.dev/sources/daily_updates',
321465
position: 'left',
322466
},
323467
{
324468
href: 'https://github.com/dailydotdev/docs',
325-
label: 'GitHub',
469+
label: 'Contribute',
326470
position: 'right',
327471
},
328472
],

‎playwright-report/index.html‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎src/components/homepage/homeNavBoxes.js‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -179,36 +179,38 @@ function Feature({ title, icon, items }) {
179179
};
180180

181181
return (
182-
<article
183-
className={clsx('col col--4')}
184-
role="region"
185-
aria-labelledby={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}
186-
>
187-
<div className={styles.homecard}>
188-
<img
189-
src={icon}
190-
className={styles.homeIcon}
191-
loading="eager"
192-
decoding="sync"
193-
alt={altTexts[title] || `${title} icon`}
194-
width="32"
195-
height="32"
196-
style={{ aspectRatio: '1/1' }}
197-
/>
198-
<h2 id={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}>
199-
{title}
200-
</h2>
201-
<div className={styles.listContainer}>
202-
<nav aria-label={`${title} navigation`}>
203-
<ul>
204-
{items.map((props, idx) => (
205-
<FeatureItem key={idx} {...props} />
206-
))}
207-
</ul>
208-
</nav>
182+
<li role="listitem">
183+
<article
184+
className={clsx('col col--4')}
185+
role="region"
186+
aria-labelledby={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}
187+
>
188+
<div className={styles.homecard}>
189+
<img
190+
src={icon}
191+
className={styles.homeIcon}
192+
loading="eager"
193+
decoding="sync"
194+
alt={altTexts[title] || `${title} icon`}
195+
width="32"
196+
height="32"
197+
style={{ aspectRatio: '1/1' }}
198+
/>
199+
<h2 id={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}>
200+
{title}
201+
</h2>
202+
<div className={styles.listContainer}>
203+
<nav aria-label={`${title} navigation`}>
204+
<ul>
205+
{items.map((props, idx) => (
206+
<FeatureItem key={idx} {...props} />
207+
))}
208+
</ul>
209+
</nav>
210+
</div>
209211
</div>
210-
</div>
211-
</article>
212+
</article>
213+
</li>
212214
);
213215
}
214216

‎src/components/homepage/homeNavBoxes.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,17 @@
1111
gap: 56px;
1212
margin: 0 auto;
1313
padding: 0;
14+
list-style: none;
15+
}
16+
17+
.grid3col li {
18+
list-style: none;
19+
margin: 0;
20+
padding: 0;
21+
}
22+
23+
.grid3col li::marker {
24+
display: none;
1425
}
1526

1627
@media screen and (max-width: 1680px) {

‎src/components/video-page/navBoxes.js‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -179,47 +179,49 @@ function Feature({ title, url, type, duration }) {
179179
const videoId = `video-${title.replace(/\s+/g, '-').toLowerCase()}`;
180180

181181
return (
182-
<article
183-
className={clsx('col col--4')}
184-
role="region"
185-
aria-labelledby={videoId}
186-
>
187-
<div className={styles.vidcard}>
188-
<img
189-
src="img/logo.png"
190-
className={styles.vidIcon}
191-
alt="daily.dev logo"
192-
loading="lazy"
193-
width="48"
194-
height="48"
195-
/>
196-
<h2 id={videoId}>{title}</h2>
197-
<div className={styles.iframecontainer}>
198-
<div
199-
className={styles.youTubeOverlay}
200-
onClick={replaceVideo}
201-
onKeyDown={handleKeyPress}
202-
data-youtube={url}
203-
role="button"
204-
tabIndex="0"
205-
aria-label={`Play video: ${title}`}
206-
>
207-
<div className={styles.youTubeOverlayTime}>{duration}</div>
208-
<img
209-
className={styles.imgVid}
210-
width="340"
211-
height="180"
212-
alt={`Video thumbnail for ${title}`}
213-
src={'https://img.youtube.com/vi/' + url + '/0.jpg'}
214-
/>
182+
<li role="listitem">
183+
<article
184+
className={clsx('col col--4')}
185+
role="region"
186+
aria-labelledby={videoId}
187+
>
188+
<div className={styles.vidcard}>
189+
<img
190+
src="img/logo.png"
191+
className={styles.vidIcon}
192+
alt="daily.dev logo"
193+
loading="lazy"
194+
width="48"
195+
height="48"
196+
/>
197+
<h2 id={videoId}>{title}</h2>
198+
<div className={styles.iframecontainer}>
199+
<div
200+
className={styles.youTubeOverlay}
201+
onClick={replaceVideo}
202+
onKeyDown={handleKeyPress}
203+
data-youtube={url}
204+
role="button"
205+
tabIndex="0"
206+
aria-label={`Play video: ${title}`}
207+
>
208+
<div className={styles.youTubeOverlayTime}>{duration}</div>
209+
<img
210+
className={styles.imgVid}
211+
width="340"
212+
height="180"
213+
alt={`Video thumbnail for ${title}`}
214+
src={'https://img.youtube.com/vi/' + url + '/0.jpg'}
215+
/>
216+
</div>
215217
</div>
218+
{/* <div className={styles.iframecontainer}>
219+
<iframe width="340" height="180" src={"https://www.youtube-nocookie.com/embed/" + url} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture, fullscreen" allowfullscreen="true"></iframe>
220+
</div> */}
221+
<div className={styles.bottomText}>{type}</div>
216222
</div>
217-
{/* <div className={styles.iframecontainer}>
218-
<iframe width="340" height="180" src={"https://www.youtube-nocookie.com/embed/" + url} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture, fullscreen" allowfullscreen="true"></iframe>
219-
</div> */}
220-
<div className={styles.bottomText}>{type}</div>
221-
</div>
222-
</article>
223+
</article>
224+
</li>
223225
);
224226
}
225227

‎src/components/video-page/navBoxes.module.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,18 @@
1515
grid-template-columns: repeat(4, minmax(0, 1fr));
1616
gap: 56px;
1717
margin: 0 auto;
18+
list-style: none;
19+
padding: 0;
20+
}
21+
22+
.grid3col li {
23+
list-style: none;
24+
margin: 0;
25+
padding: 0;
26+
}
27+
28+
.grid3col li::marker {
29+
display: none;
1830
}
1931
@media screen and (max-width: 1680px) {
2032
.grid3col {

0 commit comments

Comments
 (0)