feat: enhance SEO, security and performance through meta tags

- Add DNS prefetch and preconnect for performance optimization
- Implement Referrer and Permissions Policy headers for security
- Update theme-color meta tags for dark mode support
- Update canonical URLs for improved SEO

Author: rhino-ty

client/index.html

@@ -43,13 +43,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link
-    rel="preload"
-    href="https://cdn.jsdelivr.net/gh/neodgm/[email protected]/neodgm_pro/neodgm_pro.woff2"
-    as="font"
-    type="font/woff2"
-    crossorigin="anonymous"
-  >
+  <link rel="preload" href="https://cdn.jsdelivr.net/gh/neodgm/[email protected]/neodgm_pro/neodgm_pro.woff2"
+    as="font" type="font/woff2" crossorigin="anonymous">
 
   <meta name="theme-color" content="#7A38FF"> <!-- 브라우저 테마 색상 (violet-500) -->
   <meta name="description" content="잘 그렸나? 망쳤나? 정체를 숨긴 방해꾼이 쏘아올린 혼돈 속에서, 그림꾼들의 진실을 찾아내는 구경꾼들의 훈수가 시작됩니다! 🎨🕵️‍♀️">
@@ -87,6 +82,8 @@
     content="잘 그렸나? 망쳤나? 정체를 숨긴 방해꾼이 쏘아올린 혼돈 속에서, 그림꾼들의 진실을 찾아내는 구경꾼들의 훈수가 시작됩니다! 🎨🕵️‍♀️">
   <meta property="twitter:image" content="https://kr.object.ncloudstorage.com/troublepainter-assets/logo/main-logo.png">
 
+  <!-- 기본 URL -->
+  <link rel="canonical" href="https://www.troublepainter.site" />
   <!-- 기본 파비콘 -->
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   <!-- iOS/Safari용 -->
@@ -100,6 +97,25 @@
   <!-- 웹 매니페스트 -->
   <link rel="manifest" href="/site.webmanifest">
 
+  <!-- 보안 관련 메타 태그 -->
+  <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
+  <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
+
+  <!-- DNS 프리페치 & 프리커넥트 - 성능 최적화 -->
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+  <link rel="preconnect" href="https://kr.object.ncloudstorage.com" crossorigin>
+  <link rel="dns-prefetch" href="https://kr.object.ncloudstorage.com">
+
+  <!-- theme-color - 모든 브라우저용 -->
+  <meta name="theme-color" content="#7A38FF" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#7A38FF" media="(prefers-color-scheme: dark)">
+
+  <!-- 검색 엔진 제어 관련 -->
+  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
+  <link rel="canonical" href="https://troublepainter.site">
+  <link rel="alternate" hreflang="ko" href="https://troublepainter.site">
+
   <title>방해꾼은 못말려 : 그림꾼들의 역습</title>
 </head>
 
@@ -109,4 +125,4 @@
   <script type="module" src="/src/main.tsx"></script>
 </body>
 
-</html>
+</html>