Merge pull request #59 from dnd-side-project/seo

dnd-side-project · Sep 13, 2023 · 0803074 · 0803074
2 parents bcf6d4c + 16b5869
commit 0803074
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 40 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "PosePicker",
   "short_name": "포즈피커",
-  "theme_color": "#1976d2",
+  "theme_color": "#734CEB",
   "background_color": "#fafafa",
   "display": "standalone",
   "scope": "/",
@@ -10,56 +10,48 @@
     {
       "src": "/pwa-icons/icon-48x48.png",
       "sizes": "48x48",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-72x72.png",
       "sizes": "72x72",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-96x96.png",
       "sizes": "96x96",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-128x128.png",
       "sizes": "128x128",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-144x144.png",
       "sizes": "144x144",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-152x152.png",
       "sizes": "152x152",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-192x192.png",
       "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-384x384.png",
       "sizes": "384x384",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "type": "image/png"
     },
     {
       "src": "/pwa-icons/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any maskable"
     }
   ]
 }
diff --git a/public/meta/apple_touch_icon.png b/public/meta/apple_touch_icon.png
diff --git a/src/app/favicon.ico → public/meta/favicon.ico b/src/app/favicon.ico → public/meta/favicon.ico
diff --git a/public/meta/og_detail.png b/public/meta/og_detail.png
diff --git a/public/meta/og_kakao.png b/public/meta/og_kakao.png
diff --git a/public/meta/og_main.png b/public/meta/og_main.png
diff --git a/src/app/(Main)/feed/page.tsx b/src/app/(Main)/feed/page.tsx
@@ -5,10 +5,11 @@ import FeedSection from './FeedSection';
 import { RejectedFallback } from '@/components/ErrorBoundary';
 import { Loading } from '@/components/Loading';
 import { PageAnimation } from '@/components/PageAnimation';
