프론트엔드/SEO

프론트엔드 개발자를 위한 SEO 가이드

bread-gee 2025. 4. 7. 08:31
반응형

프론트엔드 개발자를 위한 SEO 가이드

프론트엔드 개발자를 위한 SEO 가이드 도서 표지

프론트엔드 개발자를 위한 SEO 가이드 도서 표지

📍 검색 엔진 최적화란?

▪ 검색 엔진(Search Engine)

  • 정보를 검색할 수 있도록 도와주는 프로그램

  • 검색엔진 구성 단계

    • 크롤링(Crawling)

      • 웹에서 페이지를 수집한 뒤 인덱스(색인)를 생성하는 자동 소프트웨어로, 로봇(Robot) 또는 스파이더(Spider)라고 알려져 있다.
      • 웹 상에 존재하는 정보를 탐색하고 수집하는 것
      • 사용자가 키워드를 검색하면 검색 엔진은 미리 생성된 페이지를 활용하여 결과를 제공

    • 인덱싱(Indexing)

      • 검색어와 연관된 웹 페이지 정보를 담은 데이터 베이스로, 각 웹 페이지의 키워드, 제목, 본문 내용, 이미지 등의 다양한 정보가 포함된다.
      • 검색 엔진에서 수집한 정보를 분류하여 검색 결과를 빠르게 제공할 수 있는 형태로 가공하는 과정

    • 검색 알고리즘(Search Algorithm)

      • 인덱싱된 데이터를 기반으로 검색어와 관련된 페이지를 찾아주는 역할
      • 크롤링 및 인덱싱을 통해 수집한 웹페이지 정보의 내용, 중요도, 신뢰성 등을 고려하여 가장 관련성 높은 검색 결과를 생성한다.

      📍 Page Rank 알고리즘

    • 웹 페이지의 링크 구조를 분석하여 해당 페이지의 상대적인 중요도를 평가하는 알고리즘

    • 구글(Google) 창시자인 래리 페이지(Larry Page)와 세르게이 브린(Sergey Brin)에 의해 개발

▪ 검색 엔진 최적화(SEO, Search Engine Optimization)

  • 웹 페이지에서 상위 노출하여 자연 유입 트래픽을 늘리고 검색어와 관련된 콘텐츠를 포함하도록 웹 사이트를 최적화하는 작업
  • SEO는 크게 내부 SEO와 외부 SEO로 나눌 수 있다.
    • 내부 SEO(On-Page SEO)
      • 콘텐츠의 품질과 구조를 최적화
      • 웹 사이트 자체적으로 수행할 수 있는 최적화 작업으로 웹 사이트 구조, 이미지 최적화, 메타 태그 등을 최적화하여 검색 엔진이 이해하기 쉽게 만드는 작업
    • 외부 SEO(Off-Page SEO)
    • 다른 웹 사이트에서의 언급이나 백링크를 통해 웹 페이지의 인기도와 신뢰성 향상
      • 백링크 구축 같은 다른 웹 사이트들이 해당 웹 사이트를 얼마나 링크하고 있는지 등의 외부적인 요인에 대한 최적화 작업

▪ 다양한 SEO 전략

  • 내부 SEO(On-Page SEO)
    • 키워드 최적화
      • 웹 페이지에 관련성 높은 키워드를 페이지의 제목, 메타 태그, 본문 등에 적절히 사용
    • 콘텐츠 최적화
      • 콘텐츠는 웹 페이지의 주제와 관련 있어야 하고, 구조와 문법이 명확해야 한다.
    • 메타 태그 최적화
      • 웹 페이지의 요약 정보를 제공하는 태그
      • 메타 디스크립션 태그를 최적화 해야 한다.
    • URL 구조
      • 직관적 URL사용
    • 내부 링크(Internal link) 구축
      • 관련된 콘텐츠 간에 내부 링크 구성
      • 사용자 경험 향상과 검색 엔진의 페이지 연결성 파악에 도움
    • 이미지 최적화
      • 이미지에 대한 적절한 설명과 대체 텍스트 제공
    • 모바일 최적화
      • 모바일 사용자를 고려한 웹 페이지 최적화
    • 페이지 속도 최적화
      • 페이지의 로딩 속도 개선을 통한 사용자 경험 향상
  • 외부 SEO(Off-Page SEO)
    • 외부 링크(Backlinkg, Inbound link)
      • 외부 링크를 통한 웹 사이트의 신뢰성, 주제 관련성 및 권위 향상
        • 가능하다면, 도메인 권위(Domain Authority, DA)가 높은 사이트에서 링크받기
          • 도메인 권위 : 백링크, 콘텐츠 품질, 웹 사이트 운영 히스토리 등 다양한 요소를 종합적으로 고려하여 예상되는 상위 랭킹을 점수화한 것
    • 소셜 신호(Social signals)
      • 웹 페이지의 인기도와 가시성 향상을 위한 소셜 미디어 플랫폼에서의 활동과 공유
    • 리뷰(Reviews)
      • 긍정적인 온라인 평판을 통한 검색 엔진의 신뢰성 강화
    • 게스트 포스트(Guest post)
      • 신뢰성과 권위가 높은 다른 웹 사이트에 자신의 글을 게시하는 행위
      • 글 중간에 자신의 웹 사이트로 연결되는 백링크 추가하기
    • 로컬(Local SEO)
      • 특정 지역 또는 지역적인 타깃을 가지고 있는 비즈니스나 웹 사이트의 검색 엔진 최적화

