setting : SEO 를 위한 세팅 #215
Conversation
yunchaeney
requested review from
BeMatthewsong,
HMRyu and
hakyoung12
as code owners
| import { gatheringMetadata } from '@/utils/makeMetadata'; | ||
|
|
||
| export const generateMetadata = async ({ | ||
| params, | ||
| }: { | ||
| params: { | ||
| id: number; | ||
| }; | ||
| }) => { | ||
| return await gatheringMetadata(params.id); | ||
| }; |
There was a problem hiding this comment.
generateMetadata 는 동적으로 메타데이터를 생성하는 함수로,
동적라우팅 시 파라미터 값을 받아 메타데이터 생성에 적용할 수 있습니다.
There was a problem hiding this comment.
P4) (그냥 질문) 혹시 dynamic routes 가 적용된 페이지는 이런 식으로 페이지 내부에 직접 함수를 적용해줘야 하는 걸까요??
There was a problem hiding this comment.
dynamic routes 역시 기본적으로 layout 이나 page 파일에서 정적 메타데이터로 내보내기 할 수 있습니다.
다만 dynamic routes 의 세그먼트나 다른 파라미터 등을 이용해서 메타데이터를 동적으로 생성하고 싶을 때 generateMetadata 함수를 사용합니다. (dynamic routes가 아니어도 사용 가능)
즉 정적 생성, 동적 생성은 모든 라우트 종류에 가능하며 필수 요소가 아닙니다!
src/app/(main)/saved/layout.tsx
Outdated
There was a problem hiding this comment.
메타데이터는 client 컴포넌트에서 선언할 수 없기 때문에, saved 페이지는 layout 파일을 따로 만들었습니다.
src/app/sitemap.ts
Outdated
There was a problem hiding this comment.
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap
사이트맵은 xml로 작성되어야 하나, 넥스트에서는 app/sitemap.ts 파일로 프로그래밍식으로 생성할 수 있습니다.
이는 빌드 시 정적폴더에 xml 파일로 생성됩니다. (배포 후, https://soothe-with-me.vercel.app/sitemap.xml 경로를 입력하면 확인 가능)
src/utils/makeMetadata.ts
Outdated
There was a problem hiding this comment.
페이지명을 파라미터로 받아 메타데이터를 리턴하는 유틸 함수
| export const gatheringMetadata = async (id: number) => { | ||
| const gatheringInfo: GatheringInfoType = await getGatheringInfo(id); | ||
|
|
||
| const name = gatheringInfo.name || ''; | ||
| const type = gatheringInfo.type; | ||
| const img = gatheringInfo.image; | ||
|
|
||
| return { | ||
| title: name, | ||
| description: `${type} : ${name}`, | ||
| openGraph: { | ||
| title: name, | ||
| description: `${type} : ${name}`, | ||
| url: `${BASE_URL}/gatherings/${id}`, | ||
| images: [ | ||
| { | ||
| url: img || '/images/login-img.svg', | ||
| width: 800, | ||
| height: 600, | ||
| alt: `${name} 모임 이미지`, | ||
| }, | ||
| ], | ||
| }, | ||
| twitter: { | ||
| title: name, | ||
| description: `${type} : ${name}`, | ||
| url: `${BASE_URL}/gatherings/${id}`, | ||
| images: [ | ||
| { | ||
| url: img || '/images/login-img.svg', | ||
| width: 800, | ||
| height: 600, | ||
| alt: `${name} 모임 이미지`, | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
| }; |
| import { gatheringMetadata } from '@/utils/makeMetadata'; | ||
|
|
||
| export const generateMetadata = async ({ | ||
| params, | ||
| }: { | ||
| params: { | ||
| id: number; | ||
| }; | ||
| }) => { | ||
| return await gatheringMetadata(params.id); | ||
| }; |
There was a problem hiding this comment.
P4) (그냥 질문) 혹시 dynamic routes 가 적용된 페이지는 이런 식으로 페이지 내부에 직접 함수를 적용해줘야 하는 걸까요??
There was a problem hiding this comment.
메타데이터를 이렇게 관리할 수 있다는 걸 처음 알았네요...!
많이 배워갑니다!
yunchaeney
deleted the
feat/chaeney/KAN-135-search-engine-optimization
branch
✏️ 작업 내용
📷 스크린샷
페이지별 title
링크 공유 시, 모임 상세 페이지만 모임의 이름 및 사진이 나오고, 다른 페이지는 기본 이미지와 이름이 나옵니다.
(공유 url은 테스트를 위해 개인 비공개 레포에서 배포 후 테스트 한 상태라 가렸습니다!)
✍️ 사용법
🎸 기타
@BeMatthewsong
.env 파일이 업데이트 되었으니, 배포 환경에 해당 환경변수를 설정 부탁드려요.
구글 서치 엔진에 등록하기 위해, 해당 PR이 배포 후 메타태그를 인증 받아야 합니다. 배포 이후에 다시 해볼게요!
브랜치명이 setting 이 맞는 것 같은데 아무 생각 없이 feat 으로 했어여..
SEO 최적화의 방법적인 내용은 Setting: SEO 세팅 #216 에서 확인하실 수 있습니다!