+import { META_STRING } from '@/constants/meta';
 
 export const metadata: Metadata = {
   title: '포즈피드',
-  description: '포즈피드에서 조건에 맞는 포즈를 찾고, 친구한테 공유해보세요',
+  description: META_STRING.description.feed,
 };
 
 export default function Feed() {

diff --git a/src/app/(Main)/pick/page.tsx b/src/app/(Main)/pick/page.tsx
@@ -1,10 +1,11 @@
 import { Metadata } from 'next';
 
 import PickSection from './components/PickSection';
+import { META_STRING } from '@/constants/meta';
 
 export const metadata: Metadata = {
   title: '포즈픽',
-  description: '시간 없을 땐 포즈픽으로 빠르게 랜덤 포즈를 추천받아보세요.',
+  description: META_STRING.description.pick,
 };
 
 export default function Pick() {

diff --git a/src/app/(Main)/talk/page.tsx b/src/app/(Main)/talk/page.tsx
@@ -4,10 +4,11 @@ import TalkSection from './components/TalkSection';
 import TitleSection from './components/TitleSection';
 import { PageAnimation } from '@/components/PageAnimation';
 import { Spacing } from '@/components/Spacing';
+import { META_STRING } from '@/constants/meta';
 
 export const metadata: Metadata = {
   title: '포즈톡',
-  description: '포즈톡에서 뽑은 랜덤 제시어로 나만의 개성있는 포즈를 완성해보세요.',
+  description: META_STRING.description.talk,
 };
 
 export default function Talk() {

diff --git a/src/app/(Sub)/detail/[id]/page.tsx b/src/app/(Sub)/detail/[id]/page.tsx
@@ -25,6 +25,7 @@ export async function generateMetadata(
     openGraph: {
       title: defaultOgTitle,
       description: '이 포즈는 어때요?',
+      images: ['/meta/og_detail.png'],
     },
   };
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,33 +11,30 @@ import QueryProvider from '@/provider/QueryProvider';
 import RecoilContextProvider from '@/provider/RecoilContextProvider';
 
 import type { Metadata } from 'next';
-
-const META_TITLE = 'PosePicker';
-const META_DESCRIPTION = '다음 포즈 뭐하지? 포즈피커가 포즈고민을 해결해 드릴게요!';
-const META_OG_IMAGE = '/images/main_star.png';
+import { META_STRING } from '@/constants/meta';
 
 export const metadata: Metadata = {
   metadataBase: new URL(BASE_SITE_URL),
   title: {
-    default: `${META_TITLE} - 포즈피커`,
-    template: `${META_TITLE} | %s`,
+    default: `${META_STRING.title}`,
+    template: `${META_STRING.title} | %s`,
   },
-  description: META_DESCRIPTION,
+  description: META_STRING.description.main,
   verification: {
     google: 'MB7qV_Oa4G4gR0jHgjtnE6S4g4blocE2mjo7z-z2f6Q',
   },
   other: {
     'naver-site-verification': '65f3aba9349cce28018ac7a97d4f87ff00709aa3',
   },
   openGraph: {
-    title: META_TITLE,
-    description: META_DESCRIPTION,
-    images: [META_OG_IMAGE],
+    title: META_STRING.title,
+    description: META_STRING.description.sub,
+    images: [META_STRING.image.og],
   },
   twitter: {
-    title: META_TITLE,
-    description: META_DESCRIPTION,
-    images: [META_OG_IMAGE],
+    title: META_STRING.title,
+    description: META_STRING.description.sub,
+    images: [META_STRING.image.detail],
   },
   viewport: {
     width: 'device-width',
@@ -46,7 +43,12 @@ export const metadata: Metadata = {
     userScalable: false,
   },
   icons: {
-    icon: './favicon.ico',
+    icon: META_STRING.favicon,
+    apple: META_STRING.appleIcon,
+    other: {
+      rel: 'apple-touch-icon-precomposed',
+      url: META_STRING.appleIcon,
+    },
   },
   manifest: '/manifest.json',
   themeColor: '#ffffff',

diff --git a/src/constants/meta.ts b/src/constants/meta.ts
@@ -0,0 +1,17 @@
+export const META_STRING = {
+  title: 'PosePicker',
+  description: {
+    main: '포토부스에서 고민하는 당신을 위한 포즈 추천 서비스',
+    sub: '포즈가 고민될 땐? 포즈피커!',
+    pick: '시간 없을 땐 포즈픽으로 빠르게 랜덤 포즈를 추천받아보세요.',
+    talk: '포즈톡에서 뽑은 랜덤 제시어로 나만의 개성있는 포즈를 완성해보세요.',
+    feed: '포즈피드에서 조건에 맞는 포즈를 찾고, 친구한테 공유해보세요',
+  },
+  image: {
+    og: '/meta/og_main.png',
+    detail: '/meta/og_detail.png',
+    kakao_share: '/meta/og_kakao.png',
+  },
+  favicon: '/meta/favicon.ico',
+  appleIcon: '/meta/apple_touch_icon.png',
+};
diff --git a/src/hooks/useKakaoShare.ts b/src/hooks/useKakaoShare.ts
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 
 import { KAKAO_KEY } from '@/constants';
+import { META_STRING } from '@/constants/meta';
 
 export default function useKakaoShare() {
   useEffect(() => {
@@ -23,18 +24,17 @@ export default function useKakaoShare() {
       kakao.Link.sendDefault({
         objectType: 'feed',
         content: {
-          title: 'PosePicker',
-          description: '포토부스에서 고민하는 당신을 위한 포즈 추천',
-          imageUrl:
-            'https://github.com/gloddy-dev/gloddy-client/assets/62178788/a145c7ca-b487-4b2a-9913-cc1589e44f91',
+          title: META_STRING.title,
+          description: META_STRING.description.main,
+          imageUrl: META_STRING.image.kakao_share,
           link: {
             mobileWebUrl: uri,
             webUrl: uri,
           },
         },
         buttons: [
           {
-            title: '포즈를 뽑아봐 !',
+            title: META_STRING.description.sub,
             link: {
               mobileWebUrl: uri,
               webUrl: uri,