[Tistory] 티스토리 포스팅시 이미지 alt 속성도 챙기자

티스토리에서는 포스팅할 때

[HTML 모드]가 가능하다.

모드 선택

이미지를 첨부하고 나서 [HTML 모드]로 보면

이미지가 <img> 태그로 되어 있다.

 

 

업로드한 이미지는 서버에 저장되어 [src] 속성 URL로 로딩된다.

<img> HTML 태그에는 alt 속성도 있다.

alt 속성은 alternative 약어로 이미지 대신에 보여주는 대체 문구이다.

alt 속성 예시

 

---

 음성 인식기에서 제공되거나

검색 엔진에서 이미지 정보 인식을 위해서 사용되기도 한다.

 

 

접속 환경이나 티스토리 내부 서버문제로

이미지가 제대로 로딩 못했을 때 사용된다.

alt 속성

 

 

블로거 입장에서는 SEO 최적화를 위해서 필요하다.

검색엔진에서 alt 속성으로 색인 처리를 한다고 하기에,,

포스팅시 잊지말고 챙겨주어야 할 것 같다.

출처: 구글 검색 센터

개인적으로 1000개 넘는 포스팅하면서 필요성을 못느꼇지만,,

굳이 안 할 이유도 없어서 필자도 챙기기 시작했다. 🤔

 

---

현재 티스토리에서는 [HTML 모드]가 아니어도

alt 속성 추가를 쉽게 할 수 있다.

대체 텍스트(alt) 작성

길게 작성하기 보다는

간단하면서 설명할 수 있는 내용을 권장한다.

 

 

대체 텍스트(alt 속성)과 다르게

이미지 부연 설명을 위한 [figcaption] 속성도 있다.

해당 속성은 로딩된 이미지 아래에 표시된다.

이미지 설명 외에도 출처 명시할 때도 사용된다.

[alt]와 [figcaption]

 

 

작성된 포스팅에서는 위 HTML 구조를

[크롬 개발자 도구]로도 확인할 수 있다.

크롬 개발자 예시

 

 

📌 [블로그 지수] Lighthouse 사이트 성능 측정

[블로그 지수] Lighthouse 사이트 성능 측정

 

---

📌 함께 보면 좋은 포스팅

• 로딩 화면 구현

• TOP 버튼 생성

• 구글 웹 폰트 적용

• 카테고리 URL 제거