SEO란? 프론트엔드에서 최적화 하는 방법

👀 SEO란?

SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.

웹사이트를 최적화하여 검색 엔진 결과 페이지에서 상위 순위를 차지할 수 있도록 하는 전략이다.

→ 쉽게 말하면 검색 엔진에서 내 사이트를 더 찾기 쉽도록 개선하는 것이다.

 

⚙️ 최적화 방법

🏗️ 사이트 구조 및 HTML 최적화

검색 엔진은 웹사이트를 크롤링하고 인덱싱하기 때문에,

구조화된 HTML과 의미 있는 태그 사용이 중요하다.

 

1. 메타 태그 활용하기

• <title>: 페이지 제목, 검색 결과의 클릭률에 영향을 준다.
• <meta name="description" content="...">: 페이지 설명, 검색 결과 스니펫에 표시된다.

2. 헤딩 태그 구조 지키기

• 헤딩 태그를 사용할 때는 계층 구조에 유의해서 사용해야 한다.
• <h1>: 페이지의 핵심 주제
• <h2>, <h3>: 콘텐츠 계층 구조 명확화

3. 시맨틱 HTML 사용하기

• <article>, <section>, <nav> 등 의미 있는 태그를 사용한다.

4. 이미지 alt 속성 작성하기

• 검색엔진은 이미지를 이해하지 못하기 때문에 alt 속성을 추가해서 크롤러가 이미지를 해석할 수 있도록 해야 한다.

참고)
구글에서는 meta keywords 태그를 웹 순위에서 사용하지 않는다.

 

⚡ 성능 최적화

페이지 로딩 속도도 SEO 순위에 영향을 준다.

1. 페이지 속도 개선하기

• 이미지 최적화(WebP, lazy loading)
• 불필요한 JS 번들 최소화
• CSS/JS 코드 압축

2. SSR/SSG 활용하기

• Next.js와 같은 SSR/SSG 프레임워크 사용해서 초기 HTML 렌더링을 최적화한다.

 

🧑‍💻 사용자 경험(UX) 개선

사용자 만족도도 SEO에 영향을 준다.

1. 모바일 친화적 디자인

• 반응형 웹, 터치 최적화 구현하기

2. URL 구조

• 의미 있는 URL(/blog/seo-tips) 구조 사용하기
• 퍼센트 인코딩, 사이트 이용 고객의 언어를 사용해서 url을 구성하기
• URL 단어 구분시 하이픈(-)을 사용하기

 

🗺️ 사이트맵 이용하기

사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일이다.

Google과 같은 검색엔진은 사이트맵을 읽고 사이트를 효율적으로 크롤링한다.

대규모 사이트나 리치 미디어 콘텐츠가 많은 사이트를 운영할 경우

사이트맵을 구글 서치 콘솔에 제출하면 검색엔진 최적화에 도움된다.

 

✏️ 정리

• SEO는 검색 엔진이 내 사이트를 이해하고 쉽게 접근하도록 최적화하는 것이다.
• HTML 구조, 성능, UX, 사이트맵 등 프론트엔드에서 고려해야할 사항이 많다.
• 최적화를 통해 검색 결과에서 상위 노출과 사용자 경험 향상을 동시에 달성할 수 있다.

 

📚 참고

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko&_gl=1*wexzxq*_up*MQ..*_ga*MjA1NzYyMDc4Ni4xNzYyNDAwMzc0*_ga_SM8HXJ53K2*czE3NjI0MDAzNzQkbzEkZzAkdDE3NjI0MDAzNzQkajYwJGwwJGgw

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  Documentation  |  Google for Developers

https://developers.google.com/search/docs/crawling-indexing/url-structure?hl=ko&_gl=1*9pzh0m*_up*MQ..*_ga*MjA1NzYyMDc4Ni4xNzYyNDAwMzc0*_ga_SM8HXJ53K2*czE3NjI0MDAzNzQkbzEkZzAkdDE3NjI0MDAzNzQkajYwJGwwJGgw

Google 검색을 위한 URL 구조 권장사항 | Google 검색 센터  |  Documentation  |  Google for Developers