1. 구글 검색 엔진

1. 메타 태그 등록

   

   오른쪽 버튼인 URL 접두어로 등록하고 싶은 URL을 등록한다.

2. 메타 태그를 추가한다.

   

3. 프로젝트에 메타 태그 추가

   1. Next.js pages routing의 경우, _document.tsx에 해당 메타 태그를 추가한다.

      // pages/_document.tsx
      <meta
        name="google-site-verification"
        content={CONFIG.googleSearchConsole.config.siteVerification}
      />
      

   • Next.js app routing의 경우, layout.tsx > metadata에 추가하면 된다.

     • 공식문서

     // app/layout.tsx
     export const metadata: Metadata = {
       verification: {
         google: 'ydZVzq0xbjyB0kO5I4Rmi1U-fB60L0eThb2a4K62KCo',
         },
       },
     };
     

4. 추가 잘 되었는지 직접 체크하기

   

2. 네이버 검색 엔진

1. 우측 상단에 웹마스터 도구 클릭

2. 사이트 등록 > URL 입력

3. 아래에 있는 HTML 태그의 content 내용 복사

   

4. 프로젝트에 메타 태그 추가

   1. Page Routing

      // pages/_document.tsx
      <meta
        name="naver-site-verification"
        content={CONFIG.naverSearchAdvisor.config.siteVerification}
      />
      

   2. App Routing

      naver는 verification객체에 없으므로, other안에 직접 추가해줘야 한다.

      // app/layout.tsx
      export const metadata: Metadata = {
        verification: {
          other: {
            'naver-site-verification': '030114aa4592fdf3cee71d19dae3c4a36aa1bbe5',
          },
        },
      };
      

5. 추가 잘 되었는지 직접 체크하기

   

Tips

1. 메타 태그가 잘 삽입되어있는 지 확인하는 방법

   사실 메타 태그는 모두 개발자 모드에서 소스코드를 열어 확인이 가능하기에 환경 변수(.env)로 관리하여 숨기려 해도 숨길 수가 없다.

   

   개발자모드 > 요소를 눌러 확인이 가능하다.