zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add SEO infrastructure, 404 page, accessibility and performance optimizations

Browse Source 
- Add robots.txt for search engine crawling
- Enhance Layout.astro with complete SEO meta tags (OG, Twitter Card, canonical)
- Create custom 404 page with bilingual support
- Add skip link for accessibility
- Add main-content id to all major pages for keyboard navigation
- Add lazy loading to blog list and author card images
This commit is contained in:
zguiyang
2026-03-18 08:20:13 +08:00
parent eb6bef3726
commit 340c3db383
15 changed files with 128 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/robots.txt Normal file
View File

@@ -0,0 +1,13 @@
# robots.txt for zhaoguiyang.com
# https://zhaoguiyang.com
User-agent: *
Allow: /
# Sitemap
Sitemap: https://zhaoguiyang.com/sitemap-index.xml
# Disallow admin/private areas (if any)
Disallow: /api/
Disallow: /_astro/
Disallow: /assets/

2
src/components/AuthorCard.tsx
View File

@@ -29,6 +29,8 @@ export default function AuthorCard({ lang, author }: AuthorCardProps) {
<img <img
src={authorInfo.avatar} src={authorInfo.avatar}
alt={authorInfo.name} alt={authorInfo.name}
loading="lazy"
decoding="async"
className="w-full h-full rounded-full object-cover" className="w-full h-full rounded-full object-cover"
/> />
) : ( ) : (

2
src/components/blog/BlogList.astro
View File

@@ -83,6 +83,8 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More';
<img <img
src={post.image} src={post.image}
alt={post.title} alt={post.title}
loading="lazy"
decoding="async"
class="w-full h-48 md:h-full object-cover group-hover:scale-110 transition-transform duration-300" class="w-full h-48 md:h-full object-cover group-hover:scale-110 transition-transform duration-300"
/> />
<div class="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-background/50 to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-background/50 to-transparent"></div>

49
src/layouts/Layout.astro
View File

@@ -4,17 +4,27 @@ import BackToTop from "@/components/ui/back-to-top";
import { useTranslations } from "@/i18n/utils"; import { useTranslations } from "@/i18n/utils";
import type { Lang } from "@/types/i18n"; import type { Lang } from "@/types/i18n";
import { defaultLang } from "@/i18n/ui"; import { defaultLang } from "@/i18n/ui";
import { personalInfo } from "@/lib/data";
import "../styles/global.css"; import "../styles/global.css";
interface Props { interface Props {
title?: string; title?: string;
description?: string; description?: string;
image?: string;
articleDate?: string;
} }
const lang = Astro.currentLocale as Lang || defaultLang; const lang = Astro.currentLocale as Lang || defaultLang;
const { title = "Joey Z. - Portfolio", description = "Engineering-focused personal website" } = const isZh = lang === 'zh';
Astro.props;
const t = useTranslations(lang); const t = useTranslations(lang);
const { title, description, image, articleDate } = Astro.props;
const siteTitle = t("site.title");
const fullTitle = title ? `${title} | ${siteTitle}` : siteTitle;
const siteUrl = "https://zhaoguiyang.com";
const defaultImage = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=630&fit=crop";
const currentUrl = Astro.url.href;
const ogImage = image || defaultImage;
--- ---
<!doctype html> <!doctype html>
@@ -27,8 +37,31 @@ const t = useTranslations(lang);
<link rel="preload" href="/fonts/archivo-700.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/archivo-700.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/space-grotesk-400.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/space-grotesk-400.woff2" as="font" type="font/woff2" crossorigin />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="description" content={description} />
<title>{title} | {t("site.title")}</title> <!-- Basic SEO -->
<meta name="description" content={description || "AI Full-stack Engineer - 8 years building enterprise systems, financial platforms, and blockchain infrastructure."} />
<link rel="canonical" href={currentUrl} />
<!-- Open Graph / Facebook -->
<meta property="og:type" content={articleDate ? "article" : "website"} />
<meta property="og:url" content={currentUrl} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description || "AI Full-stack Engineer - 8 years building enterprise systems, financial platforms, and blockchain infrastructure."} />
<meta property="og:image" content={ogImage} />
<meta property="og:site_name" content={siteTitle} />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content={currentUrl} />
<meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={description || "AI Full-stack Engineer - 8 years building enterprise systems, financial platforms, and blockchain infrastructure."} />
<meta name="twitter:image" content={ogImage} />
<!-- Article specific -->
{articleDate && <meta property="article:published_time" content={articleDate} />}
<title>{fullTitle}</title>
<!-- View Transitions for smooth page transitions --> <!-- View Transitions for smooth page transitions -->
<ClientRouter /> <ClientRouter />
<meta name="view-transition" content="same-origin" /> <meta name="view-transition" content="same-origin" />
@@ -41,6 +74,14 @@ const t = useTranslations(lang);
<body <body
class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary" class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary"
> >
<!-- Skip link for accessibility -->
<a
href="#main-content"
class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:font-semibold focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
>
{isZh ? '跳到主要内容' : 'Skip to main content'}
</a>
<div <div
class="fixed inset-0 -z-10 h-full w-full bg-background" class="fixed inset-0 -z-10 h-full w-full bg-background"
> >

