[img] alt 속성 #SEO

<img alt= ". . ."

`img`태그에는 alt 속성이 있다. 나는 페이지의 디테일(사용자 경험)의 문제만이라고 생각했고, 크게 중요한 속성이라고 생각하지 않았다. 하지만 `SEO`까지도 영향을 줄  수 있다는 걸 알게되어서 습관을 잘 갖춰야 되겠다고 생각이 들었고, 간단하게 정리할 겸 글을 작성함

 

💡 SEO (검색 엔진 최적화)

SEO란 정말 간단하게 구글 같은 검색 엔진에 친화적으로 사이트를 제작하는 것을 의미한다. 그럼 어떻게 최적화를 할까? 가장 쉽고 바로 적용할 수 있는 방법이 바로 메타데이터(title, description 등), 시맨틱 태그 그리고 img의 alt 속성 같은 것들을 목적에 맞게 명확하게 작성하는 것이다. 웹 크롤러가 돌아다니면서 페이지의 정보(메타데이터)를 수집하는데 그 때 해당 정보 같은 것 들이 명확하게 작성되어 있는 것과, 안되어 있는 것의 차이가 꽤 크다고 한다. 

 

시맨틱 태그

예를 들어 모든 텍스트를 `span`이나 `p`를 사용하는 것과 적절하게 `h1`, `h2` .. 등도 사용한다고 가정했을 때 사실 사용자 입장에서는 아무 차이 없다. (reset css를 적용했다고 가정)

 

그렇지만 명확하게 제목의 경우 `h1~6` 태그를 사용하면 크롤러가 제목으로 인식할 수 있고 결과적으로 SEO까지 신경쓴 셈이 된다. (+ 개발자 가독성은 덤)

 

alt 속성

이미지의 alt 속성도 마찬가지이다. 학습할 때 `alt` 속성은 그냥 이미지가 로드되지 않았을 때 대체 텍스트를 보여주는 정도로만 알고 있었지만 무슨 이미지인지에 대한 설명이 있어야 SEO에 도움이 된다. 

 

📍 정리

상황에 맞게 메타데이터를 잘 설정하여 SEO에 도움이 되도록 습관을 들이는게 중요하다. (습관이 없으면 귀찮아서 대충 작성하거나, 스킵하는 경우가 생기기 때문 => 내가 그럼)