diff --git a/index.html b/index.html
index 9c71c34b..e6a50d95 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Fandom-K | StarSync</title>
+    <title>StarSync</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
     <style>
diff --git a/public/default-og.png b/public/default-og.png
new file mode 100644
index 00000000..8364175e
Binary files /dev/null and b/public/default-og.png differ
diff --git a/src/pages/landing/LandingPage.jsx b/src/pages/landing/LandingPage.jsx
index eeba5247..9292f652 100644
--- a/src/pages/landing/LandingPage.jsx
+++ b/src/pages/landing/LandingPage.jsx
@@ -55,6 +55,8 @@ const LandingPage = () => {
   const { list } = useLoaderData();
   console.log('리스트:', list);
 
+  const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
+
   const handleClearStorage = () => {
     localStorage.clear();
   };
@@ -92,63 +94,90 @@ const LandingPage = () => {
   };
 
   return (
-    <div css={S.pageContainer}>
-      <div css={S.backgroundStarsWrapper}>
-        {stars.map((star) => (
-          <div key={star.id} css={S.starStyle(star)} />
-        ))}
-      </div>
+    <>
+      <title>StarSync</title>
+      <meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
+      <meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
+      <meta name="author" content="Team StarSync" />
+
+      {/* Open Graph */}
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="StarSync" />
+      <meta
+        property="og:description"
+        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+      />
+      <meta property="og:image" content={DEFAULT_OG_IMAGE} />
+      <meta property="og:url" content="https://www.starsync.wiki/" />
+      <meta property="og:site_name" content="StarSync" />
+
+      {/* Twitter */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content="StarSync" />
+      <meta
+        name="twitter:description"
+        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+      />
+      <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
 
-      {/* Dot Navigation */}
-      <nav css={S.navDots}>
+      <div css={S.pageContainer}>
+        <div css={S.backgroundStarsWrapper}>
+          {stars.map((star) => (
+            <div key={star.id} css={S.starStyle(star)} />
+          ))}
+        </div>
+
+        {/* Dot Navigation */}
+        <nav css={S.navDots}>
+          {sections.map((section, idx) => (
+            <button
+              key={section.id}
+              type="button"
+              css={[S.dot, activeIndex === idx && S.activeDot]}
+              onClick={() => handleSmoothScroll(idx)}
+              aria-label={`Move to ${section.id} section`}
+            />
+          ))}
+        </nav>
+
+        {/* Sections */}
         {sections.map((section, idx) => (
-          <button
+          <section
             key={section.id}
-            type="button"
-            css={[S.dot, activeIndex === idx && S.activeDot]}
-            onClick={() => handleSmoothScroll(idx)}
-            aria-label={`Move to ${section.id} section`}
-          />
-        ))}
-      </nav>
-
-      {/* Sections */}
-      {sections.map((section, idx) => (
-        <section
-          key={section.id}
-          data-index={idx}
-          ref={(el) => {
-            sectionRefs.current[idx] = el;
-          }}
-          css={S.section}
-        >
-          <motion.div
-            css={S.sectionContent}
-            initial={{ opacity: 0, y: 50 }}
-            animate={{ opacity: activeIndex === idx ? 1 : 0.3, y: activeIndex === idx ? 0 : 50 }}
-            transition={{ duration: 0.8 }}
+            data-index={idx}
+            ref={(el) => {
+              sectionRefs.current[idx] = el;
+            }}
+            css={S.section}
           >
-            <h1>{section.title}</h1>
-            <p>{section.description}</p>
-            <Link to="/list" onClick={handleClearStorage}>
-              <CustomButton type="button" variant="landing">
-                {section.buttonText}
-              </CustomButton>
-            </Link>
-            {section.showScrollGuide && (
-              <button
-                type="button"
-                css={S.scrollGuide}
-                onClick={handleScrollGuideClick}
-                aria-label="Scroll to next section"
-              >
-                스크롤하여 아래로 이동
-              </button>
-            )}
-          </motion.div>
-        </section>
-      ))}
-    </div>
+            <motion.div
+              css={S.sectionContent}
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: activeIndex === idx ? 1 : 0.3, y: activeIndex === idx ? 0 : 50 }}
+              transition={{ duration: 0.8 }}
+            >
+              <h1>{section.title}</h1>
+              <p>{section.description}</p>
+              <Link to="/list" onClick={handleClearStorage}>
+                <CustomButton type="button" variant="landing">
+                  {section.buttonText}
+                </CustomButton>
+              </Link>
+              {section.showScrollGuide && (
+                <button
+                  type="button"
+                  css={S.scrollGuide}
+                  onClick={handleScrollGuideClick}
+                  aria-label="Scroll to next section"
+                >
+                  스크롤하여 아래로 이동
+                </button>
+              )}
+            </motion.div>
+          </section>
+        ))}
+      </div>
+    </>
   );
 };
 
