페이지 성능 개선 후기 ( 4 )

issol·2022년 12월 9일

Lighthouse

목록 보기

4/4

드디어 마지막 챕터, SEO 관련이다.

SEO

SEO는 과연 무엇일까?

SEO는 검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하는 과정입니다.또한 웹 페이지가 검색 결과 페이지에서 잘 노출 되도록 페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 방법론으로도 정의할 수 있습니다.

SEO는 왜 중요할까?

SEO는 고객이 원하는 순간에 고객의 질문에 적합한 콘텐츠를 제공해 주는 작업입니다.이를 단순히 검색 결과 페이지 상단에 웹사이트를 노출 시키는 테크닉으로 간과해서는 안됩니다.SEO는 마케터에게 매우 중요한 전략적 의미를 갖고 있습니다.고객 의도에 적합한 콘텐츠를 고객이 원할 때 즉각 제공하는 과정에서 전체 마케팅 활동을 고객 중심 관점으로 변화 시킬 수 있기 때문입니다.

SEO의 동작원리

검색엔진의 3단계 프로세스
1. 크롤링(Crawling): 웹 크롤러가 웹페이지의 콘텐츠를 복사하여 검색엔진으로 가져옵니다.
2. 인덱싱(Indexing): 가져온 콘텐츠를 주제별로 색인하여 보관합니다.
3. 랭킹(Ranking): 검색 의도에 맞춰 색인된 콘텐츠에 순위를 부여한 후 결과로 제공합니다.

노출 순위 높이기

웹 사이트의 크롤링과 색인 상태 개선하기
검색엔진 친화적 사이트로 개선하기
양질의 콘텐츠 구축하기
검색결과 노출 순위 높이기

프론트에서 그럼 뭘 했을까?

사실 크게 작업한 부분이 많이 없었다. 마케팅측에서의 요구사항이 적기도 했고, 요구사항 자체도 양이 적고 단순한 작업들 뿐이었다.

메타 태그 심기

title, description, open graph ( url, title, description, site_name, locale, type )
open graph는 링크 미리보기라고 생각하시면 됩니다.
next-seo 사용

    <NextSeo
      title={title}
      description={description}
      openGraph={{
        url: ogUrl,
        title: ogTitle,
        description: ogDescription,
        site_name: ogSitemapName,
        locale: ogLocale,
        type: ogType,
      }}
      languageAlternates={[
        {
          hrefLang: 'x-default',
          href: hrefLang,
        },
        {
          hrefLang: 'en-us',
          href: hrefLang,
        },
      ]}
    />

Json mark up 추가
- 웹에서 찾은 구조화된 데이터를 사용하여 페이지의 콘텐츠를 파악할 뿐 아니라 웹 및 전반적인 세상에 관한 정보를 수집합니다. 작성해서 넣어두면 다음과 비슷한 결과물을 확인할 수 있다고 합니다.
```
<script async type="application/ld+json">
      {`{
      "@context": "https://schema.org/",
      "@type": "WebSite",
      "name": "Your name",
      "url": "Your Domain"
     }`}
</script>
```
img 태그에 alt 속성 추가
html 태그에 lang 속성 언어 스위치마다 바꿔주기
- 영어, 한국어 스위치가 가능한 플랫폼이라 html의 언어도 같이 바뀌게 설정했습니다.
```
    useEffect(() => {
        document
          .querySelector('html')
          .setAttribute('lang', (query.lang as string) ?? 'en')
      }, [query.lang])
```
a 태그에 rel 속성 추가
- 현재 문서와 링크된 문서 사이의 연관 관계(relationship)를 명시합니다. 여러 검색 엔진들은 링크에 대한 더 많은 정보를 수집하기 위해 이 속성을 사용할 수 있습니다.
- href가 명시 되어 있어야 합니다.
```
<a    
href="Your Domain"
target="_blank"
rel="noopener noreferrer"
>
```
sitemap.xml 추가
- 웹사이트 내 모든 페이지의 목록을 나열한 파일로 책의 목차와 같은 역할을 합니다. 사이트맵을 제출하면 일반적인 크롤링 과정에서 쉽게 발견되지 않는 웹페이지도 문제없이 크롤링되고 색인될 수 있게 해줍니다.
robots.txt 추가
- robots.txt 는 웹사이트에 대한 검색엔진 로봇들의 접근을 조절해주고 제어해주는 역할, 그리고 로봇들에게 웹사이트의 사이트맵이 어디 있는지 알려주는 역할을 합니다. 주의하실 점은 여기서 말하는 사이트 맵은 수집 로봇을 위한 XML 사이트 맵을 말하며, 웹사이트의 메뉴 전체를 보여주는 사이트 맵을 의마하는 것은 아닙니다.
h1 태그는 페이지 내에서 하나만 사용
- H1태그는 가장 큰 제목(대주제)이기 때문에 반드시 설정을 해주어야 합니다.
- 가장 큰 제목이기 때문에 2개로 중복이 된다면 검색엔진, 사용자가 페이지 내 정보를 이해하기 어려운 구조가 됩니다.

이렇게 작업을 마치고 과연 몇점이나 올랐을까?? 좀 두근두근 했었다.

확연히 점수차가 나는 것을 확인할 수 있다. 개선 전 점수는 위에서부터
[56, 76, 75, 91], [57, 82, 83, 91] 이었으니 성능 부분은 대략 35점 이상 차이가 난다!

물론 점수가 많이 올라서 기분은 좋았지만, 끝끝내 올리지 못한 점수들이 좀 있어서 아쉬움이 남는 과정이었다. 진행하다보니 모바일도 점수가 계산이 되는데 모바일은 유독 점수가 너무 안올라서 실망했었는데, 그게 당연하다는 글을 읽고 조금 마음이 놓였다.

모바일 및 데스크톱 결과의 다른 점수

PageSpeed Insights를 통해 페이지의 URL을 실행하면, 데스크톱 및 모바일에 대한 별도의 탭이 표시됩니다. 사이트 성능 및 최종 사용자 경험은 사이트를 조회한 기기에 따라 다를 수 있으므로 이러한 보고서는 분할됩니다.
데스크톱 및 모바일에 대한 다른 점수는 정상입니다. 모바일 결과가 데스크톱보다 낮은 데 기여하는 몇 가지 요소가 있습니다.

모바일 기기는 일반적으로 데스크톱보다 프로세서가 느립니다.

모바일 기기는 뷰포트에 맞게 이미지 및 사이트 요소 크기를 조정해야 합니다.

PageSpeed Insights는 Moto G4 기기에서 시뮬레이션된 3G 연결을 사용해 모바일 상의 사이트 로딩 시간을 표시합니다.

사용자가 느끼는 좋은 페이지다와 개발자가 느끼는 좋은 페이지다가 다르다고 생각합니다. 그래서 구글에서 제공하는 점수는 개발함에 있어서 “잘 만드는” 최소한의 기준이라고 생각하고 이를 좋은 페이지의 척도로 잡으려고 하진 않았습니다. 내가 잘 만드냐보단 사용자가 어떻게 쓰냐가 중요하니까요.

issol

프론트 엔드 개발자

이전 포스트