Coding/etc

프론트엔드 핵심 SEO 검색엔진최적화의 기본

_밍지_ 2024. 11. 21. 14:56
728x90
SMALL

SEO의 기본

SEO(검색엔진 최적화, Search Engine Optimization)는 많은 사용자들이 구글, 네이버와 같은 검색엔진으로 웹사이트를 검색했을 때 그 결과를 페이지 상단에 노출시켜 많은 사람들이 볼 수 있도록 최적화하는 방법입니다. 앱의 배포가 완료된 이후에 SEO 관리를 하며 지속적으로 많은 사용자의 유입을 추구해야 합니다. 지금부터 간단하게 SEO 하는 방법을 알아보겠습니다.

1. 캐노니컬 태그 설정

캐노니컬 태그는 한 페이지를 가리키는여러 개의 주소가 존재할 때, 검색 엔진의 로봇이 어떤 주소가 원본인지 알 수 있도록 하기 위해 사용하는 태그이다.

당신이 검색엔진의 로봇이라고 생각해보자. 수집한 주소 중 몇 개의 주소가 같은 페이지를 가리키고 있다. 그렇다면 다음 중 어떤 주소가 페이지를 가리키는 가장 좋은 주소일까?

https://www.example.com/index.html
https://example.com/index.html?page=1
http:m.example.com/index.html

이는 검색엔진이 직면한 주요 문제 중 하나로, 이 문제를 해결하기 위한 방법으로는 크게 두 가지가 있다. 첫째는 검색엔진이 스스로 어떤 URL이 표준(canonical) URL인지 판단하도록 하는 방법, 둘째는 페이지에 어떤 URL이 표준인지 표기하는 방법이다.

구글이나 야후는 이 문제를 해결하기 위해 첫 번째 방식과 두 번째 방식을 모두 사용한다.

그러나 첫 번째 방식은 검색엔진이 임의로 표준 URL을 설정하게 되기 때문에 페이지의 소유주가 의도한 주소가 표준 URL이 되지 않을 가능성이 있다. 그렇기 때문에 구글, 야후 등의 메인 검색 엔진은 페이지 소유주가 원하는 URL을 표준 URL로 설정할 수 있도록 캐노니컬 태그를 HTML 문서 head에 추가하는 방식을 제공한다.

1-1. 캐노니컬 태그의 구현

캐노니컬 태그는 크게 html 문서 상에 명시하는 방법과 http 응답 헤더에 명시하는 두 가지 방법으로 구현할 수 있다. html 문서 상에 명시하는 경우 '캐노니컬 링크 엘레먼트(canonical link element)'라 하는 일종의 시맨틱 태그를 사용한다. link 태그에 rel 프로퍼티 값을 'canonical'로, href 프로퍼티 값에 표준 URL을 명시하여 사용한다. 일반적으로 html 문서의 head에 작성한다.

<!DOCTYPE html>
<html>
<head>
    <link rel="canonical" href="https://example.com/page.php/">
</head>
<body>
    ...
</body>
</html>

모든 인터넷 상의 문서가 html로 작성되어 있지는 않다. PDF와 같은 다른 파일 형식의 경우 캐노니컬 태그를 사용할 수 없다. 이러한 경우에는 http 응답 헤더에 명시하는 방법을 사용한다.

HTTP/1.1 200 OK
Content-Type: application/pdf
link: ; rel="cannonical"
Content-Length: 4223
...

응답 헤더의 link 필드에 브라켓 스타일의 표현식을 사용하여 표준 URL을 명시하고, 세미콜론으로 구분한 뒤 rel 프로퍼티의 값을 canonical로 설정한다.

1-2. SEO를 위한 캐노니컬 태그 사용하기

구글봇은 비슷한 페이지를 가리키는 URL을 여러 개 발견하면 가장 적절하다고 생각하는 페이지의 URL을 표준으로 설정한다. 이것이 위에서 설명한 첫 번째 방식이다. 어떤 페이지가 표준 URL로 지정되면, 구글봇은 해당 표준 페이지를 가장 자주 크롤링하며, 중복된 페이지는 검색엔진의 자원을 절약하기 위해 표준 페이지보다 훨씬 적게 크롤링한다.

