ISLAND-IDs · rrayy-25809 · Oct 26, 2025 · Oct 20, 2025 · Oct 22, 2025 · Oct 26, 2025
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="src/asset/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ISLAND-IDs</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,9 @@
   "dependencies": {
     "bootstrap-icons": "^1.13.1",
     "i18next": "^25.5.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-i18next": "^15.7.3",
     "react-router-dom": "^7.9.1",
     "soundcloud.ts": "^0.6.5",
@@ -32,6 +33,6 @@
     "sass-embedded": "^1.93.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
+    "vite": "^7.1.11"
   }
 }
diff --git a/robots.txt b/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://island-ids.netlify.app/sitemap.xml
diff --git a/sitemap.xml b/sitemap.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+   <url>
+      <loc>https://island-ids.netlify.app/</loc>
+
+      <lastmod>2025-10-26</lastmod>
+      <changefreq>monthly</changefreq>
+      <priority>0.8</priority>
+   </url>
+    <url>
+        <loc>https://island-ids.netlify.app/about</loc>
+        <lastmod>2025-10-26</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.6</priority>
+    </url>
+    <url>
+        <loc>https://island-ids.netlify.app/submit-id</loc>
+        <lastmod>2025-10-26</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.6</priority>
+    </url>
+</urlset>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,13 @@
 import { Outlet, Link, useLocation } from 'react-router-dom';
 import { useTranslation } from "react-i18next";
 import { useState } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
+
 import TranslateButton from './language/translate_button.tsx';
 import SoundCloudIcon from './components/soundcloud_icon';
-import './style.scss';
+
 import 'bootstrap-icons/font/bootstrap-icons.css'
+import './style.scss';
 
 function App() {
   const location = useLocation();
@@ -31,8 +34,9 @@ function App() {
         </nav>
       </header>
       <main>
-        {/* 현재 경로에 맞는 페이지(예: HomePage.tsx)가 이 위치에 렌더링됩니다. */}
-        <Outlet />
+        <HelmetProvider>
+          <Outlet />
+        </HelmetProvider>
       </main>
       <footer>
         <div className="footer-content">

diff --git a/src/components/metaTag.tsx b/src/components/metaTag.tsx
@@ -0,0 +1,32 @@
+import { Helmet } from 'react-helmet-async';
+
+interface Props {
+  title: string;
+  description: string;
+  keywords: string;
+  imgsrc?: string;
+  url: string;
+}
+function MetaTag(Meta: Props) {
+  const { title, description, keywords, imgsrc, url } = Meta;
+
+  return (
+    <Helmet>
+      <title>{title}</title>
+
+      <meta name='description' content={description} />
+      <meta name='keywords' content={keywords} />
+
+      <meta property='og:type' content='website' />
+      <meta property='og:title' content={title} />
+      <meta property='og:site_name' content={title} />
+      <meta property='og:description' content={description} />
+      <meta property='og:image' content={imgsrc} />
+      <meta property='og:url' content={url} />
+
+      <link rel='canonical' href={url} />
+    </Helmet>
+  );
+}
+
+export default MetaTag;
diff --git a/src/language/en.json b/src/language/en.json
@@ -15,5 +15,8 @@
     "label":"Label Transition",
     "label_desc":"We aim to become a label for growing artists",
     "operators": "Operators",
-    "detail": "View Details"
+    "detail": "View Details",
+    "about_page_description": "This is the about page for ISLAND. Learn about ISLAND's mission, activities, and operators.",
+    "submit_id_page_description": "This is the ID submission page for ISLAND. Submit your ID tracks here.",
+    "song_page_description": "This page is the song page for ISLAND. Check out detailed information about the song."
 }
diff --git a/src/language/ko.json b/src/language/ko.json
@@ -15,5 +15,8 @@
     "label":"음반사로 전환",
     "label_desc":"성장하는 아티스트를 위한 음반사화 추진",
     "operators": "운영진",
-    "detail": "더 알아보기"
+    "detail": "더 알아보기",
+    "about_page_description": "ISLAND에 대한 소개 페이지입니다. ISLAND의 사명, 활동 및 운영진에 대해 알아보세요.",
+    "submit_id_page_description": "ISLAND에 ID 제출 페이지입니다. 여기를 통해 당신의 ID 트랙을 제출하세요.",
+    "song_page_description": "이 페이지는 ISLAND의 곡 페이지입니다. 곡에 대한 자세한 정보를 확인하세요."
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,18 +1,22 @@
 import { useTranslation } from "react-i18next";
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { EffectCoverflow, Pagination } from 'swiper/modules';
+
 import Song_card from "../components/song_card";
+import Text_Card from "../components/text_card";
+import MetaTag from "../components/metaTag";
+import releases from '../releases.json';
+
 import 'swiper/swiper.css';
 import "./pages.scss";
-import { EffectCoverflow, Pagination } from 'swiper/modules';
-import releases from '../releases.json';
-import Text_Card from "../components/text_card";
 
 function HomePage(){
     //API를 써서 리스트 가져오기?
     const { t } = useTranslation();
 
     return (
       <div>
+        <MetaTag title="ISLAND-IDs" description={t("sub_title")} keywords="Main of ISLAND" imgsrc="../asset/icon.png" url="https://island-ids.netlify.app/"/>
         <section className="hero">
           <div className="hero-content">
             <h1>ISLAND</h1>

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import MetaTag from "../components/metaTag";
 import Card from "../components/text_card";
 import "./pages.scss";
 
@@ -7,6 +8,7 @@ function About() {
 
     return (
         <div className="about">
+            <MetaTag title={"ISLAND · "+ t("about_island")} description={t("about_page_description")} keywords="about" imgsrc="../asset/icon.png" url="https://island-ids.netlify.app/about/"/>
             <Card title={t("about_island")}>
                 <p className="intro-text">
                     <strong>ISLAND IDs</strong>{t("what_is_ISLAND")}

diff --git a/src/pages/id_submit.tsx b/src/pages/id_submit.tsx
@@ -1,22 +1,26 @@
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import MetaTag from "../components/metaTag";
 
 function SubmitPage() {
   const containerRef = useRef<HTMLIFrameElement | null>(null);
-  const [height, setHeight] = useState(1500);
+  const [height, setHeight] = useState(1700);
+  const { t } = useTranslation();
 
   useEffect(() => {
     const iframe = containerRef.current;
     const width = iframe?.clientWidth;
 
     if (iframe && width != undefined){
       if (width < 600) {
-        setHeight(1500 + (600 - width));
+        setHeight(1700 + (600 - width));
       }
     }
   }, []);
 
   return (
     <div className="submit_form">
+      <MetaTag title={"ISLAND · "+ t("submit_id")} description={t("submit_id_page_description")} keywords="submit" imgsrc="../asset/icon.png" url="https://island-ids.netlify.app/submission/"/>
       <iframe
       src="https://docs.google.com/forms/d/e/1FAIpQLSetYQu8xbPS9Ndz5ncRogDczAnL6vlLbrNPz-b4qDq9TiDSVw/viewform?embedded=true"
       ref={containerRef}

diff --git a/src/pages/pages.scss b/src/pages/pages.scss
@@ -192,7 +192,7 @@
 }
 
 .song {
-    margin-top: 85px;
+    margin-top: 100px;
     margin-bottom: 85px;
     min-height: 100vh;
     padding: 0 20px;