woolta

next js 웹 최적화 후기 (2. 구글 검색 엔진 적용 )

React | 2019-05-30

Next.js 를 사용하여 ssr기반의 블로그를 만든 이후 **검색엔진에 잘 노출되도록 ** google Search Console 에 연동하는 작업기 입니다..

검색엔진 노출 확인

우선 지금 현재 작업한 프로젝트가 구글 검색 엔진 에 얼마나 적용되었는지 확인을 해봐야 합니다. 구글에서는 site: 뒤에 검색할 도메인을 입력하면 해당 도메인이 검색엔진에 얼마나 적용되어있는지 확인 할 수 있습니다.

도메인 검색엔진 적용 확인

 site:https://xxx.xxxx.co.kr

검색엔진 노출 확인 결과

당연하겠지만.. 아직 개설된지 얼마 되지 않아 구글검색엔진이 크롤링 한게 없어 검색결과가 아에 없습니다. 물론 시간이 지나면 구글이 크롤링 할 수 있지만 좀더 효율적으로 크롤링 할수 있도록 해봅시다.

구글 검색엔진

구글 검색 엔진은 다음과 같은 3가지의 과정을 통해 웹페이지들에서 정보를 가져와 결과를 생성하게 됩니다..

크롤링
색인 생성
게재 (순위 지정)

우선 처음에는 웹에 어떤 페이지가 존재하는지 파악하지 위해 페이지를 크롤링 합니다. 이후 페이지가 발견되면 해당 페이지가 어떤페이지 인지 파악하는 작업을 거치는데 이 과정을 색인 생성 이라고 합니다. 이렇게 크롤링 되어 페이지 분석 과정인 색인 작업이 끝나면 사용자가 검색시 검색엔진이 색인된 페이지들을 프로그래매틱 방식 으로 우선순위를 부여해 사용자에게 노출(게재) 시켜주게 됩니다.

구글 검색 엔진 - 서치 콘솔

Google Search Console은 구글에서 검색에 대한 여러 관리 부분 및 모니터링을 무료로 제공하는 서비스 입니다. Google Search Console 를 사용하게 되면 사용자의 웹페이지가 검색엔진에서 어떻게 검색되고 있는지 몇개의 페이지가 검색페이지에 등록되어있는지 추가로 어떤 페이지를 크롤링 요청하는 등 여러 기능을 제공합니다.

Google Search Console 등록

Google Search Console 를 등록하기 위해선 우선 Google Search Console 에 웹사이트를 등록해주도록 합니다.

1. 속성 추가

우선 우측 상단의 속성버튼을 클릭하여 속성 추가 를 눌러 등록상태로 만들어 줍니다.

2. 속성 유형 선택 (도메인, 접두어 )

웹사이트를 등록하려면 다음과 같이 도메인으로 등록할지 URL 접두어 로 등록을 해야할지 정해야 합니다. URL 접두어 의 경우는 지정된 접두사가 정확히 존재하는 URL만 포함합니다 도메인 의 경우는 설정한 모든 하위 도메인 및 https or http 까지도 허용 해줍니다. 단 DNS 인증이 필요합니다.

http://example.com 등록시

도메인

http://example.com/posts/1 (o)
https://example.com/posts/1 (o)
http://ww.example.com/posts/1 (o)

URL 접두사

http://example.com/posts/1 (o)
https://example.com/posts/1 (x)
http://ww.example.com/posts/1 (x)

이번 사이트 등록의 경우 도메인 전체를 등록할 필요는 없어 URL 접두사로 등록하였습니다. 이부분은 자신의 프로젝트 성격에 따라 선택하면 됩니다.

3. 소유권 등록(URL 접두사)

URL 접두사 로 등록할 URL을 입력하게 되면 해당 웹 사이트의 소유자 임을 확인하기 위해 소유권 확인 을 진행해야 합니다.

소유권 인증

URL 접두사 인증이 완료되면 다음과 같은 소유권 확인 모달이 나타나게 됩니다.

인증 방법에는 여러가지가 존재하지만 빠른 처리를 위해 HTML 태그 삽입을 통해 소유권을 인증하도록 하겠습니다.

인증방법에 HTML 태그를 선택하게 되면 위 사진처럼 해당 소유키가 있는 메타태그를 주게 되는데 이를 프로젝트에 넣어주시면 됩니다. 해당 태그를 작성 후 배포한 다음 인증을 다시 하게 되면 태그를 분석하여 자동으로 인증되어 등록됩니다.

4. 등록완료

등록이 완료되었습니다.!

사이트맵 제출하기

사이트맵 : 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일입니다. 검색엔진은 이 파일을 읽고 사이트를 더 지능적으로 크롤링하게 됩니다.

이제 등록까지 성공하였으나 위에 사진처럼 검색된 페이지도 없고 실적도 적용 범위도 아무것도 없습니다. OTL.... 이제 사이트맵을 등록해서 검색엔진이 잘 크롤링 해 가서 색인을 하도록 등록해 주도록 합시다.

사이트맵 제작

사이트맵 제작 스펙은 여러가지이지만 이번 예제에서는 XML 기준으로 작업합니다. 참고로 사이트맵 한개에는 50MB(압축하지 않은 파일 기준)와 URL 50,000개로 제한됩니다 사이트맵 작성에 대한 자세한 추가 옵션은 sitemaps 을 참고하시면 됩니다.

사이트맵 작성 예제 코드

async function makePostsSiteMap() {
    // 게시글 정보들을 가져옵니다.
    const posts = await getAllPosts(); 

    // 해당 정보를 기준으로 사이트맵 형식으로 convert 해주도록 합니다.
    const newPostsSiteMap = await posts.data.data.map(post => makeSiteMapItemXml(
        ` ${API}/categories/${post.categoryNo}/posts/${post.postNo}`, POSTS_PRIORITY));


    // 최종적으로 xml 형식으로 wrap 시켜주도록 합니다.
    return wrapSiteMap(newPostsSiteMap);
};


function makeSiteMapItemXml(url, priority) {
    return `<url>
        <loc>${url}</loc> // 사이트맵 주소
        <lastmod>${NOW.toISOString()}</lastmod>
        <changefreq>weekly</changefreq>
        <priority>${priority}</priority>
    </url>`
}

function wrapSiteMap(body) {
    return `<?xml version="1.0" encoding="utf-8"?>
    <!--Generated by Screaming Frog SEO Spider 9.4-->
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${body}
    </urlset>`
}

 ///...server.js
 server.get('/site-map/posts.xml', (req, res)  => {
        makePostsSiteMap().then(postsXml => {
            res.set('Content-Type', 'text/xml');
            res.send(postsXml);
        });
    });

사이트맵 item xml 속성 설명

|속성종류|속성설명| |---|---| |loc|페이지의 url. 2048자 이내까지만 허용됩니다. 후행 슬래쉬로 끝나야 합니다.| |lastmod| 파일의 최종 수정 날짜. 형식은 W3C Datetime| |changefreq|얼마나 자주 페이지가 변경 될 것인지를 명시합니다.| |priority|해당 웹사이트에 우선순위로 유효한 값은 0.0 ~ 1.0 입니다.|