diff --git a/apps/blog/package.json b/apps/blog/package.json
index 5bac49d..4bae86d 100644
--- a/apps/blog/package.json
+++ b/apps/blog/package.json
@@ -21,6 +21,7 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "elasticlunr": "^0.9.5",
         "highlight.js": "^11.7.0",
+        "hoofd": "^1.7.0",
         "katex": "^0.16.4",
         "local-storage-fallback": "^4.1.2",
         "react": "^18.2.0",
@@ -30,7 +31,6 @@
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
-        "react-helmet-async": "^1.3.0",
         "react-router-dom": "^6.4.5",
         "react-scripts": "^5.0.1",
         "react-select": "^5.7.0",
diff --git a/apps/blog/public/index.html b/apps/blog/public/index.html
index aea458d..eadd3b6 100644
--- a/apps/blog/public/index.html
+++ b/apps/blog/public/index.html
@@ -4,12 +4,17 @@
         <meta charset="utf-8" />
         <link rel="icon" href="%PUBLIC_URL%/icon/icon_circle.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-
         <meta name="theme-color" content="#000000" />
-        <meta property="og:image" content="%PUBLIC_URL%/img/icon.png" />
-        <meta property="og:type" content="website" />
-
+        <meta name="description" content="developomp's Blog" />
         <title>pomp</title>
+
+        <!-- OpenGraph -->
+        <meta property="og:title" content="pomp" />
+        <meta property="og:site_name" content="developomp's Blog" />
+        <meta property="og:description" content="developomp's Blog" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://blog.developomp.com" />
+        <meta property="og:image" content="%PUBLIC_URL%/icon/icon_circle.svg" />
     </head>
     <body>
         <noscript>
diff --git a/apps/blog/src/App.tsx b/apps/blog/src/App.tsx
index e264100..fe02c61 100644
--- a/apps/blog/src/App.tsx
+++ b/apps/blog/src/App.tsx
@@ -4,7 +4,7 @@ import lightTheme from "@developomp-site/theme/dist/light.json"
 import { useContext, useEffect, useState } from "react"
 import { Routes, Route } from "react-router-dom"
 import styled, { ThemeProvider } from "styled-components"
-import { Helmet } from "react-helmet-async"
+import { useTitleTemplate, useTitle, useMeta } from "hoofd"
 import { isIE } from "react-device-detect"
 
 import Loading from "./components/Loading"