📍 웹 사이트 구조 최적화

▪ 웹 사이트 계층 구조 설계

  • 웹 사이트 구조 최적화 이유
    • 크롤러(Crawler)의 효율적인 탐색
      • 계층 구조가 명확하다면 크롤러는 핵심 페이지와 콘텐츠를 더 쉽고 효율적으로 탐색하고 인덱싱할 수 있다.
    • 키워드 및 콘텐츠 그룹화
      • 구조화된 콘텐츠는 검색 엔진이 사용자의 검색 엔진이 사용자의 검색 쿼리와 일치하는 결과를 제공하는 데 도움
        • 상위 계층은 더 일반적인 키워드와 콘텐츠 적용
        • 하위 계층은 보다 구체적이고 세부적인 키워드와 콘텐츠 적용
    • 사용자 경험 및 탐색 용이성
      • 계층 구조가 명확하면 사용자들은 웹 사이트 내에서 원하는 콘텐츠에 더 쉽게 접근 가능
      • 사용자의 만족도를 높이고 웹 사이트의 페이지 뷰 및 체류 시간을 증가시킬 수 있다.
  • 계층 구조로 설계하기
    • 설계 시 유의사항
      • 플랫(Flat) 페이지 구조 피하기
        • 모든 페이지가 동일한 계층에 위치한다면 계층성이 부족한 구조를 의미한다.
      • 너무 깊은 계층 구조 피하기
        • 계층 구조가 깊다면 검색 엔진이 페이지의 중요성을 인식하기 어렵다.
      • 내비게이션(Navigation) 메뉴 생성
        • 내비게이션 메뉴는 웹 사이트의 주요 카테고리와 하위 항목을 표시하는 메뉴
        • 검색 엔진이 웹 사이트의 구조와 콘텐츠의 중요도를 이해할 수 있게 한다.
      • 명확하고 의미 있는 URL 구조
      • 내부 링크 구성
        • 주요 섹션과 하위 섹션 간에 내부 링크를 추가하여 사용자가 웹 사이트 내에서 자유롭게 이동하도록 한다.
      • 사이트맵 생성
        • 검색 엔진은 사이트맵을 활용하여 웹 사이트의 구조와 페이지를 빠르게 인덱싱할 수 있다.
    • 계층 구조 예시
      • 홈 페이지(Home Page)
        • 웹 사이트의 가장 상위 계층
        • 주로 기업 또는 조직의 로고, 주요 내용, 탐색 메뉴 등을 포함
      • 메뉴(Menu)
        • 웹 사이트의 주요 부분
        • 웹 사이트 내에서 이동할 수 있는 다른 페이지로 연결하는 링크의 집합
        • 일반적으로 상단이나 측면에 위치하며 주요 카테고리 또는 섹션으로 구성
      • 카테고리(Category)
        • 웹 사이트 내에서 주제 또는 관련된 콘텐츠를 그룹화
      • 하위 카테고리(Subcategory)
        • 카테고리 내에서 세부 주제 또는 하위 그룹
      • 콘텐츠 페이지(Content Page)
        • 실제 콘텐츠가 포함된 페이지
        • 각 콘텐츠 페이지는 고유한 URL을 가지며, 검색 엔진에서 독립적으로 인덱싱될수 있다.
      • 하위 페이지(Sub Page)
        • 메인 콘텐츠 페이지와 관련된 보조 페이지
        • 사용자가 웹 사이트 내의 특정 콘텐츠에 직접 접근할 수 있도록 해준다.

