[HTML] SEO와 시멘틱 마크업

일을 하면서 SEO 그리고 시멘틱 마크업이라는 이야기를 많이 듣게 된다.

 

그렇다면 SEO와 시멘틱 마크업은 대체 무엇일까?

1. SEO란?

한국어로는 검색엔진 최적화, 영어로는 Serch Engine Oprimization을 줄여서 SEO라고 한다.

그렇다면 검색엔진 최적화를 위해서 우리는 어떻게 해야될까?

시멘틱 마크업을 통한 홈페이지 구조를 개선해야한다.
세계적으로 유명한 검색엔진인 google은 웹페이지 크롤링에 있어서 HTML마크업을 중요하게 고려한다고 한다.
그중에서도 title과 h태그로 쓰여지는 제목이 페이지의 주제를 알려주는 태그가 될수 있다고 한다.

크롤링 : 웹상을 돌아다니면서 정보를 수집하는 행위

근데 사실 SEO라는것이 일부 검색엔진에서는 크게 작용하지 못하는경우가 있다.
우리나라에서 많이 사용하는 네이버와 세계적으로 많이 사용하는 구글은 검색엔진의 검색방법이 다르기에
네이버 검색을 이용하는 경우에는 SEO가 크게 영향을 미치지 못할수 있다고도 한다.

 

자 그럼 위의 내용중 시멘틱 마크업을 알아보고자 한다.

2. 시멘틱 마크업이란?

시멘틱 마크업은 Semantic(의미론적인) + Markup(HTML 태그로 문서를 작성하는것)의 합성어이다.
그렇다면 이름만 보고도 유추할수 있듯 의미론적인 HTML태그를 작성한다? 그렇다 HTML 태그에는
각각의 의미가 있다. 그래서 그 태그가 사용되는 용도에 맞게 의미를 가지고 사용하는거라고 생각하면 좋을것같다.

예시

• 헤더/푸터에 header와 footer 사용
• 메인 컨텐츠에 main과 section 사용
• 독립적인 컨텐츠에 article 사용
• 최상위 제목으로 사용
• 순서가 없는 목록으로 ul과 li 사용
• 내비게이션에 nav사용

이런식으로 각각 의미에 맞는 태그를 사용하는것이다.

 

그러면 그냥 div로 만드는것도 편한데 저렇게 까지 하는 이유가 뭘까?

위에 말했던 SEO에 유리해지는 것도 있지만 협업을 할때
나말고 다른 개발자에게 좀더 가독성 있는 코드를 보여줄수 있을것이다.

 

부트캠프 시절 첫주차에 옆자리에 있던 PF친구가 했던이야기가 있다.
이거 왜 전부다 div랑 flex에요? 왜 이렇게 만들었어요?
음.. 그게 왜 문제지? 라고 생각했었는데

나중에 그 친구랑 친해지고 같이 팀플을 하면서 그 의미를 알게 되었다.

결국 그 이야기는 시멘틱 마크업에 관련된 이야기 였단걸..

 

시멘틱 마크업 그리고 SEO, 프론트엔드 개발자와 퍼블리셔에겐 숙명같은 존재인것같다.