SEO 기본설정 : 메타태그와 구글서치콘솔, 네이버에 등록하기

nextjs,tailwindcss,vercel

SEO 기본설정 : 메타태그와 구글서치콘솔, 네이버에 등록하기

주영 🐱 2024. 7. 12. 20:18

728x90

SEO - 검색 결과 상단에 뜨게 하기 위한 것

구글과 같은 검색엔진은 봇을 통해 사이트들을 크롤링하고 저장(인덱싱)하는데, 이때 봇들한테 이 사이트에 대한 정보를 잘 보여줘서 높은 순위에 차지하도록해야 한다.

슬프게도 정해진 공식은 없다. 이렇게 이렇게 하면 무조건 검색결과 첫번째로 뜬다. 이런게 있으면 너도나도 하기떄문에 공식이 될 수 없을것이다..

그냥 최대한 할 수 있는 요소들을 세팅하는 것으로 한다.

실제로 내가 사이트를 만들고 해보니 구글 검색 상단에 뜨게하는게 엄청 어렵다

그래도 기본적으로 세팅해야하는 것들이 있다.

nextjs app router 를 쓰고 있어서 이를 예시로 설명하겠다.

layout.tsx에서 구성한다.

[ 사이트 등록하기 ]

일단 가장 먼저 할 일은 구글 서치콘솔에 내 사이트를 등록하는 것이다.

검색엔진에서 site:{내 웹사이트 주소} 이렇게 검색했을 때 내 사이트가 뜬다하면 성공적으로 된 것이다.

여기에 내 도메인을 등록하면 구글에 내 사이트를 치면 나올 것이다.

https://search.google.com/search-console/welcome

내 url을 등록하고 다음을 복사해 내 코드에 붙인다. 그리고 Verfiy를 하면 끝!

한국어 사이트라면 네이버에도 등록해보자. 네이버 서치어드바이저에서 등록할 수 있다.

https://searchadvisor.naver.com/

[메타데이터 설정]

공식문서 ; https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Optimizing: Metadata | Next.js

Use the Metadata API to define metadata in any layout or page.

nextjs.org

1. 동적으로 설정

export async function generateMetadata(

{ params: { locale } }: { params: { locale: string } }

): Promise<Metadata> {

const t = await getTranslations({ locale, namespace: 'Metadata' });

return {

title: t('title'),

description: t('description'),

alternates: {

canonical: `https://turtleinvest.site/${locale}`,

languages: {

'en': 'https://turtleinvest.site/en',

'ko': 'https://turtleinvest.site/ko',

openGraph: {

title: t('title'),

description: t('description'),

url: `https://turtleinvest.site/${locale}`,

siteName: t('siteName'),

locale: locale,

type: 'website',

};

}

이렇게 하거나, 기존방식대로

<head>

설정이 가능하다.

opengraph 설정 - 링크 공유했을 때 미리보기로 보여지는 요소들!

https://www.opengraph.xyz/

현재 자신의 사이트를 진단할 수 있다.

여기서 확인하면 부족한 것을 자동으로 생성해주기때문에 편하다.

og:image는 내가 사이트를 메신저나 다른 곳에 공유했을때 미리보기로 보여지는 이미지이다.

설정하고 내 카톡으로 공유했을 때:

저작자표시 비영리 변경금지

'nextjs,tailwindcss,vercel' 카테고리의 다른 글

NEXTAUTH_SECRET 발급받는 법 (NextAuth) (0)	2024.07.16
[인증] 세션, 쿠키,jwt, 토큰 정리 (nextjs getSession, jwt) (0)	2024.07.15
[NextJS 빌드 에러] Error: `"` can be escaped with `"`, `“`, `"`, `” (0)	2024.06.10
[리액트, nextJS] state와 useSate 개념과 사용법 (0)	2024.06.08
리액트 key props (0)	2024.06.08

현재글SEO 기본설정 : 메타태그와 구글서치콘솔, 네이버에 등록하기

TIL

오픽IH, 오픽기출, 오픽모의고사, 안드로이드개발, 데이터시각화, 배당투자, 오픽 AL, 안드로이드앱개발, 1인개발, 오픽 모의테스트, 오픽AL, 1인개발자, 특수문자, 오픽1주, 티스토리챌린지, 오픽공부법, 오픽, 배당투자계산기, 딥러닝, 오블완,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

TIL