[HTML] SEO를 위한 효과적인 HTML 구조 구축하기

안녕하세요 1dg입니다!
저번에는 html의 기본 구조에 대해서 알아보았는데요
오늘은 SEO(Search Engine Optimization)에 대해 알아보겠습니다 :-D

2023.08.14 - [Frontend/HTML] - [HTML] HTML 구조: 웹 페이지의 기반

[HTML] HTML 구조: 웹 페이지의 기반

HTML 구조: 웹 페이지의 기반 안녕하세요! 1dg입니다. 오늘은 html 기본 구조 에 대해 알려드리려고 합니다! 웹 개발을 시작하면서 HTML (HyperText Markup Language) 이란 용어를 들어보셨을 것입니다. HTML은

1dg0601.tistory.com

아래는 오늘 알려드릴 내용의 목차입니다!

SEO란?

SEO 는 "Search Engine Optimization"의 약어로,
웹 사이트나 웹 페이지를 검색 엔진에서 더 잘 찾아볼 수 있도록 최적화하는 과정과 전략 을 의미합니다.
검색 엔진은 사용자가 웹에서 정보를 검색할 때 검색 결과를 보여주는 역할을 합니다.
SEO 는 이러한 검색 결과에서 상위에 랭크되고 노출되기 위해
웹 페이지의 내용과 구조를 조정하여 검색 엔진에 더 잘 인식되도록 하는 작업을 포함합니다.

SEO 의 목표는 사용자가 특정 키워드 또는 주제로 검색했을 때
해당 웹 페이지가 상위 검색 결과 에 나타날 수 있도록 하는 것입니다.
상위 검색 결과에 노출되면 웹 페이지의 노출 및 클릭률이 증가하므로,
트래픽과 방문자를 늘리는 데에 큰 영향을 미칩니다.

아래는 효과적으로 HTML 구조를 구축하는 방법입니다.

1. 적절한 태그 사용

웹 페이지의 구조를 설계할 때 적절한 HTML 태그를 사용하는 것이 중요합니다.
예를 들어,
제목은 <h1>부터 <h6>까지의 태그를 사용하여 표현해야 하며,
본문 내용은 <p> 태그를 사용해 구분해야 합니다.
제목과 본문을 명확하게 구분함으로써 검색 엔진은 페이지의 구조를 파악하게 됩니다.

2. 메타데이터 활용

<head> 섹션 내에서 메타데이터를 적절하게 활용하세요.
<title> 태그를 사용하여 각 페이지의 명확하고 설명적인 제목을 작성하세요.
또한 메타 설명(<meta name="description" content="페이지에 대한 간략한 설명">)을 추가하여
검색 결과에 나타날 페이지 요약을 제공합니다.

3. 이미지 태그와 Alt 속성

이미지를 사용할 때는 <img> 태그를 사용하고 alt 속성을 추가하세요.
alt 속성은 이미지를 설명하는 텍스트로,
이미지가 로드되지 않았을 때나
스크린 리더 사용자에게 이미지를 설명해 주는 역할을 합니다.
검색 엔진은 이미지의 alt 속성을 활용하여 이미지 컨텐츠를 이해하고 평가합니다.

4. 시맨틱 HTML 태그

시맨틱 태그를 사용하여 페이지의 의미와 구조를 명확하게 표현하세요.
<header>, <nav>, <main>, <article>, <section>, <footer> 등의 태그를 사용하여
페이지를 논리적으로 분할하고 구조화할 수 있습니다.
시맨틱 HTML 태그에 대해서는 다음 시간에 더 자세히 알려드리겠습니다!

5. URL 구조와 경로명

웹 페이지의 URL 구조와 경로명을 명확하게 설정하세요.
의미있는 키워드를 사용하고, 각 페이지의 주제를 반영하도록 구성하세요.
검색 엔진은 URL에 포함된 정보도 페이지의 내용과 연관시켜 검색 결과에 영향을 미칩니다.

6. 반응형 디자인과 모바일 친화성

모바일 친화적인 디자인과 반응형 디자인을 활용하여 다양한 기기와 화면 크기에 대응하세요.
모바일 친화성은 검색 엔진 랭킹에도 영향을 미치며,
Google과 같은 검색 엔진은 모바일 버전을 우선적으로 색인하는 경향이 있습니다.

SEO 를 고려한 HTML 구조를 구축하면 웹 페이지가 검색 엔진에서 높은 가시성을 얻을 수 있습니다.
적절한 태그 사용, 메타데이터 활용, 이미지 태그와 Alt 속성, 시맨틱 태그, URL 구조, 반응형 디자인 등을 고려하여
웹 페이지의 구조를 설계하세요.
이렇게 함으로써 검색 엔진에서 웹 페이지가 더 잘 인식되고 랭킹이 올라가게 됩니다.

'Frontend > HTML' 카테고리의 다른 글

[HTML] HTML 구조: 웹 페이지의 기반 (0)	2023.08.14
Visual Studio Code(VSCode) 설치 방법 안내 (0)	2023.08.10