캐노니컬 태그를 사용해 표준 URL을 설정하면 같은 페이지를 가리키는 다른 URL들을 하나의 표준 URL로 이동시켜주기 때문에 SEO에서 이점을 가져갈 수 있다. 검색엔진은 설정된 표준 URL을 통해 어떤 페이지가 표준인지 확인할 수 있고, 해당 페이지의 URL을 표준 URL로 설정한 다른 페이지들의 수를 파악할 수 있다.

SEO에 관련된 질문을 보면 '페이지 주소가 https://example.com/index.php로 확실함에도 캐노니컬 태그를 설정해주어야 하는지'가 자주 올라온다. 구글에 의하면, 이러한 경우에도 캐노니컬 태그를 사용하는 것이 좋다. 대부분의 사이트가 URL에 쿼리를 통해 parameter 전달을 허용하는데, 이 경우 쿼리가 있는 URL과 없는 URL이 서로 다른 URL로 취급되기 때문이다.

이러한 SEO에서의 이점을 챙기기 위해서는 캐노니컬 태그 외에 '301 redirection'이나 '사이트맵' 등의 기능을 활요하는 방안도 있다. 하지만 해당 방안들은 캐노니컬 태그를 사용하는 경우와 다르다.

더보기

301 Redirection과의 차이점

캐노니컬 태그는 완전한 동일한 페이지를 가리키는 다른 URL, 혹은 비슷한 내용을 가지는 페이지의 URL 문서를 하나의 표준으로 가리키는 방법이다. 반면 '301 Redirection'은 해당 페이지를 더 사용하지 않고 다른 페이지로 사용자를 이동시킬 때 사용한다. 301 Redirection을 설정하면 해당 페이지가 새 주소로 영구히 이전되었다는 의미이다. 따라서 페이지를 실제로 사용한다면 캐노니컬 태그를 사용해야 SEO 관리에 유용하다.

1-3. 올바르게 케노니컬 태그 사용하기

1-3-1) 상대경로가 아닌 절대경로로!

구글 가이드를 보면 rel="canonical" 태그에 '/dresses/green/greendress,html' 같은 상대 경로가 아닌, 'https://example.com/dressed/green/greendress,html'과 같은 절대 경로를 권장한다. 문서 내에 'base' 경로가 지정되어 있다면 상대 경로를 사용하여도 문제가 없지만, 대부분의 경우 base 경로를 설정하지 않거나 설정하는 것을 잊기 때문에 절대 경로로 설정해 두는 것을 권장한다.

1-3-2) 중복 캐노니컬 태그를 적용하지 않기

검색 로봇의 구현에 따라 조금씩 다르지만, 구글은 캐노니컬 태그 여러 개가 중복 등록되어 있는 경우 해당 태그들을 전부 무시한다. 따라서 캐노니컬 태그가 두 개 이상 등록되지 않도록 주의하여야 한다.

1-3-3) 순환 참조가 생기지 않게 하기

페이지 A가 캐노니컬 태그를 이용해 페이지 B를 표준 URL로 지정하고, 페이지 B가 캐노니컬 태그를 이용해 페이지 A를 표준 URL로 지정하는 경우 무한 순환이 발생할 수 있다. 무한 순환이 발생하는 경우, 의도한 표준 URL이 무엇인지 파악할 수 없으므로 A와 B의 캐노니컬 태그는 모두 무시되고 다른 요인들에 의해 표준 URL이 결정된다.

 

2. 태그와 메타 설정

이미지(img) 태그에 alt, head에 메타데이터는 필수, title도 페이지마다 달라야 하며 link에 alt도 붙여야 합니다.
최고의 웹페이지라고 칭송받는 애플은 이렇게 하고 있습니다. 메타데이터가 아름답게 되어 있는 것을 볼 수 있죠?
 
 

아래와 같이 메타박스를 잘 설정해줍니다.

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />

<meta property="og:title" content="아트리" />
<meta property="og:url" content="https://www.artri.co.kr/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="아트리" />
<meta property="og:title" content="아트리, 예술 같은 일상의 순간" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

2-1. 메타데이터란 무엇인가?

메타데이터는 웹페이지에 대한 정보나 설명을 제공하는 데이터이다.

즉, 메타데이터는 데이터에 관한 데이터라고 할 수 있다.

2-2. 메타데이터의 역할

웹 사이트의 마케터, 기획자, 개발자가 메타데이터를 이해하고 활용하는 것은 중요한 일인데, 메타데이터가 검색 엔진 최적화(SEO), 소셜 미디어 공유, 웹사이트의 접근성 등에 영향을 주기 때문이다.

  • SEO(Search Engine Optimization): 검색 엔진이 웹사이트를 더 잘 이해하고 인덱싱할 수 있도록 정보를 제공한다.
  • 소셜 미디어 공유: Open Graph 태그는 소셜 미디어에서 공유될 때 웹페이지의 미리보기를 제어하여 더 매력적인 콘텐츠로 보이게 한다.
  • 웹사이트 접근성: 메타데이터는 웹사이트가 다양한 디바이스와 브라우저에서 올바르게 표시되도록 도와준다.

2-3. 메타데이터의 종류

애플 사이트를 통해 메타데이터의 종류에 대해 알아보자.

2-3-1) HTML 메타 태그

웹페이지의 <head> 섹션에 위치하며, 검색 엔진과 브라우저에게 웹페이지에 대한 정보를 제공한다.

위와 같은 메타태그를 통해, 구글에 애플을 검색하면

이렇게 나온다.

2-3-2) Open Graph 메타 태그

카카오톡으로 친구에게 맛집 링크를 공유했을 때, 링크의 미리보기 화면에 음식의 이미지와 설명이 나타난 적이 있는가?

미리보기 화면을 통해 우리는 이미지와 글의 일부를 볼 수 있고, 클릭하기 전에 무슨 콘텐츠일지 예측할 수 있다.

미리보기가 나오지 않고, 텍스트 URL만 나오면 섭섭할지도...?

위와 같은 메타태그를 통해, SNS에 애플스토어 링크를 공유하면 아래와 같이 나온다.

카카오톡 링크 공유

카카오톡의 미리보기 화면에서 보이는 것처럼, 소셜 미디어에서 웹페이지가 어떻게 보이는지 제어한다.

Facebook에서 개발했지만 현재는 많은 소셜 미디어 플랫폼에서 사용된다.

2-4. 실제 웹사이트의 메타데이터를 확인하는 방법

2-4-1) 페이지 소스 보기

웹사이트를 브라우저에서 열고 마우스 오른쪽 버튼을 클릭한 후 "검사"를 선택한다.

<head> 섹션에서 태그를 찾을 수 있다.

2-4-2) 개발자 도구 사용

Chrom, Firefox와 같은 브라우저에서 Ctrl+Shift+I(Windows) 또는 Cmd+Option+I(Mac)을 눌러 개발자 도구를 연다.

"Elements"탭에서 <head> 섹션을 찾아보면 메타 태그를 확인할 수 있다.

2-4-3) 분석 사이트로 확인하는 방법

OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph 같은 사이트에서 URL을 입력하면, 웹사이트의 메타데이터를 분석하고 여러 SNS에서 각각 어떻게 보이는지 미리 볼 수 있다.

