diff --git a/next-seo.config.js b/next-seo.config.js
new file mode 100644
index 0000000..6983f2c
--- /dev/null
+++ b/next-seo.config.js
@@ -0,0 +1,24 @@
+// @ts-check
+
+/**
+ * @type {import('next-seo').NextSeoProps}
+ */
+const defaultSEOConfig = {
+ title: "Angelo's NextJS Template",
+ titleTemplate: "%s | Angelo's NextJS Template",
+
+ openGraph: {
+ type: 'website',
+ locale: 'en_US',
+ url: process.env.SITE_URL ?? 'https://angeloanan.xyz',
+ site_name: "Angelo's NextJS Template"
+ },
+
+ twitter: {
+ handle: '@uwungelo',
+ site: '@uwungelo',
+ cardType: 'summary_large_image'
+ }
+}
+
+export default defaultSEOConfig
diff --git a/package.json b/package.json
index 1256011..7af22cc 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"autoprefixer": "^10.4.0",
"next": "^12.1.0",
"next-compose-plugins": "^2.2.1",
+ "next-seo": "^5.1.0",
"postcss": "^8.4.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 9f53819..e7b5c23 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,6 +3,9 @@ import '../style/globals.css'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
+import { DefaultSeo } from 'next-seo'
+
+import SEOConfig from '../../next-seo.config'
type CustomAppProps = AppProps & {
Component: NextPage & {
@@ -14,9 +17,13 @@ function CustomApp({ Component, pageProps }: CustomAppProps) {
return Component.disableLayout ? (