Skip to content

Commit eb09a54

Browse files
nghtctrlnghtctrl
committed
Use Astro SEO for SEO stuff
1 parent 12c4e0d commit eb09a54

7 files changed

Lines changed: 59 additions & 22 deletions

File tree

‎src/components/Header.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
import { Icon } from 'astro-icon/components';
33
4-
const { pageTitle } = Astro.props;
5-
const hideOnDesktop = pageTitle === 'About';
4+
const { title } = Astro.props;
5+
const hideOnDesktop = title === undefined;
66
---
77

88
<!-- The following code was adapted from https://github.com/jonnysmillie/astro-base/blob/4235669147f9ccff446d9238abc62c04aef63638/src/components/Header.astro -->
@@ -37,15 +37,15 @@ const hideOnDesktop = pageTitle === 'About';
3737

3838
<!-- Desktop menu -->
3939
<ul class='hidden md:flex items-center gap-6' role='list'>
40-
<li>
40+
<!-- <li>
4141
<a
4242
href='/'
4343
class='text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors'
4444
aria-current={Astro.url.pathname === '/features' ? 'page' : undefined}
4545
>
4646
About
4747
</a>
48-
</li>
48+
</li> -->
4949
<li>
5050
<a
5151
href='/blog'
@@ -102,7 +102,7 @@ const hideOnDesktop = pageTitle === 'About';
102102
aria-labelledby='mobile-menu-button'
103103
>
104104
<ul class='flex flex-col items-end' role='list'>
105-
<li>
105+
<!-- <li>
106106
<a
107107
href='/'
108108
class='block px-2 py-3 text-gray-600 dark:text-gray-400 transition-colors'
@@ -111,7 +111,7 @@ const hideOnDesktop = pageTitle === 'About';
111111
>
112112
About
113113
</a>
114-
</li>
114+
</li> -->
115115
<li>
116116
<a
117117
href='/blog'

‎src/config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const SITE_CONFIG = {
2+
title: 'Jiho Kim',
3+
description:
4+
'I am a human-computer interaction researcher studying how AI impacts the way we think, learn, express ourselves, and communicate with others.',
5+
siteUrl: 'https://jihokim.dev/',
6+
ogImage: '/src/assets/og-image.png',
7+
};

‎src/layouts/BlogLayout.astro‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import Layout from './Layout.astro';
44
55
type Props = CollectionEntry<'blog'>['data'];
66
7-
const { title, description, pubDate, author } = Astro.props;
7+
const { title, pubDate, author } = Astro.props;
8+
9+
const metadata = {
10+
title: title,
11+
useTitleTemplate: true,
12+
};
813
914
const formattedDate = new Intl.DateTimeFormat('en-US', {
1015
year: 'numeric',
@@ -14,7 +19,7 @@ const formattedDate = new Intl.DateTimeFormat('en-US', {
1419
}).format(pubDate);
1520
---
1621

17-
<Layout pageTitle={title}>
22+
<Layout metadata={metadata}>
1823
<h1>{title}</h1>
1924
<p>By {author} on {formattedDate}</p>
2025
<slot />

‎src/layouts/Layout.astro‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
---
22
import '../styles/global.css';
3+
import { SEO } from 'astro-seo';
34
import Header from '../components/Header.astro';
45
import Footer from '../components/Footer.astro';
56
import Prose from '../components/Prose.astro';
7+
import { SITE_CONFIG } from '../config';
68
7-
const { pageTitle } = Astro.props;
8-
const isAbout = pageTitle === 'About';
9+
interface Props {
10+
metadata?: {
11+
title?: string;
12+
useTitleTemplate?: boolean;
13+
description?: string;
14+
};
15+
}
16+
17+
const { metadata } = Astro.props;
918
---
1019

1120
<!doctype html>
@@ -58,15 +67,25 @@ const isAbout = pageTitle === 'About';
5867
)
5968
}
6069

61-
<!-- Basic SEO -->
62-
<meta
63-
name='description'
64-
content='Jiho Kim is a human-computer interaction researcher studying how AI shapes thinking, writing, communication, and learning.'
70+
<!-- SEO -->
71+
<SEO
72+
title={metadata?.title || SITE_CONFIG.title}
73+
titleTemplate={metadata?.useTitleTemplate
74+
? `%s - ${SITE_CONFIG.title}`
75+
: undefined}
76+
description={metadata?.description || SITE_CONFIG.description}
77+
openGraph={{
78+
basic: {
79+
title: SITE_CONFIG.title,
80+
type: 'website',
81+
image: SITE_CONFIG.ogImage,
82+
url: SITE_CONFIG.siteUrl,
83+
},
84+
}}
6585
/>
66-
{isAbout ? <title>Jiho Kim</title> : <title>{pageTitle} - Jiho Kim</title>}
6786
</head>
6887
<body class='min-h-screen flex flex-col pt-16 bg-white dark:bg-dark-bg'>
69-
<Header pageTitle={pageTitle} />
88+
<Header title={metadata?.title} />
7089
<main class='flex-1 my-12'>
7190
<div class='max-w-3xl mx-auto px-4 md:px-0'>
7291
<Prose>

‎src/pages/blog/index.astro‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@ const years: number[] = [
1515
...new Set(posts.map((post) => post.data.pubDate.getUTCFullYear())),
1616
];
1717
18-
const pageTitle = 'Blog';
18+
const metadata = {
19+
title: 'Blog',
20+
useTitleTemplate: true,
21+
};
1922
---
2023

21-
<Layout pageTitle={pageTitle}>
24+
<Layout metadata={metadata}>
2225
{
2326
years.map((year) => (
2427
<section>

‎src/pages/index.astro‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@ import Layout from '../layouts/Layout.astro';
55
import PaperCard from '../components/PaperCard.astro';
66
import SocialMediaButton from '../components/SocialMediaButton.astro';
77
import Link from '../components/Link.astro';
8-
98
import profilePicture from '../assets/profile-picture.webp';
109
import kim2025Cupid from '../assets/paper_thumbnails/kim-2025-cupid.webp';
1110
---
1211

13-
<Layout pageTitle={'About'}>
12+
<Layout>
1413
<div class='flex flex-col-reverse md:flex-row'>
1514
<div class='text-center md:text-left mr-4'>
1615
<div class='not-prose hidden md:block'>

‎src/pages/privacy-policy.astro‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
---
22
import Layout from '../layouts/Layout.astro';
33
import Link from '../components/Link.astro';
4-
const pageTitle = 'Privacy Policy';
4+
5+
const metadata = {
6+
title: 'Privacy Policy',
7+
useTitleTemplate: true,
8+
};
59
---
610

7-
<Layout pageTitle={pageTitle}>
11+
<Layout metadata={metadata}>
812
<h1>Privacy Policy</h1>
913

1014
<p>

0 commit comments

Comments
 (0)