Next.js SEO 최적화 및 검색엔진에 노출시키기

프로젝트 진행 배경

 

아버지의 학원 이름이 1.6수학과학학원인데, 상표등록시에 숫자를 사용할 수 없어서 일점육수학과학학원으로 상표등록이 되어있습니다.

이를 해결하기 위해서 간단한 웹피이지를 만들어서 검색엔진에 노출시키는 프로젝트를 진행하게 되었습니다. (네이버 지도에서도 1.6수학과학이라고 치면 나오지 않습니다.)

 

프로젝트 목표

1.6수학과학학원, 일점육수학과학원으로 검색했을 때, 검색엔진이 찾을 수 있도록 하는것이 목표입니다. 이때 metadata중에서 keyword는 최근에 악용되는 사례가 많아서 지원하지 않는 엔진이 많다고 합니다.(ex구글) 따라서 시멘틱 태그 및 다른 메타태그를 적극적으로 사용하여 검색엔진에 노출되도록 하려고 합니다.

 

메타 데이터 작성

이 중에서 간단하게 metadata를 우선적으로 적용하였습니다.

 

export const metadata: Metadata = {
  title: '1.6 수학과학전문학원',
  description:
    '울산 남구 옥동 1.6 수학과학전문학원입니다. 공식상호는 일점육수학과학전문학원이라 네이버지도에서는 해당 이름으로 검색해야 합니다.',
  openGraph: {
    title: '1.6 수학과학전문학원',
    description:
      '울산 남구 옥동 1.6수학과학전문학원(일점육수학과학전문학원)입니다.',
    images:
      'https://github.com/suhong99/1.6math/assets/120103909/205269b2-3969-4afd-8477-686a46aa76c8',
    locale: 'ko_KR',
    url: 'https://1-6math.vercel.app/',
    type: 'website',
    siteName: '1.6 수학과학전문학원',
  },
};

 

간단하게 학원 주소와 연락처만 노출시키는 사이트이기에 최적화할 부분이 적었고 lighthouse가 만점을 줘버렸습니다.

(동적인 요소가 적기 때문에,,)

 

 

하지만 문제점이 있습니다.

 

 구글과 네이버에서 검색해도 해당 사이트가 검색되지 않고 있습니다

 

 

검색엔진에 노출시키기

Robot.txt 작성

1번은 github 에 있는 asset이미지를 사용해서 그렇기에 해당 이미지를 cloudinary에 배포를 하면 해결할 수 있습니다.

2번에 대해서 알아보기 위해서, 아래 블로그 글을 참고하게 되었습니다.

 

https://velog.io/@rageboom/SEO-%EC%A0%81%EC%9A%A9

[SEO] 적용

해당 링크를 통해서

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

Google Search Console

https://searchadvisor.naver.com/

네이버 서치어드바이저

 

에서 각각 검색엔진 진단을 할 수 있다는 점을 알게 되었습니다.

제 경우에는 robots.txt 파일이 존재하지 않았습니다. 이를 아래와 같이 작성하였고, 다시 진단해보니

 

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
  };
}

 

 

하지만 여전히 검색엔진에 노출되지 않았습니다

 

위 사이트를 보면 알 수 있듯이. robos.txt가 있으면 SEO 최적화에 도움되지만 검색엔진 노출에 필수적인 요소는 아님은 알 수 있습니다.

 

sitemap.xml 작성

그리고 페이지가 여러 장인 경우에는 sitemap을 작성하면, 검색엔진이 각 사이트의 우선순위를 파악하는데 도움이 된다고 합니다. 비록 한 페이지지만 sitemap도 같이 작성했습니다.

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Metadata Files: sitemap.xml | Next.js

공식문서를 참고하였습니다

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://1-6math.vercel.app/',
      lastModified: new Date(),
      priority: 1,
    },
  ];
}

 

사이트 소유 확인

각각의 검색사이트에서는 site:사이트URL 을 통해서 노출여부를 확인할 수 있습니다.

이때 구글 콘솔에서 확인해 보니 검색엔진에 등록하는 작업이 필요했습니다.

 

 

네이버의 경우에는 웹마스터 도구를 이용해서 해당 url을 등록하면 관련 Html파일을 제공해주고, 구글은 도메인 및 URL 접두어를 이용하여 소유확인이 가능합니다.

이때 vercel 무료 배포의 경우네는 custom domain이 아니기에 URL접두어 방식을 이용해야 합니다.

관련 html 파일은 public 경로에 등록하게 되면 수집 요청을 할 수 있습니다

구글

 

네이버

 

각각의 검색엔진 모두 수집요청을 해야지 노출이 되는데,, 며칠 걸린다는 내용들에 기다리다가(기다릴겸 자격증 공부)하다가 오래 걸렸습니다.

 

설명글이 좀 .. 어색해서 수정해서 다시 요청중입니다... 

하지만 학부모님이 해당 사이트를 봤을 때, 검색 순위가 높지도 않고 , 내용이 부실해서 진짜 사이트가 맞는지 오해할 수 있다고 생각했습니다.

이를 해결하기 위해서 schema.org를 사용해보려고 합니다.

관련 결과는 노출 완료시 다시 포스팅하겠습니다.  schema를 잘 적용하면 아래와 같이 사이트를 좀 더 그럴듯하게 보이게 할 수 잇습니다.