Skip to content

feat: enhance SEO metadata and fix Core Web Vitals accessibility issues #474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nimrodkra merged 1 commit into from
Jul 19, 2025
Merged

feat: enhance SEO metadata and fix Core Web Vitals accessibility issues #474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 150 additions & 6 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,26 @@ const config = {
organizationName: 'dailydotdev', // Your GitHub org/user name
projectName: 'docs', // Your repo name

// SEO metadata
// Enhanced SEO metadata
customFields: {
metadata: [
{name: 'keywords', content: 'daily.dev, developer tools, tech news, programming, documentation'},
{name: 'keywords', content: 'daily.dev, developer tools, tech news, programming, documentation, developer feed, coding news, software development, tech articles, programming tutorials, developer community'},
{name: 'author', content: 'daily.dev'},
{name: 'robots', content: 'index, follow'},
{name: 'robots', content: 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1'},
{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.'},
{name: 'subject', content: 'Developer Tools Documentation'},
{name: 'rating', content: 'General'},
{name: 'revisit-after', content: '7 days'},
{name: 'distribution', content: 'global'},
{name: 'language', content: 'EN'},
{name: 'copyright', content: 'daily.dev'},
],
experimental_faster: true,
},

// Resource hints for external assets
// Enhanced SEO and performance tags
headTags: [
// Performance optimization
{
tagName: 'link',
attributes: {
Expand Down Expand Up @@ -73,6 +81,142 @@ const config = {
type: 'image/png',
},
},
// Open Graph metadata
{
tagName: 'meta',
attributes: {
property: 'og:type',
content: 'website',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:site_name',
content: 'daily.dev Documentation',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:title',
content: 'daily.dev Documentation - Complete Developer Guide',
},
},
{
tagName: 'meta',
attributes: {
property: 'og: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.',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:url',
content: 'https://docs.daily.dev',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:image',
content: 'https://docs.daily.dev/img/daily-cover-photo.png',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:image:width',
content: '1200',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:image:height',
content: '630',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:image:alt',
content: 'daily.dev Documentation - Developer Platform Guide',
},
},
{
tagName: 'meta',
attributes: {
property: 'og:locale',
content: 'en_US',
},
},
// Twitter Card metadata
{
tagName: 'meta',
attributes: {
name: 'twitter:card',
content: 'summary_large_image',
},
},
{
tagName: 'meta',
attributes: {
name: 'twitter:site',
content: '@dailydotdev',
},
},
{
tagName: 'meta',
attributes: {
name: 'twitter:creator',
content: '@dailydotdev',
},
},
{
tagName: 'meta',
attributes: {
name: 'twitter:title',
content: 'daily.dev Documentation - Complete Developer Guide',
},
},
{
tagName: 'meta',
attributes: {
name: 'twitter: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.',
},
},
{
tagName: 'meta',
attributes: {
name: 'twitter:image',
content: 'https://docs.daily.dev/img/daily-cover-photo.png',
},
},
{
tagName: 'meta',
attributes: {
name: 'twitter:image:alt',
content: 'daily.dev Documentation - Developer Platform Guide',
},
},
// Additional SEO metadata
{
tagName: 'meta',
attributes: {
name: 'format-detection',
content: 'telephone=no',
},
},
{
tagName: 'link',
attributes: {
rel: 'canonical',
href: 'https://docs.daily.dev',
},
},
],

presets: [
Expand Down Expand Up @@ -316,13 +460,13 @@ const config = {
position: 'left',
},
{
label: 'Changelog',
label: "What's new?",
href: 'https://app.daily.dev/sources/daily_updates',
position: 'left',
},
{
href: 'https://github.com/dailydotdev/docs',
label: 'GitHub',
label: 'Contribute',
position: 'right',
},
],
Expand Down
77 changes: 0 additions & 77 deletions playwright-report/index.html
View file
Open in desktop

This file was deleted.

60 changes: 31 additions & 29 deletions src/components/homepage/homeNavBoxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@
},
];

function FeatureItem({ url, text }) {

Check warning on line 157 in src/components/homepage/homeNavBoxes.js

View workflow job for this annotation

GitHub Actions / security-audit 

'FeatureItem' is defined but never used. Allowed unused vars must match /^(React|Link|Layout|Head|Suspense|Redirect)$/u
return (
<li>
<Link className={styles.listContainerLink} to={url}>
Expand All @@ -164,7 +164,7 @@
);
}

function Feature({ title, icon, items }) {

Check warning on line 167 in src/components/homepage/homeNavBoxes.js

View workflow job for this annotation

GitHub Actions / security-audit 

'Feature' is defined but never used. Allowed unused vars must match /^(React|Link|Layout|Head|Suspense|Redirect)$/u
const altTexts = {
'Getting Started': 'Navigate to getting started guides and tutorials',
'Setting up your feed': 'Customize and configure your content feed',
Expand All @@ -179,36 +179,38 @@
};

return (
<article
className={clsx('col col--4')}
role="region"
aria-labelledby={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}
>
<div className={styles.homecard}>
<img
src={icon}
className={styles.homeIcon}
loading="eager"
decoding="sync"
alt={altTexts[title] || `${title} icon`}
width="32"
height="32"
style={{ aspectRatio: '1/1' }}
/>
<h2 id={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}>
{title}
</h2>
<div className={styles.listContainer}>
<nav aria-label={`${title} navigation`}>
<ul>
{items.map((props, idx) => (
<FeatureItem key={idx} {...props} />
))}
</ul>
</nav>
<li role="listitem">
<article
className={clsx('col col--4')}
role="region"
aria-labelledby={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}
>
<div className={styles.homecard}>
<img
src={icon}
className={styles.homeIcon}
loading="eager"
decoding="sync"
alt={altTexts[title] || `${title} icon`}
width="32"
height="32"
style={{ aspectRatio: '1/1' }}
/>
<h2 id={`feature-${title.replace(/\s+/g, '-').toLowerCase()}`}>
{title}
</h2>
<div className={styles.listContainer}>
<nav aria-label={`${title} navigation`}>
<ul>
{items.map((props, idx) => (
<FeatureItem key={idx} {...props} />
))}
</ul>
</nav>
</div>
</div>
</div>
</article>
</article>
</li>
);
}

Expand Down
11 changes: 11 additions & 0 deletions src/components/homepage/homeNavBoxes.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@
gap: 56px;
margin: 0 auto;
padding: 0;
list-style: none;
}