▪ 내부 링크(Internal link) 구조 최적화

  • 내부 링크
    • 웹 사이트 내부 페이지 간 이동을 위한 링크
  • 내부 링크 구조
    • 웹 사이트 내의 내부 링크의 배치와 링크 연결 방식
  • 내부 링크 유형
    • 내부 링크의 배치 방식과 목적에 따라 나뉜다.
      • 메뉴/내비게이션(menu/navigation) 유형
        • 웹 사이트 상단에 위치한 내비게이션
        • 일반적으로 로고와 함께 배치
      • 푸터(footer) 유형
        • 웹 사이트 하단에 위치한 내비게이션
        • 일반적으로 웹 사이트 정보나 저작권 정보 포함
      • 인 텍스트(in-text) 유형
        • 링크에 들어가는 텍스트가 해당 문장의 내용과 밀접한 연관이 있어 링크 관련성과 사용자 편리성을 높이는 역학
      • 사이드바(sidebar) 유형
        • 왼쪽 혹은 오른쪽 섹션을 활용
  • 내부 링크 계층적 구조로 작성하기
    • 내부 링크 계층적 구조
      • 상위 페이지에서 하위 페이지로 편리하게 이동하기 위해 설계한 내부 링크 구조 방식
        • 기둥 페이지(Pillar Pages)
          • 넓은 주제를 다루고 핵심적인 정보를 제공하는 중심 페이지
          • 홈페이지 및 메뉴, 카테고리
        • 토픽 클러스터(Topic Clusters)
          • 기둥 페이지와 관련된 세부 주제
          • 기둥 페이지와 밀접한 연관성, 기둥 페이지와의 내부 링크로 연결
          • 특정 주제에 대한 정보 제공
          • 관련된 하위 주제를 다루는 페이지들과 연결
          • 하위 카테고리 페이지
        • 하위 주제 페이지(Subtopic Pages)
          • 각 세부 주제를 다루는 페이지
          • 특정 주제의 세부 정보를 제공
          • 관련성을 갖는 토픽 클러스터 페이지와 내부 링크를 가진다.
  • 의미 있는 앵커 텍스트(Anchor Text)
    • 링크의 텍스트 부분
    • 링크가 어떤 페이지로 이동하는지 설명하는 역할
    • 효과적인 의미 있는 앵커 텍스트 작성 방법
      • 관련 키워드 사용
        • 링크된 페이지의 주요 키워드나 관련된 키워드를 사용하자
      • 중복 사용 피하기
        • 동일한 페이지에 대해 동일한 앵커 텍스트를 반복 사용하는 것은 피하자
      • A/B 테스트 및 분석
        • A/B 테스트는 마케팅과 웹 분석에서 주로 사용하며 A 상황과 B 상황을 비교하는 테스트
  • 내부 링크와 SEO
    • 검색 엔진 크롤러의 쉬운 탐색
    • 페이지 간의 연결 강화

▪ URL 구조 최적화

  • 계층 구조를 반영한 URL 구조는 검색 엔진이 웹 사이트의 구조와 내용을 이해하고 인덱싱하는 데 도움
  • URL 설계 가이드라인
    • 의미 있는 디렉토리(Directory) 구조 설계
      • 유사한 주제나 카테고리의 콘텐츠는 동일한 디렉토리에 위치
      • 디렉토리 이름은 콘텐츠의 내용과 관련된 이름
    • URL 키워드 최적화
      • URL에 포함된 키워드는 검색 엔진에게 웹 페이지의 내용을 알려주는 역할
      • 키워드는 관련성과 일관성 유지
      • 너무 많은 키워드 사용은 스팸으로 간주
    • 간결하고 읽기 쉬운 URL 구성
      • 표준에 따라 작성
      • 소문자 사용, 단어 사이에 하이픈(-) 사용, 인코딩 등의 규칙 준수
      • 단순하고 일관된 구조
      • 여러 매개변수를 가지는 동적 URL 대신 정적 URL을 사용하거나 친숙한 디렉토리 구조 선택
    • URL 리디렉션(Redirection) 관리
      • URL을 변경해야 할 경우, 이전 URL을 새 URL로 리디렉션하는 ‘301 리디렉션’ 사용
      • URL 구조 변경 시, 사이트맵 함께 수정
      • 캐시 가능한 URL 사용
  • URL 구조와 검색 엔진 최적화
    • URL의 구조는 검색 엔진이 콘텐츠를 이해하고 인덱싱하는 데 영향을 미친다.
    • 계층 구조와URL에 포함된 키워드는 검색 엔진에게 웹 페이지의 테마와 관련성을 알려준다.
      • 도메인
      • 경로

▪ 사이트맵(Sitemap)

  • 모든 페이지를 계층화한 XML 파일이나 페이지의 목록
  • 사이트맵 작성 이유
    • 검색 엔진은 웹 사이트를 크롤링할 때, XML 파일을 통해 웹 사이트의 구조를 이해하고 해당 웹 사이트를 검색 결과에서 상위에 노출할지 결정
      • 검색 엔진 색인 용이
        • 신규 페이지 추가, 기존 페이지 업데이트 시 사이트맵 이용하면 변경 사항 빠르게 반영됨
      • 페이지 강조
        • <priority> 태그를 이용해서 해당 페이지의 우선순위를 높이거나 <changefreq>의 값으로 ‘always’나 ‘daily’를 넣어 변경 빈도를 높일 수 있다.
      • 사용자 편의성 제공
        • 웹 사이트의 구조를 시각적으로 표시
  • 사이트맵 생성 방법
    • 자동 생성
      • Google Search Console
      • XML Sitemap Generator
      • Screaming Frog
      • Yoast SEO 플러그인
    • 수동 생성
      • 파일명 : sitemap.xml
      • 유효한 XML 형식 유지
      • 파일 크기 50MB이하
      • 올바른 네임스페이스와 스키마 정보 지정
      • 루트 디렉토리에 업로드
  • 사이트맵 내용
    • <urlset>
      • 모든 URL 감싸는 요소
      • XML 네임스페이스 및 스키마 정보 포함
    • <url>
      • 각 URL 항목의 부모 태그
    • <loc>
      • URL 명시하는 요소
      • 프로토콜(예: http)로 시작해서 슬래시(’/’)로 끝
      • 전체 값 2,048자 미만
    • <lastmod>
      • 페이지를 마지막으로 수정한 날짜
      • Datetime 형식
      • 시간 부분을 제외한 YYYY-MM-DD 형식
    • <changefreq>
      • 얼마나 자주 변경될지 예상 빈도
      • always, hourly, daily, weekly, monthly, yearly, never
    • <priority>
      • 중요 페이지에 대한 우선 순위
      • 기본 값 : 0/5
      • 유효 값 : 0.0 ~ 1.0

▪ 로봇 파일(Robots.txt)

  • 검색 엔진 로봇 또는 크롤러에 웹 사이트의 접근 권한과 제약 사항을 알려주는 파일
  • 루트 디렉토리에 위치
  • 로봇 배제 표준에 따라 작성
    • 로봇 배제 표준 : 웹 사이트 소유자가 엔진 로봇이 웹 페이지에 액세스하거나 크롤링하는 것을 제어하기 위한 규약
  • 로봇 파일의 중요성
    • 검색 엔진이 크롤링해야 할 페이지와 그렇지 않은 페이지 구분하여 검색 결과에 포함시키거나 제외할 수 있다.
    • 크롤링 속도 향상
    • 검색 엔진 최적화
    • 검색 엔진 가이드 준수
  • 로봇 파일 생성 방법
    • 파일 명 : robots.txt
    • 단 하나의 파일만 존재
    • 루트 디렉토리에 업로드
    • 해당 프로토콜, 호스트, 포트 내의 경로에만 적용
    • UTF-8으로 인코딩된 텍스트 파일
  • 로봇 파일 작성 방법
    • 폴더명 맨 끝에 슬래시(’/’)를 꼭 붙인다.
    • User-agent[필수, 그룹 당 하나 이상]
      • 검색 엔진 로봇의 이름 명시
    • Disallow[규칙 당 하나 이상 필요]
      • 수집 여부 명시(disallow/allow)
    • Allow[규칙 당 하나 이상 필요]
      • 특정 경로 수집 허용(disallow/allow)
    • Sitemap[선택 사항]
      • sitemap.xml 파일의 위치 지정
  • 로봇 파일 검증 도구
    • Google Search COnsole 내의 Robots.txt Tester
    • Bing Webmaster ToolsW3C Link Checker
    • W3C Link Checker

📍 웹 사이트 성능 최적화

▪ 웹 페이지 로딩 속도

  • 사용자가 URL을 클릭하여 웹 페이지에 접속한 시점부터 페이지 화면이 모두 로딩될 때까지의 시간
  • 웹 페이지 로딩 속도 개선 방법
    • 적절한 폰트 적용 방식 사용
      • 서버 폰트
        • 브라우저에서 폰트 파일 다운로드
        • 개인/회사의 서버에 호스팅하여 사용
      • 로컬 폰트
        • 컴퓨터나 기기에 미리 설치된 폰트 사용
        • 폰트 다운로드, 서버 호스팅하지 않고 즉시 사용
      • CDN(Content Delivery Network) 폰트
        • CDN 서버의 폰트 파일 사용
        • 폰트 다운로드, 서버 호스팅하지 않고 즉시 사용
    • HTML, CSS, JS 코드 최적화
      • JS 하단 배치
      • HTML, CSS, JS 코드 최소화(Minify)
    • 속도에 최적화된 서버 구축
      • 로드 밸런싱
      • 호스팅 서비스 선택
  • 웹 페이지 로딩 속도 측정 방법
    • 웹 페이지 로딩 속도 측정 사이트 이용
      • PageSpeed Insights
    • 개발자 도구를 통한 확인
      • Network(네트워크) 탭 확인
        • DOMContentLoaded
        • 로드

▪ HTML 구조화

  • HTML 구조화 시 사용되는 태그
    • 시맨틱 태그(Semantic Tag)
      • 의미론적인(Semantic) 태그
      • 구체적이고 목적에 맞는 의미가 있다.
      • 시맨틱 태그 목록
        • <header>
          • 웹 페이지의 제목이나 로고
        • <nav>
          • 웹 페이지의 내비게이션 역역
          • 메뉴, 목차, 사이트 내부 링크 등
        • <main>
          • 핵심 콘텐츠를 감싸는 태그
          • 웹 페이지에서 한 번만 사용
        • <article>
          • 독립적으로 읽을 수 있는 콘텐츠
          • 뉴스 기사, 블로그 글, 잡지 기사 등
        • <section>
          • 본문 내에서 비슷한 주제의 콘텐츠를 그룹으로 묶어서 구분 지을 때 사용하는 태그
        • <footer>
          • HTML 문서의 하단 또는 <scetion>의 하단 영역에 작성되는 태그
          • 이용 약관, 개인정보 처리 방침, 페이지 작성자, 연락처 등의 보충 정보
        • <h1> ~ <h6>
          • 헤딩 태그(Heading Tag)는 HTML 문서에서 각 콘텐츠의 제목을 표시
          • 숫자가 작을수록 더 큰 제목
          • 웹 페이지의 정보를 계층적으로 표현하기 위해 사용
        • <img>
          • 이미지 삽입하는 데 사용하는 태그
          • alt 속성에 대체 텍스트 필요
        • <a>
          • HTML 문서에서 하이퍼링크를 생성하는 데 사용
          • 내부 링크 생성
    • 태그 작성 시 주의 사항
      • <header>, <main>, <footer>, <h1>은 한 페이지에 하나만 사용
      • <h1>은 <main>에 있는 <section>에 사용
        • <h1>은 주로 페이지의 제목을 표현하기 때문
      • 헤딩 태그 사용 시 <h1>부터 <h6>까지 순차적으로 사용
      • 콘텐츠를 외부와 구분하여 단독으로 묶는 경우 <article>을 사용, 아닌 경우 <section>을 사용
      • <table>을 레이아웃 짤 때 사용하지 않기
    • HTML 문서 유효성 검사 사이트
      • W3C Markup Validation

▪ 이미지 최적화

  • 최적화 된 이미지 사용으로 로딩 속도를 개선할 수 있다.
  • 이미지 사이즈 조절
    • 사이트에 적용되는 이미지의 크기는 고유 크기와 사이트에 보여주기 위해 렌더링 된 크기가 다를 수 있다.
    • 고유 크기와 렌더링 된 크기의 차이가 2배 이하인 경우가 적절하다.
  • 이미지 포맷(format) 설정
    • 디지털 이미지 파일을 저장하고 전송하기 위해 사용되는 파일 형식
    • 이미지 포맷 유형
      • JPEG
        • 압축 방식 : 손실
        • 애니메이션 : 미지원
        • 투명도 : 미지원
      • PNG
        • 압축 방식 : 무손실
        • 애니메이션 : 미지원
        • 투명도 : 지원
      • GIF
        • 압축 방식 : 무손실
        • 애니메이션 : 지원
        • 투명도 : 미지원
    • 무손실 압축 vs 손실 압축
      • 무손실 압축
        • 압축하면서 이미지 크기를 줄이고 원본 이미지의 품질을 유지하는 방식
        • PNG, GIF
      • 손실 압축
        • 압축하면서 일부 이미지 정보를 버려 파일 크기를 줄이는 방식
        • JPEG
    • 최대한 저용량으로 저장할 수 있는 이미지 포맷
      • 이미지 포맷 형식에 따라 이미지 압축 용량이 다르다.
      • 이미지의 파일 크기를 줄이고 이미지 품질을 유지하여 전송하는 것이 로딩 속도 향상에 도움
      • JPEG 2000
        • JPEG 포맷의 다음 버전
        • JPEG보다 더욱 작은 용량
        • 손실 압축과 무손실 압축 지원
        • 투명 기능, 애니메이션 기능, 다양한 색상 지원
        • CPU 시간과 계산 자원, 디코딩을 위한 CPU 시간과 메모리 자원, 이미지 렌더링을 위한 GPU 자원 필요
        • Safari(5+)
      • JPEG XR
        • MS사 개발
        • JPEG에 비해 더 많은 수의 색상 채널 당 채색을 허용
        • JPEG보다 작은 용향
        • 손실 압축과 무손실 압축 지원
        • 투명 기능, 점진적 데이터 전송 기능 지원
        • Edge(12-18), IE(9+)
      • WebP(웹피)
        • JPEG, PNG, GIF보다 25~35% 정도 더욱 작은 용량
        • 손실 압축과 무손실 압축 지원
        • 투명 기능, 애니메이션 기능 지원
        • 세부 사항, 그라데이션 가진 투명한 이미지는 품질 저하 우려
        • 점진적 데이터 전송 기능 없음.
        • 사용자 네트워크 품질이 낮은 경우 WebP 사용은 유리하지 않을 수 있다.
        • Chrome(9+), Firefox(65+), Safari(14+), Edge(18+), Opera(11.5+)

▪ 리디렉션(Redirection)

  • 클라이언트의 요청을 받은 서버가 해당 요처을 다른 위치 또는 페이지로 자동으로 이동하는 과정

  • Javascript는 window.location을 사용

      window.location.href = "http://새로운URL.com";

    • .href → 현재 웹 페이지를 새로운 URL로 리디렉션

      window.location.pathname = "/새로운페이지이름.html";

    • .pathname → 현재 페이지를 다른 경로로 리디렉션

      window.location.replace("http://새로운URL.com");

    • .replace → 현재 웹 페이지를 다른 도메인으로 리디렉션

  • 리디렉션 작동 방식

    • 리디렉션은 HTTP 프로토콜에서 상태 코드와 함께 이루어진다.
    • 서버는 상태 코드와 함께 응답을 반환

  • 리디렉션 유형

    • 301 리디렉션

      • 영구적 리디렉션
      • 요청한 기존 URL이 새로운 URL로 영구적 이동
      • 301 Moved Permanently

    • 302 리디렉션

      • 임시 리디렉션
      • 기존 URL이 일시적으로 다른 URL로 이동
      • 302 Found

    • 303 리디렉션

      • 기타 리디렉션
      • POST 요청 후 발생하는 리디렉션 상황에서 사용하는 일시적인 리디렉션
      • 303 See Other

    • 307 리디렉션

      • 임시 리디렉션 → HTTP/1.1에서 사용
      • 요청 메서드에 대한 변경 없이 리디렉션 유지
      • 307 Temporary Redirect

    • 308 리디렉션

      • 영구적 리디렉션 → HTTP/1.1에서 사용
      • 클라이언트의 요청을 받은 서버가 영구적으로 다른 URL로 이동
      • 308 Permanent Redirect

    • 메타 리프레시(Meta Refresh)

      • HTML의 메타 태그를 사용하여 일정 시간이 지나면 자동으로 웹 페이지를 새로고침 하거나 새로운 페이지로 이동하는 기능

      • 별도의 상태 코드 없음

      • SEO 측면에서 비추

        <meta http-equiv="refresh" content="5;url=https://example.com">

  • SEO를 위한 리디렉션 사용법

    • URL 구조 변경
    • 오류 페이지 관리
    • 사요자 경험 개선
    • 중복 콘텐츠 처리

▪ 모바일 최적화

  • 검색 엔진은 모든 신규 웹 사이트에 기본적으로 모바일 중심적으로 색인을 생성한다.
  • 검색 엔진 권장 사항
    • 반응형 웹 사이트
    • 별도의 모바일 URL 제공(적응형)
  • 구글 모바일 친화성 테스트
    • Google Search Console
  • 크롬 개발자 도구를 이용한 모바일 화면 테스트
    • 크롬 개발자 도구에서 제공하는 Device Mode

📍 메타 태그 최적화

▪ 메타 태그(Meta Tag)

  • HTML의 <meta> 태그를 통해 해당 웹 페이지에 대한 정보를 검색 엔진에 전달하는 데이터

  • 메타 태그 종류

    • 메타 디스크립션(Meta Description)

      • 웹 페이지 내용을 요약한 설명을 제공하는 태그

        <meta name="description" content="웹 페이지에 대한 설명" />

    • 로봇 메타 태그(Robots Meta Tag)

      • 웹 페이지에 대한 색인 여부(index or noindex), 크롤링 여부(follow or nofollow)를 제어하는 태그

      • 기본 값 : index, follow

        <meta name="robots" content="index, follow" />

    • 뷰포트 메타 태그(Viewport Meta Tag)

      • 모바일 기기에서 웹 페이지가 어떻게 보일지 설정하는 역할

      • content 속성 → 뷰포트 크기 정의

        • 기본 값 : width=device-width, initial-scale=1.0
        • width=device-width → 디바이스의 가로 너비를 뷰포트의 가로 너비로 사용
        • initial-scale=1.0 → 최초 로딩 시 화면 배율 1로 설정
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    • 문자셋 메타 태그(Charset Meta Tag)

      • HTML 문서의 문자 인코딩 방식을 정의하는 메타 태그
      • HTML 문서는 UTF-8 문자 인코딩 방식 사용

    • 타이틀 메타 태그(Title Meta Tag)

      • 웹 페이지의 타이틀(제목)을 나타내는 태그

    • 키워드 메타 태그(Keywords Meta Tag)

      • 해당 웹 페이지와 관련된 중요한 키워드를 설정하는 태그

▪ 스니펫(Snippet)

  • 검색 결과의 설명 또는 요약
  • 메타 디스크립션(Meta Description)에서 작성한 내용 노출
  • 네이버의 스니펫
    • VIEW 스니펫(현재 사용하지 않는 것으로 확인)
      • UGC(User Generated Contents)
      • C-Rank(Context, Content, Chain, Creator)
      • D.I.A(Deep Intent Analysis)
    • 지식 스닛펫
      • 네이버 자체 분석 알고리즘을 활용하여 방대한 웹 문서에서 사용자가 찾고자 하는 정보와 밀접하게 관련된 텍스트를 자동으로 추출해 제공하는 웹 검색 결과
  • 구글의 스니펫
    • 추천 스니펫
      • 구글은 검색 결과를 표시할 때, 페이지로 연결되는 링크 앞쪽에 페이지를 설명하는 스니펫을 배치한다.
    • 리치 스니펫(리치 결과)
      • 페이지가 구저화된 데이터 마크업으로 작성되어 있고, 구글 리치 결과 가이드에 부합한다면 해당 카테고리에 맞는 형태로 화면이 노출된다.
      • ex) 레시피, 채용정보, FAQ, HowTo 등

▪ 타이틀 태그(Title Tag)

  • HTML 문서의 제목을 정의하는 태그
  • <title>은 해당 웹 페이지의 주제를 알려주는 것이기 때문에 웹 페이지의 콘텐츠와 일치하는 적절한 키워드를 포함하여야 한다.

▪ 오픈 그래프(Open Graph)

  • 웹 사이트가 소셜 미디어에 공유될 때 해당 페이지의 정보를 요약해서 보여준다.
  • 오픈 그래프 구성 요소
    • 기본 메타 데이터(Basic Metadata)
      • og:title
        • 웹 페이지의 제목을 나타내는 태그
      • og:type
        • 웹 페이지의 콘텐츠 유형을 지정하는 태그
      • og:url
        • 소셜 미디어에 웹 페이지를 공유할 때, 해당 페이지의 URL 정보를 제공하는 태그
      • og:image
        • 웹 페이지를 대표하는 이미지를 지정하는 태그
      • og:description
        • 웹 페이지의 콘텐츠를 설명하는 태그
    • 선택적 메타 데이터(Optional Metadata)
      • og:determiner
        • 웹 페이지 제목 앞에 나타나는 단어를 나타내는 태그
      • og:site_name
        • 소셜 미디어에 웹 페이지를 공유할 때, 해당 사이트의 이름을 나타내는 태그
      • og:locale
        • 웹 페이지의 언어와 지역 정보를 제공하는 태그
      • og:locale:alternate
        • 다른 지역에서 페이지를 볼 경우 사용될 대체 언어와 국가를 지정하는 태그
      • og:audio
        • 웹 페이지와 관련된 오디오 파일을 나타내는 태그
      • og:video
        • 웹 페이지와 관련된 비디오 파일을 나타내는 태그

▪ 트위터 카드(Twitter Card)

  • 트위터 사용자가 트윗(Tweet)에 콘텐츠가 표시되는 방식을 최적화할 수 있는 기능

  • 트위터 내에서 링크가 공유되면 해당 링크에 대한 추가적인 글과 이미지를 미리 볼 수 있다.

  • 트위터 카드 유형

    • 요약 카드(Summary Card)
      • 웹 사이트의 제목과 설명, 대표 이미지, 트위터 핸들, URL 등의 정보 표시
      • 일반적인 콘텐츠에 사욜기사나 블로그 게시물 및 기타 콘텐츠에 대한 링크를 공유하는 사용자와 기업에게 적합
    • 큰 이미지가 포함된 카드(Summary Card with Large Image)
      • 요약 카드와 유사하지만 최소 크기 280x150인 큰 이미지가 포함된 카드
      • 제품 또는 서비스를 선보이는 사용자 및 기업에게 적합
    • 앱 카드(App Card)
      • 모바일 앱을 홍보하고자 하는 기업을 위해 설계된 것, 트위터에서 모바일 앱을 소개하고, 해당 앱을 다운로드하거나 설치할 수 있는 링크를 제공하는 카드
      • 모바일 앱을 홍보하는 사용자나 기업에게 적합
    • 플레이어 카드(Player Card)
      • 소셜 미디어에서 동영상이나 오디오 등의 미디어 콘텐츠를 재생할 수 있는 카드
      • 동영상을 공유하는 기업 또는 사용자에게 적합

  • 트위터 카드의 태그 작성 방법

    • 메타 태그 작성

      <meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="@website username" />
<meta property="twitter:title" content="예시 제목" />
<meta property="twitter:description" content="예시 설명" />
<meta property="twitter:image" content="https://www.example.com/example.jpg" />
<meta property="twitter:url" content="https://www.example.com" />

    • 트위터 카드 검증 사이트

      • 트위터에서 제공하는 공식 도구
      • 페이지의 메타 태그를 확인하고 트위터의 지침과 요구 사항을 준수하는지 확인
      • 미리 보기 제공

  • 트위터 카드의 구성 요소

    • 제목(Title)
      • 웹 페이지의 제목 또는 헤드라인
    • 트위터 핸들(Twitter handle)
      • 링크를 공유한 트위터 계정의 사용자 이름
      • ‘@’로 시작하는 사용자 이름
    • 설명(Description)
      • 웹 페이지의 간략한 설명
    • 이미지(Image)
      • 웹 페이지와 관련된 이미지
    • URL
      • 트위터 카드와 관련된 URL

▪ 캐노니컬 태그(Canonical Tag)

  • 중복 콘텐츠 문제를 해결하고 검색 엔진 최적화를 개선하기 위해 사용되는 태그

  • 캐노니컬 태그를 사용하여 대표 URL을 지정하여 중복 콘텐츠 문제를 해결해야 한다.

  • 캐노니컬 태그 구현 방법

    • HTML 문서에서 ‘Canonical link element’라는 시맨틱 태그 사용

      <link rel="canonical" href="표준 URL" />

    • HTTP 헤더 사용

      • HTML 파일이 아닌 다른 파일과 같이 Google 검색에 지원되는 문서의 표준 URL을 나타내는 방법
      • 구글에서는 서버를 구성할 수 있는 경우에 이 방법을 추천
      HTTP/1.1 200 OK
Content-Type: application/word
Link: <주요 URL> rel="canonical"
Content=Length: 5823

  • 올바른 캐노니컬 태그 사용 방법

    • 상대 경로가 아닌 절대 경로로 설정
      • 상대 경로에는 프로토콜과 기기 정보가 없다.
      • 절대 경로에는 프로토콜과 기기 정보가 있다.
    • 한 페이지에 캐노니컬 태그를 두 개 이상 두지 않는다.
    • 순환 참조(Circular reference)를 방지
반응형
저작자표시 비영리 (새창열림)