2023. 8. 22. 20:05ㆍ개인노트-인강
The RED 견고한 UI 설계를 위한 마크업
Part 1. HTML
02. 검색 엔진 밥상 차려주기
# 검색 엔진 밥상 차려주기 (메타 데이터 SEO)
- HTML의 궁극적인 목적 : 사용자에게 올바른 의미를 전달하기 위해서
- 잘 만들었는데 아무도 봐주지 않는다면? 웹페이지는 아무런 의미가 없다!
- HTML을 이용하면 검색엔진에 잘 노출될 수 있게 만들 수 있다.
- 평소에 잘 사용하지 않던 요소들 속성들을 잘 활용하면 검색률을 높일 수 있다.
- 글로벌 검색엔진 시장 점유율 : Google 92.54%
- 국내 검색엔진 시장 점유율 : Naver 63%(하락중), Google 30%(상승중)
## SEO에 영향을 주는 요인들
- 페이지 타이틀, 메타 디스크립션, 로딩속도, 사용자경험...
## 페이지 타이틀
- Chrome lighthouse를 활용하여 검색엔진 최적화를 점수로 확인 가능
- Chrome alexa extension을 활용하여 사이트의 랭크를 확인할 수 있다.
- 타이틀 태그는 웹페이지 탭의 이름에 적용되어 사용자 경험에도 영향을 미친다.
- 검색엔진 뿐만 아니라 접근성에도 영향을 미친다.
- 페이지 타이틀 구분자 : - or | or : 추천.
- 페이지타이틀을 javascript를 이용하여 동적으로 넣어도 괜찮다.
## Metadata - html, head
### lang
- <html lang="ko"> : 검색엔진이 특정 언어의 웹페이지를 검색할 때 도움을 주거나, 화면 낭독기 사용자들이 웹페이지를 읽을 때 어떤 음성 엔진을 선택해야 하는지 힌트를 주기도 한다.
- 구글은 lang 속성을 신뢰하지 않는다. 하지만 접근성 측면에서는 중요하다.
### charset
-<meta charset="utf-8"> : 한글 뿐만 아니라 전세계 모든 국가의 언어를 이 웹페이지에 문제없이 표시할 수 있다.
- utf-8이 표준이다.
### name="description", content
- 사용 예 : <meta name="description" content="A description of the page">
- content : name에 대한 설명을 적는다.
- name="description" : content의 값을 검색엔진의 검색결과 화면에 노출된다. 검색 결과 화면에 사이트에 대한 설명을 표시해준다.
### name="keywords", content
- 사용 예 : <meta name="keywords" content="webtoon, adult, free, coupon, ...">
- 구글 검색엔진은 이 값을 참고하지 않는다. 이유는 마켓터들이 이 keywords에 어뷰징을 하기 시작했기 때문.
### name="viewport", content
- 사용 예 : <meta name="viewport" content=width=device-width, initial-scale=1">
- 모바일 디바이스에서 이 웹페이지가 모바일에서도 볼 수 있게 최적화 되어있는지를 검색엔진에 제공한다.
큰 글씨는 페이지 title에 적은 내용. 작은 글씨는 name="description" 에 적은 설명이다.
연재, 랭킹, BL, SALE등의 정보는 구글의 자체적인 알고리즘에 의해서 사람들이 많이 클릭하는 페이지를 추려서 소개하고 있다. 그래서 우리가 편집할 수 있는 부분이 아니다.
## Metadata - 구조화된 데이터
- 국내에서는 네이버 검색엔진을 많이 사용하기 때문에 네이버에도 잘 표시되어야 한다.
### 연관채널 등록하기 - 네이버
- 네이버에서는 네이버 웹 마스터 설명 사이트에서 2가지 형식으로 구조화된 데이터를 제공해서 연관채널을 등록할 수 있도록 소개하고 있다. 1. JSON-LD 형식. 2. Microdata 형식
### 연관채널 등록하기 - 페이스북
- https://developers.facebook.com/docs/sharing/webmasters#markup
- 페이스북은 공유 디버거가 있어서 미리 어떤식으로 노출될지 확인해 볼 수 있다. https://developers.facebook.com/tools/debug/
### 연관채널 등록하기 - 트위터
- 트위터도 제공되는 포맷과 디버거가 있다.
'개인노트-인강' 카테고리의 다른 글
| 개인 노트 정리) 마크업4 - HTML 의미론 (0) | 2023.08.24 |
|---|---|
| 개인 노트 정리) 마크업3 - HTML 개요 알고리즘 이해 (0) | 2023.08.23 |
| 개인 노트 정리) 마크업1 - HTML을 어떻게 공부해야 하는가 (0) | 2023.08.18 |
| 개인 노트 정리) 시각디자인14 - 상세 정보 페이지 클론 디자인 (포토샵, 피그마) (0) | 2023.08.16 |
| 개인 노트 정리) 시각디자인13 - 인스타그램 iOS 앱 클론 디자인 (피그마) (0) | 2023.08.11 |