52
src/pages/404.astro Normal file
View File

@@ -0,0 +1,52 @@
---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import { getLocalizedPath } from '@/i18n/utils';
import type { Lang } from '@/types/i18n';
import { defaultLang } from '@/i18n/ui';
const lang = (Astro.currentLocale as Lang) || defaultLang;
const isZh = lang === 'zh';
const homePath = getLocalizedPath('/', lang);
---
<Layout
title={isZh ? '页面未找到' : 'Page Not Found'}
description={isZh ? '抱歉，您访问的页面不存在。' : 'Sorry, the page you are looking for does not exist.'}
>
<GlassHeader lang={lang} client:load transition:persist="header" />
<main id="main-content" class="min-h-screen pt-24 pb-20">
<Container>
<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
<h1 class="text-9xl font-bold text-primary">404</h1>
<h2 class="text-2xl font-semibold mt-4">
{isZh ? '页面未找到' : 'Page Not Found'}
</h2>
<p class="text-muted-foreground mt-4 max-w-md">
{isZh
? '抱歉，您访问的页面不存在或已被移除。'
: 'Sorry, the page you are looking for does not exist or has been moved.'}
</p>
<div class="mt-8 flex flex-col sm:flex-row gap-4">
<a
href={homePath}
class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
>
{isZh ? '返回首页' : 'Go Home'}
</a>
<a
href={isZh ? '/zh/blog' : '/blog'}
class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg border border-border hover:bg-muted transition-colors"
>
{isZh ? '浏览博客' : 'Browse Blog'}
</a>
</div>
</div>
</Container>
</main>
<Footer lang={lang} client:load />
</Layout>

2
src/pages/about.astro
View File

@@ -23,7 +23,7 @@ const prefix = isZh ? '/zh' : '';
<Layout title={isZh ? '关于' : 'About'}> <Layout title={isZh ? '关于' : 'About'}>
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main" id="overview"> <section class="page-content-main" id="overview">
<div class="mb-6 flex flex-wrap gap-2 text-sm"> <div class="mb-6 flex flex-wrap gap-2 text-sm">

2
src/pages/hire.astro
View File

@@ -20,7 +20,7 @@ const isZh = lang === 'zh';
<Layout title={isZh ? '合作' : 'Hire'}> <Layout title={isZh ? '合作' : 'Hire'}>
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main"> <section class="page-content-main">
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '合作方式' : 'Work With Me'}</h1> <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '合作方式' : 'Work With Me'}</h1>

2
src/pages/index.astro
View File

