diff --git a/src/components/Meta/Meta.tsx b/src/components/Meta/Meta.tsx
new file mode 100644
index 0000000..45666f6
--- /dev/null
+++ b/src/components/Meta/Meta.tsx
@@ -0,0 +1,44 @@
+const locales = {
+ en: 'en_US',
+ ko: 'ko_KR',
+};
+
+export const Meta = ({ data }): JSX.Element => {
+ const lang = locales[data.locale] || locales.en;
+ const { title } = data;
+ const { description } = data;
+ const image = data.image !== undefined && `${data.image}`;
+ const canonical = 'https://hanspoon-31cd9.web.app/';
+ const type = data.type === undefined ? 'website' : data.type;
+ const width = data.image && (data.width || 1200);
+ const height = data.image && (data.height || 630);
+
+ return (
+ <>
+ {`${title} - HanSpoon`}
+
+ {canonical ? : null}
+ {image ? : null}
+ {image ? : null}
+
+
+
+ {description ? : null}
+ {canonical ? : null}
+
+
+ {image ? : null}
+ {width ? : null}
+ {height ? : null}
+
+
+ {/* change type of twitter if there is no image? */}
+
+
+ {description ? : null}
+ {image ? : null}
+
+ {canonical ? : null}
+
+ );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index 92e0df9..91e5360 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -23,3 +23,4 @@ export * from './Toast/Toast';
export * from './Accordion/Accordion';
export * from './CardList/CardList';
export * from './Pagination/Pagination';
+export * from './Meta/Meta';
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3539493..ec3cac4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,17 @@
import type { NextPage } from 'next';
import Head from 'next/head';
-import { HotRecipes, RandomRecipe } from 'components';
+import { HotRecipes, Meta, RandomRecipe } from 'components';
import { media } from 'utils';
import { css } from '@emotion/react';
const Home: NextPage = () => {
+ const metaData = {
+ title: 'Home',
+ };
return (
<>
- Home - HanSpoon
+