본문 바로가기
소소한 정보

[티스토리] 블로그 구글 검색 SEO 최적화 하기 (이미지 alt 텍스트 설정)

by 당당한 흑곰 2023. 3. 23.
반응형

 


안녕하세요 흑곰입니다!

 

티스토리 블로그를 운영하시면서 alt 텍스트라는 것을 들어보셨을 텐데요.

오늘은 alt 텍스트는 무엇이며 왜 설정을 하는것이 좋은지 알려드리겠습니다.


 


내용 요약

  1. 이미지를 클릭 하고 톱니 바퀴 아이콘을 누른다.
  2. 대체 텍스트를 입력하고 확인 버튼을 누른다.

 

 

 

1. SEO, 대체 텍스트(alt text)란?

 

티스토리 블로그를 작성하고 운영해 오면서 구글 서치콘솔이나 네이버 서치어드바이저 등

외부에서 검색을 할 수 있게 많은 노력들을 많이 하셨을겁니다.

그렇게 찾아보다 보면 'SEO 최적화' 라는 단어를 많이 들어보셨을 텐데요.

 


SEO - 검색엔진 최적화 (Search Engine Optimization) 입니다.

 

SEO 검색엔진 최적화는 우리가 작성하는 웹 문서를 구글이나 네이버의 검색엔진이 보다 빠르고 효과적으로 콘텐츠를 이해하고 제공하도록 돕는 것 입니다.

 

SEO를 최적하 하는 방법은 인터넷에 여러가지 항목이 나와있지만 오늘은 SEO 최적화하는 방법중 이미지 대체 텍스트 (alt text)에 대해 알아보고 티스토리 블로그에서 적용하는 방법을 알아보겠습니다.

 


대체 텍스트(alt text) - 웹문서 안의 이미지가 누락이 되었을 때 대체 되는 텍스트

대체 텍스트, alt 텍스트, alt text 는 웹문서를 작성하며 첨부하는 이미지에 적용하는 텍스트 입니다.

실제로 내용에는 보이지 않습니다. 그러나 대체 텍스트를 넣어야 하는 이유는 이미지가 누락되거나 보이지 않을때에 나타나게 됩니다.

그리고 검색엔진은 이러한 이미지의 대체 텍스트 또한 수집하고 검색하기 때문에 블로그를 포스팅할 때에는 시간을 들여서라도 넣어주는것이 검색엔진에 잘 노출되기 때문입니다.

 

 

 

2. 티스토리에서 대체 텍스트 입력하기

 

티스토리에서 대체 텍스트를 입력하는 방법은 예전에는 HTML모드에서 일일히 이미지 태그 안에 삽입을 했어야 했습니다.

하지만 이제는 간단하게 대체 텍스트를 입력할 수 있습니다. 저와 함께 간단히 대체 텍스트(alt text)를 입력하는 방법을 알아보겠습니다.

 

티스토리 블로그 글쓰기 에디터

 

1. 글쓰기 에디터에서 이미지를 첨부합니다.

이미지에 alt텍스트를 입력하기 위해서는 우선 이미지가 필요하겠죠? 티스토리 글쓰기 에디터에서 이미지를 하나 불러옵니다.

 

 

대체 텍스트 입력 아이콘

 

 

2. 이미지 상단의 톱니바퀴 아이콘을 클릭합니다.

첨부한 이미지를 클릭하면 이미지 상단에 메뉴아이콘들이 나타나게 됩니다.

여기에서 마지막에 있는 톱니바퀴 모양의 아이콘을 클릭합니다.

이 톱니 바퀴 아이콘이 대체 텍스트를 입력하는 버튼입니다.

 

이미지 설명 영역

 

아래쪽에 나타나는 '이미지를 설명해 보세요' 라고 적혀있는 부분은 caption이라는 다른 영역이니 헷갈리지 않고 구분해야합니다.

 

 

3. 대체텍스트 입력란에 원하는 대체 텍스트를 입력해 줍니다.

톱니 바퀴를 클릭하면 아래와 같이 대체텍스트 입력 팝업이 나타나게 됩니다.

 

 

이미지를 설명하는 대체 텍스트를 입력하고 확인 버튼을 클릭합니다.

 

주의하실 점은 확인 버튼을 클릭하지 않고 외부영역을 클릭하여 닫게 될 경우 대체텍스트는 적용되지 않습니다. 반드시 꼭 확인 버튼을 클릭해 주세요.

 

확인을 누르면 팝업은 닫히게 됩니다. 지금으로써는 대체텍스트가 어디에도 보이지 않습니다.

 

html 편집 모드 이미지

 

에디터의 편집모드를 HTML 모드로 변환하면 위의 이미지와 같이 "alt":"이미지를 설명하는 대체 텍스트를 입력합니다."라고 제대로 적용이 되어있는것을 확인할 수 있습니다.

추가적으로 alt텍스트 옆에 caption 부분도 확인할 수 있습니다. 대체 텍스트와 caption 영역이 구분 되어 있다는것을 확인할 수 있습니다.

 

예전처럼 HTML 모드에서 일일히 이미지를 찾아가며 추가하지 않아도 간단하게 alt텍스트를 적용할 수 있는 방법을 알아봤는데요. 여러분도 시간을 들여 열심히 작성한 포스팅이 조금이라도 더 잘 노출 될 수 있는게 좋겠죠? 약간의 시간을 더 투자해 대체텍스트를 입력해 포스팅의 유종의 미를 거둬보세요~

 

 

 


소소한 정보에는 제가 일상에서 알게된 작은 정보들을 기록해 놓는 공간입니다.

앞으로도 작지만 알짜같은 정보를 가지고 돌아오겠습니다.

 

 

아참! 여러분의 구독과 좋아요는 블로그를 운영하는데에 큰 힘이 됩니다.

구독과 좋아요를 누르고 많은 정보들을 함께 공유해요~ 


 

반응형

댓글