@@ -35,7 +35,7 @@ const latestPosts = sortPostsByDate(
<Layout title={isZh ? '首页' : 'Home'}> <Layout title={isZh ? '首页' : 'Home'}>
<GlassHeader lang={lang} client:idle transition:persist="header" /> <GlassHeader lang={lang} client:idle transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main space-y-6"> <section class="page-content-main space-y-6">
<p class="text-sm font-semibold uppercase tracking-[0.2em] text-primary">{isZh ? 'TERMINAL PROFILE' : 'TERMINAL PROFILE'}</p> <p class="text-sm font-semibold uppercase tracking-[0.2em] text-primary">{isZh ? 'TERMINAL PROFILE' : 'TERMINAL PROFILE'}</p>

2
src/pages/now.astro
View File

@@ -54,7 +54,7 @@ const today = new Date().toISOString().split('T')[0];
<Layout title="Now"> <Layout title="Now">
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main"> <section class="page-content-main">
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Now</h1> <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Now</h1>

2
src/pages/projects.astro
View File

@@ -20,7 +20,7 @@ const indieProjects = pageProjects.filter((project) => project.category === 'ind
<Layout title={isZh ? '项目' : 'Projects'}> <Layout title={isZh ? '项目' : 'Projects'}>
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main"> <section class="page-content-main">
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '项目经历' : 'Project Experience'}</h1> <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '项目经历' : 'Project Experience'}</h1>

2
src/pages/zh/about.astro
View File

@@ -23,7 +23,7 @@ const prefix = isZh ? '/zh' : '';
<Layout title={isZh ? '关于' : 'About'}> <Layout title={isZh ? '关于' : 'About'}>
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main" id="overview"> <section class="page-content-main" id="overview">
<div class="mb-6 flex flex-wrap gap-2 text-sm"> <div class="mb-6 flex flex-wrap gap-2 text-sm">

2
src/pages/zh/hire.astro
View File

@@ -20,7 +20,7 @@ const isZh = lang === 'zh';
<Layout title={isZh ? '合作' : 'Hire'}> <Layout title={isZh ? '合作' : 'Hire'}>
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main"> <section class="page-content-main">
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '合作方式' : 'Work With Me'}</h1> <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '合作方式' : 'Work With Me'}</h1>

2
src/pages/zh/index.astro
View File

@@ -35,7 +35,7 @@ const latestPosts = sortPostsByDate(
<Layout title={isZh ? '首页' : 'Home'}> <Layout title={isZh ? '首页' : 'Home'}>
<GlassHeader lang={lang} client:idle transition:persist="header" /> <GlassHeader lang={lang} client:idle transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main space-y-6"> <section class="page-content-main space-y-6">
<p class="text-sm font-semibold uppercase tracking-[0.2em] text-primary">{isZh ? 'TERMINAL PROFILE' : 'TERMINAL PROFILE'}</p> <p class="text-sm font-semibold uppercase tracking-[0.2em] text-primary">{isZh ? 'TERMINAL PROFILE' : 'TERMINAL PROFILE'}</p>

2
src/pages/zh/now.astro
View File

@@ -54,7 +54,7 @@ const today = new Date().toISOString().split('T')[0];
<Layout title="现在"> <Layout title="现在">
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main"> <section class="page-content-main">
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">现在</h1> <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">现在</h1>

2
src/pages/zh/projects.astro
View File

@@ -20,7 +20,7 @@ const indieProjects = pageProjects.filter((project) => project.category === 'ind
<Layout title={isZh ? '项目' : 'Projects'}> <Layout title={isZh ? '项目' : 'Projects'}>
<GlassHeader lang={lang} client:load transition:persist="header" /> <GlassHeader lang={lang} client:load transition:persist="header" />
<main class="min-h-screen pt-24 pb-20"> <main id="main-content" class="min-h-screen pt-24 pb-20">
<Container> <Container>
<section class="page-content-main"> <section class="page-content-main">
<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '项目经历' : 'Project Experience'}</h1> <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '项目经历' : 'Project Experience'}</h1>