웹 표준, Semantic HTML, SEO

티스토리 뷰

코드스테이츠 부트캠프

웹 표준, Semantic HTML, SEO

als982001 2023. 3. 1. 21:57

1. 웹 표준

웹: 월드 와이드 웹(World Wide Web, WWW)의 약자로 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간.
인터넷: 컴퓨터로 연결하여 TCP/IP라는 통신 프로토콜을 이용해 정보를 주고 받는 컴퓨터 네트워크
웹 표준: W3C(World Wide Web Consortium)에서 권고하는 '웹이서 표준적으로 사용되는 기술이나 규칙'. 어떤 운영체제나 브라우저에서라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있으며, HTML, CSS, JavaScript 등의 기술을 다룸.
웹 표준의 장점
1. 유지 보수가 용이: 구조, 표현, 동작 등의 영역이 분리되며 유지 보수가 용이해지며 코드가 경량화
2. 웹 호환성 확보: 웹 브라우저의 종류, 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오게 할 수 있음
3. 검색 효율성 증대: 검색 엔진에서 더 높은 우선 순위로 노출될 수 있음
4. 웹 접근성 향상

2. Semantic HTML

Semantic HTML: HTML이 단순한 구조를 넘어 의미를 갖게 하는 것
Semantic HTML의 필요성
1. 개발자간 소통: 시맨틱한 요소를 이용한다면 다른 부가적인 설명이 없더라도 각각의 요소가 무엇인지 알 수 있다.
2. 검색 효율성: 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. 이 때, 시맨틱 요소를 이용한다면 각 요소의 중요도에 차이를 줄 수 있게 된다.
3. 웹 접근성
시맨틱 요소의 종류
- <header>: 페이지나 요소의 최상단에 위치하는 머릿말
- <nav>: 메뉴, 목차 등에 사용되는 요소
- <aside>: 문서와 연관은 있지만, 직접적인 연관은 없는 내용
- <main>: 문서의 메인이 되는 주요 콘텐츠
- <article>: 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분
- <section>: 문서의 독립적인 구획. 딱히 적합한 의미의 요소가 없을 때 사용.
- <hgroup>: 제목을 표시할 때 사용하는 요소. <h1> ~ <h6>
- <footer>: 페이지나 요소의 최하단에 위치하는 꼬릿말 역할

3. SEO(Search Engine Optimization)

검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화하는 작업. 이를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게 함.
On-Page SEO: 페이지 내부에서 진행할 수 있는 SEO. 제목, 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용
Off-Page SEO: 웹 사이트 외부에서 이루어지는 SEO. 소셜 미디어 홍보, 백링크 등을 이용하는 방법으로 웹 페이지 내용이나 구조와 관계 없음.
<title> 요소
- 검색 결과창에서 제목에 해당.
- <head> 요소의 자식 요소로 작성
- 작성한 내용에 따라 검색 후 유입까지 유도할 수 있음
- 핵심 키워드가 포함되면 상위에 노출될 확률이 높음. 하지만 같은 키워드를 반복하면 검색 시 불이익을 받을 수 있음.
<meta> 요소
- 메타 데이터를 담는 요소.(메타 데이터: 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터)
- <head> 요소의 자식 요소로 작성
- SEO를 위한 meta 요소
  - description: 콘텐츠에 대한 간략한 설명.
  - keywords: 웹 페이지의 관련 키워드를 나열
  - author: 콘텐츠 제작자
- 오픈 그래프(open graph): property 속성을 사용하는 경우를 의미. 각 속성값 앞에는 "og"가 붙음.
  - og:url : 페이지 표준 URL
  - og:site_name : 사이트 이름
  - og:title : 콘텐츠 제목
  - og:dscription : 콘텐츠에 대한 간단한 설명
  - op:image : 미리보기로 표시될 이미지
  - og:type : 콘텐츠 미디어의 유형. 기본값은 website이며 video, music 등의 유형을 표시할 수 있음
  - og:locale : 리소스의 언어로 기본값은 en_US

<meta name="속성값" content="내용" />
<meta property="속성값" content="내용" />

'코드스테이츠 부트캠프' 카테고리의 다른 글

Cookie, Session, Token, OAuth 간단한 흐름 (0)	2023.03.09
웹 접근성, WAI-ARIA (0)	2023.03.02
Redux (0)	2023.02.24
상태관리 (0)	2023.02.23
CDD(Component Driven Development), Styled Component (0)	2023.02.20

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

기록창고

티스토리 뷰

웹 표준, Semantic HTML, SEO

1. 웹 표준

2. Semantic HTML

3. SEO(Search Engine Optimization)

'코드스테이츠 부트캠프' 카테고리의 다른 글

티스토리툴바