diff --git a/src/pages/list/ListPage.jsx b/src/pages/list/ListPage.jsx
index 7f0bed09..94ac9b14 100644
--- a/src/pages/list/ListPage.jsx
+++ b/src/pages/list/ListPage.jsx
@@ -14,6 +14,8 @@ const ListPage = () => {
   const [voteSuccessTrigger, setVoteSuccessTrigger] = useState(false);
   const { idols, donations } = useLoaderData(); // 여기서 데이터 받음
 
+  const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
+
   useEffect(() => {
     const storedCredit = localStorage.getItem('selectedCredit');
     if (storedCredit) {
@@ -29,26 +31,57 @@ const ListPage = () => {
   };
 
   return (
-    <div css={S.wrapper}>
-      <div css={S.listTheme} />
-      <Charge credit={credit} setModalType={setModalType} /> {/* Charge에 credit 전달 */}
-      <Carousel data={donations} setModalType={setModalType} setSelectedIndex={setSelectedIndex} />
-      <Chart
-        setModalType={setModalType}
-        selectedTab={selectedTab}
-        setSelectedTab={setSelectedTab}
-        voteSuccessTrigger={voteSuccessTrigger}
+    <>
+      <title>StarSync - 리스트</title>
+      <meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
+      <meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
+      <meta name="author" content="Team StarSync" />
+
+      {/* Open Graph */}
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="StarSync" />
+      <meta
+        property="og:description"
+        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
       />
-      <ListModal
-        modalType={modalType}
-        setModalType={setModalType}
-        credit={credit}
-        updateCredit={updateCredit}
-        setVoteSuccessTrigger={setVoteSuccessTrigger}
-        gender={selectedTab}
-        donations={selectedIndex != null ? donations.list[selectedIndex] : null}
+      <meta property="og:image" content={DEFAULT_OG_IMAGE} />
+      <meta property="og:url" content="https://www.starsync.wiki/list" />
+      <meta property="og:site_name" content="StarSync" />
+
+      {/* Twitter */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content="StarSync" />
+      <meta
+        name="twitter:description"
+        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
       />
-    </div>
+      <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
+
+      <div css={S.wrapper}>
+        <div css={S.listTheme} />
+        <Charge credit={credit} setModalType={setModalType} /> {/* Charge에 credit 전달 */}
+        <Carousel
+          data={donations}
+          setModalType={setModalType}
+          setSelectedIndex={setSelectedIndex}
+        />
+        <Chart
+          setModalType={setModalType}
+          selectedTab={selectedTab}
+          setSelectedTab={setSelectedTab}
+          voteSuccessTrigger={voteSuccessTrigger}
+        />
+        <ListModal
+          modalType={modalType}
+          setModalType={setModalType}
+          credit={credit}
+          updateCredit={updateCredit}
+          setVoteSuccessTrigger={setVoteSuccessTrigger}
+          gender={selectedTab}
+          donations={selectedIndex != null ? donations.list[selectedIndex] : null}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/pages/my/MyPage.jsx b/src/pages/my/MyPage.jsx
index 9b6298ad..501d6a80 100644
--- a/src/pages/my/MyPage.jsx
+++ b/src/pages/my/MyPage.jsx
@@ -20,6 +20,8 @@ const MyPage = () => {
   const maxPage = Math.ceil(allIdols.length / pageSize);
   const [screenSize, setScreenSize] = useState('desktop');
 
+  const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
+
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
@@ -128,49 +130,42 @@ const MyPage = () => {
   };
 
   return (
-    <div css={S.myPageWrapper}>
-      <div css={S.contentBox}>
-        <h2 css={[S.title, S.myIdolTitle]}>내가 관심있는 아이돌</h2>
-        <section css={[S.horizonList, S.scrollStyle]}>
-          {myIdol.map((idol) => {
-            return (
-              <div key={idol.id}>
-                <AvatarButton
-                  imgUrl={idol.profilePicture}
-                  removeIdol={() => removeMyIdol(idol.id)}
-                />
-                <h3 css={S.idolName}>{idol.name}</h3>
-                <p css={S.groupName}>{idol.group}</p>
-              </div>
-            );
-          })}
-        </section>
-
-        <h2 css={[S.title, S.allIdolTitle]}>관심 있는 아이돌을 추가해보세요.</h2>
-        <div css={S.idolListWrapper}>
-          {screenSize !== 'mobile' && currentIdols.length > 0 ? (
-            <ArrowButton
-              direction={'left'}
-              styles={[S.arrowButton, S.prev]}
-              onButtonClick={() => {
-                if (currentPage > 1) {
-                  setCurrentPage((prev) => prev - 1);
-                }
-              }}
-              disabled={currentPage === 1}
-            />
-          ) : null}
-
-          <section
-            css={[screenSize === 'mobile' ? [S.mobileAllIdols, S.scrollStyle] : null, S.idolList]}
-          >
-            {currentIdols.map((idol) => {
+    <>
+      <title>StarSync - 마이페이지</title>
+      <meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
+      <meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
+      <meta name="author" content="Team StarSync" />
+
+      {/* Open Graph */}
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="StarSync - 마이페이지" />
+      <meta
+        property="og:description"
+        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+      />
+      <meta property="og:image" content={DEFAULT_OG_IMAGE} />
+      <meta property="og:url" content="https://www.starsync.wiki/mypage" />
+      <meta property="og:site_name" content="StarSync" />
+
+      {/* Twitter */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content="StarSync - 마이페이지" />
+      <meta
+        name="twitter:description"
+        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+      />
+      <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
+
+      <div css={S.myPageWrapper}>
+        <div css={S.contentBox}>
+          <h2 css={[S.title, S.myIdolTitle]}>내가 관심있는 아이돌</h2>
+          <section css={[S.horizonList, S.scrollStyle]}>
+            {myIdol.map((idol) => {
               return (
-                <div key={idol.id} css={[S.allProfileSize]}>
-                  <Avatar
+                <div key={idol.id}>
+                  <AvatarButton
                     imgUrl={idol.profilePicture}
-                    onSelectToggle={() => toggleProfile(idol)}
-                    isSelected={selectedProfiles[idol.id]}
+                    removeIdol={() => removeMyIdol(idol.id)}
                   />
                   <h3 css={S.idolName}>{idol.name}</h3>
                   <p css={S.groupName}>{idol.group}</p>
@@ -178,40 +173,76 @@ const MyPage = () => {
               );
             })}
           </section>
-          {screenSize !== 'mobile' && currentIdols.length > 0 ? (
-            <ArrowButton
-              direction="right"
-              styles={[S.arrowButton, S.next]}
+
+          <h2 css={[S.title, S.allIdolTitle]}>관심 있는 아이돌을 추가해보세요.</h2>
+          <div css={S.idolListWrapper}>
+            {screenSize !== 'mobile' && currentIdols.length > 0 ? (
+              <ArrowButton
+                direction={'left'}
+                styles={[S.arrowButton, S.prev]}
+                onButtonClick={() => {
+                  if (currentPage > 1) {
+                    setCurrentPage((prev) => prev - 1);
+                  }
+                }}
+                disabled={currentPage === 1}
+              />
+            ) : null}
+
+            <section
+              css={[screenSize === 'mobile' ? [S.mobileAllIdols, S.scrollStyle] : null, S.idolList]}
+            >
+              {currentIdols.map((idol) => {
+                return (
+                  <div key={idol.id} css={[S.allProfileSize]}>
+                    <Avatar
+                      imgUrl={idol.profilePicture}
+                      onSelectToggle={() => toggleProfile(idol)}
+                      isSelected={selectedProfiles[idol.id]}
+                    />
+                    <h3 css={S.idolName}>{idol.name}</h3>
+                    <p css={S.groupName}>{idol.group}</p>
+                  </div>
+                );
+              })}
+            </section>
+            {screenSize !== 'mobile' && currentIdols.length > 0 ? (
+              <ArrowButton
+                direction="right"
+                styles={[S.arrowButton, S.next]}
+                onButtonClick={() => {
+                  if (currentPage < maxPage) {
+                    setCurrentPage((prev) => prev + 1);
+                  }
+                }}
+                disabled={currentPage === maxPage}
+              />
+            ) : null}
+          </div>
+          <div css={S.customButtonWrapper}>
+            <CustomButton
+              type="button"
+              isRound={true}
+              style={S.customButtonStyle}
               onButtonClick={() => {
-                if (currentPage < maxPage) {
-                  setCurrentPage((prev) => prev + 1);
+                const hasSelected = Object.values(selectedProfiles).some(
+                  (isSelected) => isSelected,
+                );
+
+                if (hasSelected) {
+                  addMyIdols();
+                } else {
+                  showAlert('관심있는 아이돌을 추가해 주세요', 'warning', 2000);
                 }
               }}
-              disabled={currentPage === maxPage}
-            />
-          ) : null}
-        </div>
-        <div css={S.customButtonWrapper}>
-          <CustomButton
-            type="button"
-            isRound={true}
-            style={S.customButtonStyle}
-            onButtonClick={() => {
-              const hasSelected = Object.values(selectedProfiles).some((isSelected) => isSelected);
-
-              if (hasSelected) {
-                addMyIdols();
-              } else {
-                showAlert('관심있는 아이돌을 추가해 주세요', 'warning', 2000);
-              }
-            }}
-          >
-            <img src={addIcon} alt="addIcon" css={S.buttonIcon} />
-            추가하기
-          </CustomButton>
+            >
+              <img src={addIcon} alt="addIcon" css={S.buttonIcon} />
+              추가하기
+            </CustomButton>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