.grid3col li {
list-style: none;
margin: 0;
padding: 0;
}

.grid3col li::marker {
display: none;
}

@media screen and (max-width: 1680px) {
Expand Down
80 changes: 41 additions & 39 deletions src/components/video-page/navBoxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect } from 'react';

Check warning on line 1 in src/components/video-page/navBoxes.js

View workflow job for this annotation

GitHub Actions / security-audit 

'useEffect' is defined but never used. Allowed unused vars must match /^(React|Link|Layout|Head|Suspense|Redirect)$/u
import clsx from 'clsx';
import styles from './navBoxes.module.css';
import { useErrorHandler } from '../../hooks/useErrorHandler';
Expand Down Expand Up @@ -92,7 +92,7 @@
},
];

function Feature({ title, url, type, duration }) {

Check warning on line 95 in src/components/video-page/navBoxes.js

View workflow job for this annotation

GitHub Actions / security-audit 

'Feature' is defined but never used. Allowed unused vars must match /^(React|Link|Layout|Head|Suspense|Redirect)$/u
const { handleError } = useErrorHandler();
// Temporarily disabled for SSR compatibility
// const { trackRender } = usePerformanceTracking('VideoFeature');
Expand Down Expand Up @@ -179,47 +179,49 @@
const videoId = `video-${title.replace(/\s+/g, '-').toLowerCase()}`;

return (
<article
className={clsx('col col--4')}
role="region"
aria-labelledby={videoId}
>
<div className={styles.vidcard}>
<img
src="img/logo.png"
className={styles.vidIcon}
alt="daily.dev logo"
loading="lazy"
width="48"
height="48"
/>
<h2 id={videoId}>{title}</h2>
<div className={styles.iframecontainer}>
<div
className={styles.youTubeOverlay}
onClick={replaceVideo}
onKeyDown={handleKeyPress}
data-youtube={url}
role="button"
tabIndex="0"
aria-label={`Play video: ${title}`}
>
<div className={styles.youTubeOverlayTime}>{duration}</div>
<img
className={styles.imgVid}
width="340"
height="180"
alt={`Video thumbnail for ${title}`}
src={'https://img.youtube.com/vi/' + url + '/0.jpg'}
/>
<li role="listitem">
<article
className={clsx('col col--4')}
role="region"
aria-labelledby={videoId}
>
<div className={styles.vidcard}>
<img
src="img/logo.png"
className={styles.vidIcon}
alt="daily.dev logo"
loading="lazy"
width="48"
height="48"
/>
<h2 id={videoId}>{title}</h2>
<div className={styles.iframecontainer}>
<div
className={styles.youTubeOverlay}
onClick={replaceVideo}
onKeyDown={handleKeyPress}
data-youtube={url}
role="button"
tabIndex="0"
aria-label={`Play video: ${title}`}
>
<div className={styles.youTubeOverlayTime}>{duration}</div>
<img
className={styles.imgVid}
width="340"
height="180"
alt={`Video thumbnail for ${title}`}
src={'https://img.youtube.com/vi/' + url + '/0.jpg'}
/>
</div>
</div>
{/* <div className={styles.iframecontainer}>
<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>
</div> */}
<div className={styles.bottomText}>{type}</div>
</div>
{/* <div className={styles.iframecontainer}>
<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>
</div> */}
<div className={styles.bottomText}>{type}</div>
</div>
</article>
</article>
</li>
);
}

Expand Down
12 changes: 12 additions & 0 deletions src/components/video-page/navBoxes.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,18 @@
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 56px;
margin: 0 auto;
list-style: none;
padding: 0;
}

.grid3col li {
list-style: none;
margin: 0;
padding: 0;
}

.grid3col li::marker {
display: none;
}
@media screen and (max-width: 1680px) {
.grid3col {
Expand Down
Loading
Loading