brunch

매거진 넥스트 모바일 이야기

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Mobiinside Jul 25. 2023

블로그 썸네일가이드:제작, Alt Text, 업로드방법

콘텐츠를 독자들이 보고싶게끔 하는 최고의 툴은 바로 ‘썸네일’ 입니다. 썸네일이란 비디오, 이미지, 텍스트 등의 콘텐츠를 요약하거나 설명하는 작은 사이즈의 대표 이미지를 뜻합니다.

블로그를 작성하는 플랫폼에 따라 제작 요건과 업로드 방식이 달라질 수 있는데요, 이번 포스팅에서는 블로그 썸네일의 모든 것, 제작 과정과 Alt Text, 그리고 각 CMS별 썸네일 업로드 방법까지 소개해 드리도록 하겠습니다.

목차

1. 블로그 썸네일의 중요성
2. 블로그 썸네일 제작 사이즈
3. Alt Text
4. Alt Text 작성 팁
5. CMS별 Alt Text 작성법
6. CMS별 블로그 썸네일 업로드하는 법

1. 블로그 썸네일의 중요성

구글에 무언가를 검색했을 때, 이미지 결과가 가장 먼저 뜬 경우를 한번 쯤 보셨을 것 입니다. 구글 검색결과 페이지 (SERP) 중 38%가 이미지 결과를 가장 상단에 노출시킨다고 합니다. 즉, 때로는 좋은 블로그 썸네일이 어떤 텍스트 보다도 효과적일 수 있습니다. 이와 관련된 Alt Text에 대해서는 하단에서 더 자세히 다루도록 하겠습니다.

또한 시각적 콘텐츠를 선호하는 MZ세대에게 블로그 썸네일은 클릭을 좌우하는 결정적 요소입니다. 따라서, 유튜브와 같은 동영상 콘텐츠가 아닌 블로그 썸네일의 경우에도 이용자들이 원하는 정보를 포함한다면 더 많은 이용자들에게 노출될 수 있을 것입니다.

2. 블로그 썸네일 제작 사이즈

워드프레스, 티스토리, 네이버 블로그는 각자 다른 블로그 썸네일 사이즈를 가지고 있습니다.

워드프레스 – 먼저, 워드프레스의 경우 글 맨 위에 나타나는 특성 이미지가 블로그 썸네일로 사용됩니다 권장하는 블로그 썸네일 사이즈는 1200px x 628px입니다. 그 이유는 워드프레스의 다양한 테마와 레이아웃에 잘 어울리며, SNS와 같은 타 플랫폼에 공유할 때 적절하기 때문입니다. 하지만 사용하시는 테마나, 글의 특성에 따라 다양한 사이즈의 썸네일을 업로드 할 수 있습니다.

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

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

네이버 블로그 썸네일의 비율

3. Alt text

Alt Text (Alternative Text)란, 웹페이지의 이미지가 로딩되지 않을 경우 해당 이미지를 풀어 설명하기 위해 나타나는 텍스트를 의미합니다. 시각장애를 가진 사용자들을 위해 만들어졌으며, 나아가 검색엔진이 해당 페이지를 크롤링하고 순위 매기는 데 이용되기도 합니다. 실제로 Alt Text는 YOAST 플러그인의 SEO Analysis 평가 요소 중 하나 입니다. 따라서, 적절한 Alt Text는 해당 페이지 SEO순위를 높이는 데 도움을 줄 수 있습니다.

Alt Text 작성 팁

위 이미지의 Alt Text를 예시로 들어보겠습니다.

이미지를 구체적으로 묘사합니다. Ex. (글쓰는 사람) -> (노트북으로 블로그 콘텐츠를 작성하는 사람)

블로그 콘텐츠와 연관성이 있도록 맥락을 부여 합니다. 해당 콘텐츠의 메인 키워드는 ‘블로그 썸네일’이기 때문에, 이러한 맥락에 맞추어 사진을 설명합니다. Ex. (노트북으로 글을 쓰는 사람) -> (노트북으로 블로그 썸네일을 업로드 하는 사람)

Alt Text는 125자 이내로 작성합니다.

~의 이미지, ~하는 사진 은 생략합니다. 구글은 이미지를 처리한다는 사실을 알기 때문에, 해당 어구를 붙이지 않아도 됩니다. Ex. (노트북으로 블로그 썸네일을 업로드 하는 사람의 이미지) -> (노트북으로 블로그 썸네일을 업로드 하는 사람)

글의 타깃 키워드를 포함시키되, 적당히 사용합니다. 글의 메인 키워드를 포함시키는 것은 좋지만, 모든 이미지에 여러 키워드를 끼워넣으려 한다면 페널티를 받을 염려도 있습니다. Ex. (노트북으로 워드프레스에서 블로그 썸네일을 제작하고 CMS별 Alt Text를 작성하는 사람) -> (노트북으로 블로그 썸네일을 제작하고 업로드하는 사람)

모든 이미지에 Alt Text를 작성할 필요는 없습니다. 이미지가 블로그 글의 맥락과 상관없이 오로지 장식을 위한 것이라면, Alt Text를 작성하지 않아도 됩니다.

출처: HubSpot

CMS별 Alt Text 작성법

워드프레스 – 워드프레스에서는 두가지 방법으로 Alt Text를 작성할 수 있습니다. 블로그 글 작성시 바로 Alt Text를 작성하고 싶다면, 이미지를 업로드 한 뒤 클릭합니다. 우측 설정패널에서 블록을 선택하면, 패널 하단에 Alt Text를 작성하는 칸이 있습니다.

미디어 라이브러리에서도 Alt Text를 작성할 수 있습니다. 미디어 라이브러리에서 이미지를 클릭하면, 우측에 첨부 상세 칸에 대체 텍스트란이 있습니다. 이곳에 Alt Text 내용을 적으면 됩니다.

티스토리 – Alt Text를 작성하기 위해, 이미지를 업로드합니다. 해당 이미지를 클릭하면, 상단에 편집기가 뜹니다. 해당 편집기 가장 우측에 사진 아이콘 (대체 텍스트 작성) 을 클릭합니다. 이곳에 Alt Text 내용을 적으면 됩니다.

네이버 – 네이버는 Alt Text 작성 기능을 따로 제공하지 않습니다.

4. CMS별 블로그 썸네일 업로드하는 법

워드프레스

먼저 워드프레스에서 블로그 썸네일 (특성 이미지)를 설정하려면, 해당 이미지가 미디어 라이브러리에 업로드 되어있어야 합니다. 미디어 라이브러리란, 워드프레스 블로그 내의 모든 이미지, 오디오, 동영상, 문서등을 저장하고 관리할 수 있는 보관소 입니다.

썸네일로 설정하고자 하는 이미지를 미디어 라이브러리에 업로드 합니다.

블로그 글 우측 상단에 설정을 클릭합니다. 설정 패널에서 하단에 특성 이미지를 클릭합니다. 특성 이미지 설정을 클릭하면, 미디어 라이브러리 창이 뜹니다. 미디어 라이브러리에서 원하는 이미지를 선택한 뒤, 우측 하단에 특성 이미지 설정을 클릭합니다.

티스토리

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

글 작성완료 버튼을 누릅니다. 우측 상단에 티스토리가 임의로 지정한 썸네일이 보입니다.
– 버튼을 누릅니다. + 대표 이미지 추가 버튼을 누른 뒤, 제작한 썸네일을 컴퓨터에서 업로드합니다.