예) 애플의 아이폰16 프로 URL(https://www.apple.com/kr/shop/buy-iphone/iphone-16-pro)을 입력하면, FACEBOOK, X(FORMERLY TWITTER), LINKEDIN, DISCORD의 미리보기 화면에서 어떻게 나오는지 확인할 수 있다.

위에서는 메타데이터가 무엇인지 일부만 예시를 들어 설명했지만, 메타데이터의 세계는 이보다 훨씬 넓고 다양하다.

웹페이지의 제목을 지정하는 title 태그, 소셜 미디어에서 공유될 때 표시되는 이미지를 지정하는 image 태그 등 여러가지 데이터가 있다.

또, 일반 메타데이터와 Open Graph 메타 태그 외에도 X(Twitter)를 비롯한 다양한 소셜 미디어에 특화된 메타 태그가 존재한다.

예를 들어 twitter:card, twitter:title, twitter:description, twitter:image와 같은 태그를 사용하여 트위터에서 공유 미리보기를 최적화할 수 있다.

애플 트위터용 태그 예시

3. 페이지 속도 개선

페이지의 속도는  빨라야 합니다. 구글의 PageSpeedInsights로 가서 웹페이지 속도 개선에 대해 리포팅을 받아볼 수 있습니다. 구글에서 제공하는 PageSpeedInsights는 페이지의 성능을 진단해주고 해당 페이지의 문제점이 무엇인지 상세하게 알려줍니다. 이를 통해 사이트 내의 이미지 타입 개선, 이미지 로딩 속도 개선 등을 해야 한다는 사실을 알 수 있습니다.

https://developers.google.com/speed/pagespeed/insights/

 

PageSpeed Insights

올바른 URL을 입력하세요.

pagespeed.web.dev

3-1. 진단

PageSpeedInsights에 페이지 주소를 적고 분석하면 됩니다.

측정 항목
  • First Countentful Paint : 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정
  • Time to Interactive : 사용할 수 있을 때까지 걸리는 시간 (완전히 페이지와 상호작용할 수 있게 될 때까지 걸리는 시간)
  • Speed Index : 속도 색인은 페이지 콘텐츠가 얼마나 빨리 표시되는지 보여줌
  • Total Blocking Time : FCP와 상호작용 시간 사이의 모든 시간의 합으로 작업 지속 시간이 50ms를 넘으면 밀리초 단위로 표현됨
  • Largest Contentful Paint : 텍스트 또는 이미지가 표시되는 최대 시간
  • Cumulative Layout Shift : 누적 레이아웃 변경은 표시 영역 안에 보이는 요소의 이동을 측정

애플 모바일 성능 점수
애플 데스크톱 성능 점수

모바일 점수가 데스크톱 점수보다 낮은 이유는 아래와 같다고 한다.

모바일 기기는 일반적으로 데스크톱보다 프로세스가 느립니다.
모바일 기기는 뷰포트에 맞게 이미지 및 사이트 요소 크기를 조정해야 합니다.
PageSpeedInsights는 Moto G4 기기에서 시뮬레이션된 3G 연결을 사용해 모바일 상의 사이트 로딩 시간을 표시합니다.

3-2. 진단 상세

3-2-1) 콘텐츠가 포함된 최대 페인트 요소(LCP) 최적화

  • 문제: LCP 시간이 23,850ms로 매우 느림
  • 해결 방법:
  • 이미지 최적화: LCP 요소(주로 큰 이미지나 동영상)가 무엇인지 확인하고, 압축하거나 차세대 형식(ex. WebP) 사용
  • 서버 최적화: 적절한 캐싱 및 CND(Content Delivery Network)을 사용해 서버 응답 시간 단축
  • 프리로딩(Preloading): LCP에 해당하는 자원(이미지, 폰트 등)을 HTML <head>에 <link rel="preload">로 선언하여 빠르게 로드
  • 리소스 로드 순서 최적화: CSS와 자바스크립트를 지연 로드하거나 비동기로드하여 중요한 콘텐츠 로딩이 먼저 이루어지도록 함

3-2-2) 렌더링 차단 소스 제거하기

  • 문제: CSS/JS 파일이 렌더링 차단을 유발, 최대 7,260ms 절감 가능
  • 해결 방법:
  • CSS 최적화: Critical CSS를 추출하여 <style> 태그로 인라인 삽입, CSS 파일은 <link rel="preload">로 미리 로드하거나, <link rel="stylesheet"> 대신 media="print"를 활용한 비동기 로드 후 활성화
  • JS 최적화: <script> 태그에 defer 또는 async를 추가해 비동기 로드, 불필요한 JS르 제거 또는 중요하지 않은 스크립트는 지연 로드

