diff --git a/pages/_app.tsx b/pages/_app.tsx
index 092f023..35ac90b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -14,12 +14,16 @@ import {
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import clsx from "clsx";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps);
   const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
   return (
     <ApolloProvider client={apolloClient}>
+      <Head>
+        <title>Ivan‘s Blog</title>
+      </Head>
       <ThemeProvider>
         <div className={styles.page}>
           <GlobalSidebar
diff --git a/pages/articles/[id].tsx b/pages/articles/[id].tsx
index 24e8229..3564c0a 100644
--- a/pages/articles/[id].tsx
+++ b/pages/articles/[id].tsx
@@ -6,6 +6,7 @@ import { ARTICLE } from "../../commons/graphql/queries";
 import { Article } from "../../commons/graphql/generated";
 import { formatRelative } from "date-fns";
 import { zhCN } from "date-fns/locale";
+import Head from "next/head";
 interface Props {
   article: Article;
 }
@@ -17,6 +18,9 @@ const ArticleDetails: FC<Props> = ({ article }) => {
 
   return (
     <main className={styles.articleDetails}>
+      <Head>
+        <title>{article.title} - Ivan‘s Blog - IvanLi.cc</title>
+      </Head>
       <article className={styles.article}>
         <header>
           <h1>{article.title}</h1>
