독자가 콘텐츠를 보고 싶게 만들기위해 가장 신경써야 하는 것은 무엇일까요? 만약 블로그를 운영하고 있다면 정답은 고민할 것 없이 ‘썸네일’입니다. 그렇다면 썸네일은 어떻게 만들고, 어떻게 활용해야 할까요?

오늘은 제작 과정과 Alt Text 등 블로그 썸네일에 대해 알아봅니다.

💡썸네일: 비디오, 이미지, 텍스트 등의 콘텐츠를 요약하거나 설명하는 작은 사이즈의 대표 이미지

왜 중요할까?

간혹 구글에 무언가를 검색했을 때 이미지 결과가 가장 먼저 뜬 적이 있을 것입니다. 실제로 구글 검색 결과 페이지(SERP) 중 38%가 이미지 결과를 상단에 노출시킵니다. 때로는 양질의 텍스트보다 좋은 이미지 하나가 더 효과적일 수 있는 것이죠.

더해서 이미지로 접근하는 것은 시각적 콘텐츠를 선호하는 MZ세대를 사로잡는 것에도 효과적입니다. 따라서 유튜브와 같은 동영상 콘텐츠가 아니더라도 블로그 썸네일처럼 시각적으로 사용자가 원하는 정보를 보여줄 수 있다면 더 많은 사용자의 방문을 유도할 수 있습니다.

사이즈는 어떻게?

워드프레스, 티스토리, 네이버 블로그는 각각 다른 블로그 썸네일 사이즈를 가지고 있기 때문에, 블로그 썸네일 제작에 앞서 자신이 이용하는 플랫폼에 적절한 썸네일 사이즈를 확인해야 합니다.

✅워드프레스
워드프레스는 글의 가장 상단에 나타나는 특성 이미지가 블로그 썸네일로 사용됩니다. 권장하는 사이즈는  1200px x 628px로, 워드프레스의 다양한 테마와 레이아웃에 적절히 부합하며, SNS와 같은 타 플랫폼 공유에도 용이하기 때문입니다. 그러나 사용하는 테마, 글의 특성에 따라 썸네일 사이즈를 달리 할 수 있습니다.

✅티스토리 
티스토리의 경우 다양한 스킨, 환경에 따라 썸네일 비율이 달라집니다. HTML 코드를 수정해 정사각형으로 변형도 가능하죠.

✅네이버 블로그 

네이버 블로그는 데스크탑과 모바일 등 사용하는 플랫폼에 따라 비율이 달라집니다. PC버전은 3:2의 비율, 모바일은 1:1의 비율이 자동으로 적용되며, 공유하는 플랫폼에 따라 16:9의 비율이 적용되기도 합니다. 따라서 이상적인 네이버 블로그 썸네일은 16:9의 비율로 제작한 뒤, 중요 내용을 1:1 비율안에 들어가도록 디자인하는 것이라고 할 수 있습니다.

업로드는 어떻게?

썸네일 업로드 방법은 CMS 별로 차이가 있습니다. 그러나 모두 손쉽게 익숙해질 수 있죠.

✅워드프레스

워드프레스의 경우 썸네일로 설정하고자 하는 이미지를 미디어 라이브러리에 업로드 한 후, 우측 상단의 설정을 클릭합니다. 설정 패널 내 특성 이미지 설정을 통해 미디어 라이브러리 창을 찾을 수 있고, 이곳에서 원하는 이미지를 선택한 뒤 우측 하단의 특성 이미지 설정을 클릭하면 됩니다.

✅티스토리

티스토리는 사용자가 썸네일 지정을 하지 않을 경우 가장 상단에 있는 이미지를 썸네일로 자동 지정합니다. 그러나 따로 썸네일을 지정하는 것도 가능합니다. 

글 작성완료 버튼을 누르면 우측 상단에 티스토리가 임의로 지정한 썸네일을 발견할 수 있습니다. 이를 제거하고 대표 이미지 추가 버튼을 눌러 제작한 썸네일을 컴퓨터에서 업로드하면 원하는 썸네일을 적용할 수 있습니다.

✅네이버 블로그

네이버 역시 티스토리와 마찬가지로 썸네일 지정을 하지 않을 경우 가장 상단에 위치한 이미지가 썸네일이 됩니다. 

특정 이미지를 블로그 썸네일로 지정하고 싶은 경우 사진 왼쪽 상단의 대표 버튼이나 우측 상단의 라이브러리 버튼을 통해 라이브러리로 이동 후 라이브러리에서 원하는 사진을 클릭하면 해당 이미지가 자동으로 대표 이미지로 선택됩니다.

Alt Text?

💡Alt Text: Alternative Text의 줄임말로, 웹페이지의 이미지가 로딩되지 않을 경우 해당 이미지를 풀어 설명하기 위해 나타나는 텍스트

Alt Text는 시각장애를 가진 사용자를 위해 만들어졌으며, 나아가 검색엔진이 해당 페이지를 크롤링하고 순위를 매기는 일에 이용되기도 합니다. 실제로 Alt Text는 YOAST 플러그인의 SEO Analysis 평가 요소 중 하나이기도 하죠. 따라서 적절한 Alt Text는 해당 페이지 SEO순위를 높이는데 도움을 줄 수 있습니다. 

그렇다면 Alt Text는 어떻게 작성해야 할까요? Alt Text의 경우 CMS 별로 작성 방법에 약간의 차이가 있습니다. 네이버는 Alt Text를 지원하지 않음으로, 네이버를 제외한 워드프레스와 티스토리의 Alt Text 작성 방법을 알아보겠습니다.

Alt Text 작성 방법

먼저 워드프레스는 두 가지 방법으로 Alt Text를 작성할 수 있습니다. 블로그 글 작성시 바로 Alt Text를 작성할 경우 이미지 업로드 후 우측 설정패널에서 블록을 선택하면 패널 하단에 Alt Text를 작성하는 칸을 발견할 수 있습니다.

다른 방법은 미디어 라이브러리에서 작성하는 방법입니다. 미디어 라이브러리에서 이미지 클릭 후 우측 첨부 상세 칸에 위치한 대체 텍스트 란에 작성하면 됩니다.

티스토리의 경우 이미지 업로드 후 이미지를 클릭하면 나타나는 편집기 우측의 사진 아이콘을 클릭하면 Alt Text 작성이 가능합니다.

Alt Text 작성 팁

그러나 모든 Alt Text가 효과적인 것은 아닙니다. Alt Text를 효과적으로 사용하기 위해서는 몇가지 주의사항을 기억해야 합니다.

썸네일, 쉽고 큰 효과

썸네일의 유무가 야기하는 차이는 극명합니다. 더불어 썸네일은 효과에 비해 비교적 쉽게 적용할 수 있죠. 블로그 방문을 늘리기 위해 고민하는 분이라면 아직 썸네일을 사용하지 않는 것은 아닌지, 썸네일을 사용하고 있다면 CMS에 맞게 효율적으로 사용하고 있는지 점검할 필요가 있습니다.

👉 원문 링크 : 블로그 썸네일의 모든 것

자료출처 : [HOW TO 마케팅] 블로그 썸네일, 얼마나 알고 있나요? - DIGITAL iNSIGHT 디지털 인사이트 (ditoday.com)