@@ -36,9 +36,12 @@ const StyledContentContainer = styled.div`
 
 export default function App() {
     const { globalState } = useContext(globalContext)
-
     const [isLoading, setIsLoading] = useState(true)
 
+    useTitleTemplate("pomp's blog | %s")
+    useTitle("Home")
+    useMeta({ property: "og:title", content: "Home" })
+
     useEffect(() => {
         // set loading to false if all fonts are loaded
         // checks if document.fonts.onloadingdone is supported on the browser
@@ -68,13 +71,6 @@ export default function App() {
                         : lightTheme,
             }}
         >
-            <Helmet>
-                <meta property="og:site_name" content="developomp" />
-                <meta property="og:title" content="Home" />
-                <meta property="og:description" content="developomp's blog" />
-                <meta name="description" content="developomp's blog" />
-            </Helmet>
-
             <GlobalStyle />
 
             <Header />
diff --git a/apps/blog/src/index.tsx b/apps/blog/src/index.tsx
index 5e13bf0..ea871e9 100644
--- a/apps/blog/src/index.tsx
+++ b/apps/blog/src/index.tsx
@@ -3,7 +3,6 @@ import "@fontsource/noto-sans-kr/700.css"
 import "@fontsource/source-code-pro"
 
 import { createRoot } from "react-dom/client"
-import { HelmetProvider } from "react-helmet-async"
 import { BrowserRouter } from "react-router-dom"
 import { GlobalStore } from "./globalContext"
 
@@ -14,9 +13,7 @@ const root = createRoot(container)
 root.render(
     <GlobalStore>
         <BrowserRouter>
-            <HelmetProvider>
-                <App />
-            </HelmetProvider>
+            <App />
         </BrowserRouter>
     </GlobalStore>
 )
diff --git a/apps/blog/src/pages/Home/Home.tsx b/apps/blog/src/pages/Home/Home.tsx
index eb78a82..a6a155e 100644
--- a/apps/blog/src/pages/Home/Home.tsx
+++ b/apps/blog/src/pages/Home/Home.tsx
@@ -4,7 +4,7 @@
  */
 
 import { useCallback, useEffect, useState } from "react"
-import { Helmet } from "react-helmet-async"
+import { useTitle, useMeta } from "hoofd"
 import styled from "styled-components"
 
 import PostCard from "../../components/PostCard"
@@ -25,6 +25,9 @@ export default () => {
     const [postsLength, setPostsLength] = useState(0)
     const [postCards, setPostCards] = useState<JSX.Element[]>([])
 
+    useTitle("Home")
+    useMeta({ property: "og:title", content: "Home" })
+
     const loadPostCards = useCallback(() => {
         let postCount = 0
         const postCards = [] as JSX.Element[]
@@ -62,13 +65,6 @@ export default () => {
 
     return (
         <>
-            <Helmet>
-                <title>pomp | Home</title>
-
-                <meta property="og:type" content="website" />
-                <meta property="og:image" content="/icon/icon.svg" />
-            </Helmet>
-
             <PostList>
                 <h1>Recent Posts</h1>
 
diff --git a/apps/blog/src/pages/NotFound.tsx b/apps/blog/src/pages/NotFound.tsx
index 239ac57..02d26aa 100644
--- a/apps/blog/src/pages/NotFound.tsx
+++ b/apps/blog/src/pages/NotFound.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import { Helmet } from "react-helmet-async"
+import { useTitle, useMeta } from "hoofd"
 
 import MainContent from "../components/MainContent"
 
@@ -12,21 +12,11 @@ const Styled404 = styled.h1`
 `
 
 const NotFound = () => {
+    useTitle("404")
+    useMeta({ property: "og:title", content: "Page Not Found" })
+
     return (
         <>
-            <Helmet>
-                <title>pomp | 404</title>
-
-                <meta property="og:title" content="Page Not Found" />
-                <meta property="og:type" content="website" />
-                <meta property="og:url" content="http://blog.developomp.com" />
-                <meta
-                    property="og:image"
-                    content="http://blog.developomp.com/icon/icon.svg"
-                />
-                <meta property="og:description" content="Page does not exist" />
-            </Helmet>
-
             <StyledNotFound>
                 <Styled404>404</Styled404>
                 <br />
diff --git a/apps/blog/src/pages/Page/Page.tsx b/apps/blog/src/pages/Page/Page.tsx
index 903738b..ff10ff7 100644
--- a/apps/blog/src/pages/Page/Page.tsx
+++ b/apps/blog/src/pages/Page/Page.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react"
-import { Helmet } from "react-helmet-async"
+import { useTitle, useMeta } from "hoofd"
 import { useLocation } from "react-router-dom"
 import styled from "styled-components"
 
@@ -37,6 +37,9 @@ export default function Page() {
     const [pageType, setPageType] = useState<PageType>(PageType.POST)
     const [isLoading, setIsLoading] = useState(true)
 
+    useTitle(pageData?.title || "Loading")
+    useMeta({ property: "og:title", content: pageData?.title })
+
     // this code runs if either the url or the locale changes
     useEffect(() => {
         const content_id = pathname.replace(/\/$/, "") // remove trailing slash
@@ -62,14 +65,6 @@ export default function Page() {
 
     return (
         <>
-            <Helmet>
-                <title>pomp | {pageData.title}</title>
-
-                <meta property="og:title" content={pageData.title} />
-                <meta property="og:type" content="website" />
-                <meta property="og:image" content="/icon/icon.svg" />
-            </Helmet>
-
             <MainContent>
                 {/* next/previous series post buttons */}
                 {pageType == PageType.SERIES && (
diff --git a/apps/blog/src/pages/Search/Search.tsx b/apps/blog/src/pages/Search/Search.tsx
index c8ecb54..79543b3 100644
--- a/apps/blog/src/pages/Search/Search.tsx
+++ b/apps/blog/src/pages/Search/Search.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react"
 import styled from "styled-components"
 import { useSearchParams } from "react-router-dom"
-import { Helmet } from "react-helmet-async"
+import { useTitle, useMeta } from "hoofd"
 import { Range } from "react-date-range"
 
 import elasticlunr from "elasticlunr" // search engine
@@ -105,6 +105,9 @@ const Search = () => {
 
     const [postCards, setPostCards] = useState<JSX.Element[]>([])
 
+    useTitle("Search")
+    useMeta({ property: "og:title", content: "Search" })
+
     const doSearch = useCallback(() => {
         try {
             const _postCards: JSX.Element[] = []
@@ -218,10 +221,6 @@ const Search = () => {
 
     return (
         <>
-            <Helmet>
-                <title>pomp | Search</title>
-            </Helmet>
-
             <StyledSearch>
                 <h1>Search</h1>
 
diff --git a/apps/main/src/app.html b/apps/main/src/app.html
index 55e336e..7ae043b 100644
--- a/apps/main/src/app.html
+++ b/apps/main/src/app.html
@@ -4,11 +4,18 @@
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="description" content="developomp's website" />
         <meta name="theme-color" content="#000000" />
-        <meta property="og:image" content="/icon.png" />
-        <meta property="og:type" content="website" />
+        <meta name="description" content="developomp's website" />
         <title>developomp</title>
+
+        <!-- OpenGraph -->
+        <meta property="og:title" content="developomp" />
+        <meta property="og:site_name" content="developomp's website" />
+        <meta property="og:description" content="developomp's website" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://developomp.com" />
+        <meta property="og:image" content="/favicon.svg" />
+
         %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
diff --git a/apps/portfolio/index.html b/apps/portfolio/index.html
index a607dd6..56f749d 100644
--- a/apps/portfolio/index.html
+++ b/apps/portfolio/index.html
@@ -10,11 +10,14 @@
 
         <!-- OpenGraph -->
         <meta property="og:title" content="Portfolio" />
-        <meta property="og:site_name" content="pomp's portfolio" />
+        <meta property="og:site_name" content="developomp's portfolio" />
         <meta property="og:description" content="developomp's Portfolio" />
         <meta property="og:type" content="website" />
-        <meta property="og:url" content="http://portfolio.developomp.com" />
-        <meta property="og:image" content="/favicon.svg" />
+        <meta property="og:url" content="https://portfolio.developomp.com" />
+        <meta
+            property="og:image"
+            content="https://portfolio.developomp.com/favicon.svg"
+        />
     </head>
     <body class="dark">
         <div id="root"></div>
diff --git a/apps/portfolio/src/App.tsx b/apps/portfolio/src/App.tsx
index 95f2ef1..91d08ee 100644
--- a/apps/portfolio/src/App.tsx
+++ b/apps/portfolio/src/App.tsx
@@ -10,6 +10,7 @@ import Project from "@/routes/Project"
 
 const App: FC = () => {
     useTitleTemplate("Portfolio | %s")
+    // no need to set title and meta tags here
 
     return (
         <>
diff --git a/apps/portfolio/src/routes/Home/Home.tsx b/apps/portfolio/src/routes/Home/Home.tsx
index 33642a1..49698ee 100644
--- a/apps/portfolio/src/routes/Home/Home.tsx
+++ b/apps/portfolio/src/routes/Home/Home.tsx
@@ -2,7 +2,7 @@ import "./style.scss"
 
 import portfolio from "@developomp-site/blog-content/dist/portfolio.json"
 import type { PortfolioProject } from "@developomp-site/blog-content/src/types/types"
-import { useTitle } from "hoofd"
+import { useMeta, useTitle } from "hoofd"
 import { type FC } from "react"
 
 import Badge from "@/components/Badge"
@@ -29,6 +29,7 @@ for (const projectID in portfolio.projects) {
 
 const Home: FC = () => {
     useTitle("Home")
+    useMeta({ property: "og:title", content: "Home" })
 
     return (
         <>
diff --git a/apps/portfolio/src/routes/Loading.tsx b/apps/portfolio/src/routes/Loading.tsx
index a60d327..03f30c9 100644
--- a/apps/portfolio/src/routes/Loading.tsx
+++ b/apps/portfolio/src/routes/Loading.tsx
@@ -1,10 +1,11 @@
-import { useTitle } from "hoofd"
+import { useMeta, useTitle } from "hoofd"
 import { type FC } from "react"
 
 import Loading from "@/components/Loading"
 
 const LoadingPage: FC = () => {
     useTitle("Loading")
+    useMeta({ property: "og:title", content: "Loading" })
 
     return <Loading />
 }
diff --git a/apps/portfolio/src/routes/NotFound/NotFound.tsx b/apps/portfolio/src/routes/NotFound/NotFound.tsx
index d5a89f5..edcfd26 100644
--- a/apps/portfolio/src/routes/NotFound/NotFound.tsx
+++ b/apps/portfolio/src/routes/NotFound/NotFound.tsx
@@ -1,8 +1,12 @@
 import "./style.css"
 
+import { useMeta, useTitle } from "hoofd"
 import { type FC } from "react"
 
 const NotFound: FC = () => {
+    useTitle("404")
+    useMeta({ property: "og:title", content: "Page Not Found" })
+
     return (
         <>
             <h1 className="w-fit px-4 py-2 text-7xl dark:bg-dark-text-default dark:text-dark-ui-bg">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c7de678..ca9dbb2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       highlight.js:
         specifier: ^11.7.0
         version: 11.7.0
+      hoofd:
+        specifier: ^1.7.0
+        version: 1.7.0(react@18.2.0)
       katex:
         specifier: ^0.16.4
         version: 0.16.4
@@ -86,9 +89,6 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
-      react-helmet-async:
-        specifier: ^1.3.0
-        version: 1.3.0(react-dom@18.2.0)(react@18.2.0)
       react-router-dom:
         specifier: ^6.4.5
         version: 6.4.5(react-dom@18.2.0)(react@18.2.0)
@@ -9883,12 +9883,6 @@ packages:
       side-channel: 1.0.4
     dev: false
 
-  /invariant@2.2.4:
-    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
   /ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -13130,25 +13124,6 @@ packages:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
     dev: false
 
-  /react-fast-compare@3.2.0:
-    resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
-    dev: false
-
-  /react-helmet-async@1.3.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==}
-    peerDependencies:
-      react: ^16.6.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@babel/runtime': 7.20.6
-      invariant: 2.2.4
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-fast-compare: 3.2.0
-      shallowequal: 1.1.0
-    dev: false
-
   /react-html-attributes@1.4.6:
     resolution: {integrity: sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==}
     dependencies:
