SEO를 위한 HTML/CSS 최적화
SEO
SEO(Search Engine Optimization)는 검색엔진 최적화를 의미하며, 웹사이트가 검색엔진 결과 페이지에서 상위에 노출될 수 있도록 웹사이트를 최적화하는 과정이다.
검색엔진이란?
인터넷상에서 정보를 검색할 수 있도록 도와주는 소프트웨어 시스템 또는 서비스로, 대표적으로는 구글,네이버가 있다.
SEO는 검색엔진을 사용하는 사용자가 원하는 정보를 쉽게 찾을 수 있도록 하며, 동시에 웹사이트의 가시성과 트래픽을 증가시키는 데 목적이 있다. 퍼블리싱 단계에서 SEO를 염두에 두고 작업하면, 검색 엔진이 콘텐츠를 더 쉽게 이해하고 사용자 경험(UX)을 향상시킬 수 있다.
그렇다면 퍼블리싱 단계에서는 어떤 방법으로 SEO를 높일 수 있을까?
🤖 검색엔진의 동작
SEO를 높이려면 검색엔진의 동작을 이해해야한다. 어떤 방식으로 콘텐츠를 최적화해야 검색엔진이 더 잘 이해하고, 상위에 노출되도록 만들 수 있는지 알 수 있기 때문이다.
구글 검색엔진을 기준으로, 검색엔진은 다음과 같은 순서로 동작한다.
크롤링 > 색인 생성 > 검색결과 게재
1. 크롤링 : 크롤러라는 자동화된 프로그램을 사용하여 인터넷에서 찾은 페이지로부터 텍스트, 이미지, 동영상을 다운로드
robots.txt파일이나 링크 구조를 기반으로 어떤 페이지를 크롤링할지 결정한다.- 내부 및 외부 링크를 따라가며 웹사이트 전반을 탐색한다.
robot.txt 파일이란?
크롤러가 접근할 수 있는 파일을 제어하는 파일이다. 주로 웹사이트의 특정 부분을 검색엔진 크롤러가 지나치게 요청해서 서버에 부담을 주는 것을 방지하기 위해 사용한다.
ex) 전체 웹사이트 크롤링 금지, 특정 형식의 파일 크롤링 금지 등
2. 색인 생성 : 페이지의 텍스트, 이미지, 동영상 파일을 분석하고 대규모 데이터베이스에 이 정보를 저장
- 이 단계에서
<title>요소 및 Alt 속성, 이미지, 동영상 등 텍스트 콘텐츠 및 핵심 콘텐츠 태그와 속성을 처리하고 분석하는 작업이 포함된다.
3. 검색결과 게재 : 사용자가 Google에서 검색하면 Google에서는 사용자의 검색어와 관련된 정보를 반환
- 사용자 경험(UX), 페이지 로딩 속도, 모바일 친화성 등의 요소를 종합적으로 평가한다.
- 메타 데이터(
<title>및<meta description>)를 검색결과에 표시한다.
📔 최적화를 위한 방법
검색엔진의 동작을 보니 퍼블리싱 단계에서는 검색엔진이 페이지를 크롤링하고 색인 생성하는 데 도움이 되는 구조와 콘텐츠를 제공하는 것이 중요하다. 어떻게 하면 최적화를 높이는 구조와 콘텐츠를 제공할 수 있는지 알아보자!
페이지 타이틀 <title>
- 사이트의 모든 페이지에
<title>요소로 지정된 제목이 있어야 한다. - 반복되는 키워드 또는 텍스트를 사용하지 않는다.
- 구체적이고 간결한 텍스트로 작성한다.
<meta> 태그
name="description"
<meta name="description" content="SEO를 이해하고 검색엔진 최적화를 위한 퍼블리싱 전략을 배우세요. 영업시간: 연중무휴, 오후 8~5시, 위치: 강남 000 학원">- 모든 페이지의 설명이 동일하거나 유사하지 않도록하고, 특정 페이지를 정확하게 나타내는 설명을 작성한다.
- 문장 형식으로 작성하지 않아도 된다.
페이지 콘텐츠의 내용(description)을 정확하게 제공하는 경우 구글은 이를 사용하여 검색결과에 스니펫을 생성한다.
스니펫이란?
웹페이지의 요약 정보를 보여주는 부분으로, 페이지 제목, URL, 설명(meta description) 등을 포함한다. 아래 이미지는 스니펫에서 description을 표시했다.
name="robots"
- 검색로봇의 접근 여부를 제어할 수 있다.
index/noindex,follow/nofollow,로 사용하며 중복사용시,로 구분한다. - 반응형인 경우 모바일과 데스크톱 동일한 meta 태그를 사용해야한다.
<meta name="robots" content="all">
<meta name="robots" content="index,follow"> // 색인 대상에서 제외, 페이지 내 링크 수집(=all)
<meta name="robots" content="noindex,follow"> //색인 대상에서 제외, 페이지 내 링크 수집
<meta name="robots" content="index,nofollow"> //색인 대상에서 제외, 페이지 내 링크 미수집
<meta name="robots" content="noindex,nofollow"> // 색인 대상에서 제외, 페이지 내 링크 미 수집(=none)property
Open Graph는 웹페이지 링크를 공유 할 때 콘텐츠가 어떻게 표현되는지 요약 한 데이터이다.
메타태그를 이용해 이 미리보기를 설정할 수 있다.
<meta property="og:type" content="웹페이지 유형">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="웹페이지 카드에 나타나는 썸네일 (주로 권장되는 사이즈는 1200x630)">
<meta property="og:url" content="웹페이지 주소">HTML 마크업
시맨틱 마크업 사용
콘텐츠 구조를 명확히 하고 검색 엔진이 쉽게 이해할 수 있도록 시맨틱 태그(<header>, <nav>, <article>, <section>, <footer> 등)를 사용한다.
<h> 태그 계층 구조
- 제목은
<h1>~<h6>태그를 사용하며, 한 단계씩 순차적으로 작성하고 건너뛰지 않는다. - 한페이지에
<h1>태그는 한개만 작성한다.
(각각의 섹션이나 콘텐츠 블록에 콘텐츠 내용 이해를 위해<h1>을 다중 사용하는 것을 허용하고 있긴하나, 고려해보자..!)
<a> 태그
검색엔진은 앵커 텍스트를 통해 해당 링크가 연결된 페이지의 내용이나 주제를 이해한다.
- 링크 페이지의 핵심 키워드를 사용해 명확하게 작성해야 한다.
- 너무 많은 내부 링크가 사용될 경우 스팸으로 인식할 수 있으므로 주의한다.
앵커텍스트란?
하이퍼링크를 포함한 텍스트로, 아래 예시에서SEO 설명 사이트를 말한다.<a href=“http://seodescription.com”>SEO 설명 사이트</a>
이미지 최적화
적절한 HTML 요소 사용
CSS 이미지를 색인 생성 하지 않으므로 시맨틱 마크업(<img>, <picture>)을 사용한다.
// 안좋은 예시
<div style="background-image:url(red-circle-icon.jpg)" />이미지 설명 추가
이미지 정보는 캡션 및 이미지 제목을 비롯한 페이지 콘텐츠에서 추출하므로 가능한 이미지를 관련된 페이지에 배치해야한다. 파일 이름도 짧지만 충분한 설명이 담긴 파일 이름을 사용하는 것이 좋다.
대체 텍스트 추가
검색 엔진은 텍스트 기반으로 색인을 생성하므로, 이미지에는 이를 설명하는 텍스트를 포함해야 한다.
대체 텍스트는 이미지가 링크로 사용될 때 앵커 텍스트 역할을 하며, 스크린 리더를 사용하는 사용자에게도 유용하므로 반드시 추가하자!
img 태그 사용 시
alt="": 대체 텍스트 역할
<img src="red-circle-icon.jpg" alt="빨간색 원 아이콘"/>svg 태그 사용 시
아래 두가지 방법 중 하나를 사용하면 된다.
// 1. title 태그 사용
<svg aria-labelledby="svgTitle" role="img">
<title id="svgTitle">빨간색 원 아이콘</title>
<circle cx="50" cy="50" r="40" fill="red"/>
</svg>
// 2. aria-label 속성 사용
<svg aria-label="빨간색 원 아이콘" role="img">
<circle cx="50" cy="50" r="40" fill="red"/>
</svg><title>혹은aria-label="": 대체 텍스트 역할role="img": SVG가 이미지 역할을 한다는 것을 명확하게 지정aria-labelledby="svgTitle",id="svgTitle":title 태그내용을 대체 텍스트로 사용하도록 설정
속도 최적화
img 태그의 loading="lazy" 속성
<img src="large-image.jpg" alt="예제 이미지" loading="lazy">스크롤 될 때 이미지가 로드되도록하여 페이지 로딩 속도를 줄여준다. 첫화면의 주요 이미지에는 사용자 경험(UX)에 좋지 않을 수 있으므로 적용하지 않는것이 좋다.
적절한 이미지 포맷 사용
이미지 용량이 작을수록 페이지 로드 속도가 빨라진다. WebP(구글에서 전적으로 웹을 염두에 두고 설계한 포맷) 및 AVIF(더 높은 압축률 지원) 같은 최신 포맷을 브라우저 지원 여부를 확인해보고 활용하자.
모바일 친화적 사이트 만들기
구글은 모바일 버전의 콘텐츠를 우선적으로 색인생성하고 순위를 지정하기 때문에 반응형을 권장한다.
<meta name="viewport">
브라우저에 표시되는 화면에 대한 기준을 정해준다.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
// 뷰포트=디바이스 너비, 사용자의 화면 확대 및 축소 조정 여부=no, 페이지 첫 로드 시 배율=1.0<link rel="canonical">
여러 개의 URL이 동일한 콘텐츠를 가리킬 때, 검색 엔진에게 어떤 주소가 원본(표준 URL)인지 알려준다. 이를 통해 검색 엔진은 비슷한 콘텐츠를 가리키는 여러 페이지 중 하나를 표준 URL로 설정한다.
모바일과 웹이 별도의 URL을 사용하는 경우 중복콘텐츠 문제가 생기지 않도록 사용한다.
// 모바일 페이지에서 데스크탑 페이지를 표준 URL로 설정하는 경우
<link rel="canonical" href="https://www.example.com">- 절대 경로로 작성한다.
- 2개 이상 사용하지 않는다.
각 검색 엔진은 저마다 조금씩 다른 SEO 최적화 기준을 가지고 있다.
특정 검색 엔진에서 상위 노출을 목표로 한다면, 해당 엔진의 공식 문서를 참고해보자.
더 자세한 내용은 아래 공식 문서에서 확인할 수 있다.
마치며
처음에는 SEO가 단순히 검색 엔진에서 상위 노출을 위한 마케팅 전략이라고 생각했지만, 조사해보니 SEM(Search Engine Marketing)이라는 개념이 따로 있었다. 두 개념이 비슷하다고 느꼈던 이유는, SEO가 기획, 디자인, 개발이 유기적으로 결합되어야 좋은 결과를 얻을 수 있는 과정이라는 점을 알게 되었기 때문인 것 같다.
또한, '접근성, 검색엔진 최적화(SEO), 성능 최적화 이거 다 같은 거 아닌가?' 싶을 정도로 비슷했는데, 다른 개념이면서도 서로 밀접하게 연결되어 있어서 그렇게 느껴졌던 것 같다. 결국 이 모든 과정이 더 나은 사용자 경험(UX)을 위한 것이기에 얼마나 중요한지 다시한번 느꼈고, 어느 한 가지만 신경 써도 사이트 전체에 긍정적인 영향을 줄 수 있다는 것이 다행스러웠다.
이제 이걸 바탕으로 잘 적용해 봐야겠다. 공부 끝! 🚀
참고사이트
https://www.ascentkorea.com/html-for-seo/
https://developers.google.com/search/docs/fundamentals/how-search-works?hl=ko
https://seo.tbwakorea.com/blog/seo-guide-2022/
https://velog.io/@hsecode/%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94SEO-%EC%9D%B4%EC%9C%A0%EC%99%80-%EB%B0%A9%EB%B2%95-10%EA%B0%80%EC%A7%80
https://armadillo-dev.github.io/dev-diary/seo/dev-diary-rel-canonical-and-alternate-seo/