3-3-3) 대규모 레이아웃 변경 피하기

  • 문제: 레이아웃 변경 1건 발견
  • 해결 방법:
  • 고정 크기 요소 정의: 이미지, 동영상, 광고 등의 요소에 고정 크기를 명시(width와 height)
  • 애니메이션 최적화: 레이아웃 변화를 유발하지 않는 CSS 속성(ex. transform, opacity) 사용
  • 폰트 로드 최적화: font-display: swap;을 설정해 레이아웃 변경 최소화

3-3. 사용자 경험 개선

PageSpeedInsights는 사용자 경험을 개선하기 위해 몇 가지 방법을 제안하고 있다. 그중에서도 CLS에 대해 알아보자.

3-3-1) Cumulative Layout Shift(누적 레이아웃 이동)

CLS는 페이지의 전체 수명 주기 동안 발생하는 모든 예상치 못한 레이아웃 변경에 대한 최대 버스트의 레이아웃 변경 점수를 측정한다. 레이아웃 변경은 표시되는 요소가 렌더링된 프레임에서 다음 프레임으로 위치를 변경할 때마다 발생한다. 

우수한 사용자 환경을 제공하려면 사이트의 CLS 점수가 0.1 이하가 되도록 노력해야 한다. 

출처: web.dev

위 영상은 레이웃이 갑자기 바뀌면서 사용자가 취소하려는 대규모 주문을 확인하게 된다.

페이지 콘텐츠가 예기치 않게 이동하는 경우는 일반적으로 리소스가 비동기식으로 로드되거나 DOM 요소가 기존 콘텐츠보다 먼저 페이지에 동적으로 추가될 때 발생합니다. 레이아웃이 전환되는 이유는 크기를 알 수 없는 이미지나 동영상, 초기 대체 값보다 크거나 작은 글꼴, 크기를 동적으로 조절하는 서드 파티 광고 또는 위젯 때문일 수 있습니다.

개발 시 사이트가 작동하는 방식과 사용자가 이를 경험하는 방식의 차이로 인해 문제가 더 악화됩니다. 예를 들면 다음과 같습니다.

  • 맞춤설정된 콘텐츠 또는 서드 파티 콘텐츠는 개발 환경과 프로덕션 환경에서 다르게 작동하는 경우가 많습니다.
  • 테스트 이미지는 개발자의 브라우저 캐시에 이미 있는 경우가 많지만 최종 사용자의 경우 로드하는 데 시간이 더 오래 걸립니다.
  • 로컬에서 실행되는 API 호출은 너무 빠르기 때문에 개발 시에는 눈에 띄지 않는 지연이 프로덕션에서는 상당한 지연으로 이어질 수 있습니다.

누적 레이아웃 이동(CLS) 측정항목을 사용하면 실제 사용자에게 이 문제가 얼마나 자주 발생하는지 측정하여 문제를 해결할 수 있습니다.

4. 구조화

각각의 태그들이 HTML5의 기본에 맞춰 설계되어야 합니다. 아래의 사이트를 통해 쉽게 알아볼 수 있습니다.

https://search.google.com/test/rich-results

 

리치 검색결과 테스트 - Google Search Console

페이지에서 리치 검색결과를 지원하나요? 올바른 URL이 아닙니다.테스트에 사용할 에이전트Google 검사 도구 스마트폰Google 검사 도구 데스크톱테스트에 사용할 에이전트Google 검사 도구

search.google.com

 

5. 사이트맵의 정기적인 관리

사이트맵(sitemap.xml)을 정기적으로 관리하는 것은 필수입니다. 사이트맵 제너레이터를 사용하거나 직접 코드를 통해 구축해도 됩니다. 사이트맵은 다음과 같은 형태의 xml 파일을 말합니다.

<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>http://artri.co.kr/</loc>
        <lastmod>수정날짜</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://artri.co.kr/</loc>
    </url>
    ...
</urlset>

SEO를 하는 5가지 방법을 알아보았습니다.

이외에도 구글 서치콘솔(https://search.google.com/search-console/)을 통해 트래픽 등에 대한 모니터링을 해야 합니다.

728x90
LIST
저작자표시 비영리 변경금지 (새창열림)