diff --git a/src/app/client/page.tsx b/src/app/client/page.tsx
deleted file mode 100644
index 9a4e1bce..00000000
--- a/src/app/client/page.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import type { MDXEditorMethods } from "@mdxeditor/editor";
-import rehypeStringify from "rehype-stringify";
-import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
-import { unified } from "unified";
-import { ForwardRefEditor } from "@/components/_common/Editor/ForwardedRefEditor";
-
-const ClientPage = () => {
-  const markdown = `A sample post with markdown.
-## Inline Highlighting
-Sample of inline highlighting \`sum = parseInt(num1) + parseInt(num2)\`
-## Code Blocks`;
-  const editorRef = useRef<MDXEditorMethods>(null);
-  const [html, setHtml] = useState("");
-
-  useEffect(() => {
-    document.getElementById("preview")!.innerHTML = html;
-  }, [html]);
-
-  return (
-    <div>
-      <h3>Client Page</h3>
-      <ForwardRefEditor
-        className={"h-full w-640"}
-        contentEditableClassName={"prose"}
-        markdown={markdown}
-        ref={editorRef}
-        onChange={(markdown) => {
-          unified()
-            .use(remarkParse)
-            .use(remarkRehype)
-            .use(rehypeStringify)
-            .process(markdown)
-            .then((file) => {
-              setHtml(String(file.value));
-            });
-        }}
-      />
-      <div className={"my-20 text-xl"}>Preview(HTML)</div>
-      <div
-        id={"preview"}
-        className={"prose h-full w-640"}
-      ></div>
-    </div>
-  );
-};
-
-export default ClientPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6d686aab..70bed03f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,6 +15,13 @@ export const metadata: Metadata = {
   title: "Steady",
   description: "The New Study & Project Join Platform",
   icons: [{ rel: "icon", url: Favicon.src }],
+  metadataBase: new URL("https://www.steadies.kr"),
+  openGraph: {
+    title: "Steady",
+    description: "스터디/프로젝트 모집 플랫폼",
+    url: "https://www.steadies.kr",
+    type: "website",
+  },
 };
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
diff --git a/src/app/opengraph-image.alt.txt b/src/app/opengraph-image.alt.txt
new file mode 100644
index 00000000..1f047ad6
--- /dev/null
+++ b/src/app/opengraph-image.alt.txt
@@ -0,0 +1 @@
+Steady Logo
\ No newline at end of file
diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
new file mode 100644
index 00000000..20cb42df
Binary files /dev/null and b/src/app/opengraph-image.png differ