이미지 대체 텍스트와 소셜 미디어 카드 - 코드엠샵

지난 4회에 걸친 테크니컬 SEO 미션 캠페인을 잘 수행하고 있으신가요?
일주일에 한번 짧은 시간을 내어 검색엔진과 가까워지는 방법을 연구하고 실천 해 보세요.

지금이 아닌 미루다보면, 영영 우리는 검색엔진과 가까워질 수 없을지도 모릅니다.

온라인 쇼핑몰 사이트를 제작 구축하면서, 개발자가 아닌 사이트 운영자가 테크니컬 검색엔진 작업을 진행하는 것은 쉽지 않습니다.
지금 이순간, 해야하죠.

우리가 살펴보고, 적용하고 있는 워드프레스는 코드를 몰라도 쉽게 테크니컬 SEO 작업을 진행할 수 있다는 것을 확인하실 수 있을 거예요.
그러니 업계에서는 검색엔진에 신뢰를 제대로 구현하려면  워드프레스를 해야한다는 룰이 있는거겠죠.

오늘은 벌써 5회차로 이미지 대체 텍스트에 대해 알아보려도 해요.

이미지 검색

검색 사이트에서 검색어를 입력하게 되면, 사이트 주소 이외에 이미지 검색을 할 수 있죠.
이미지 검색은 사이트에 등록한 이미지의 파일이 조회되는 것을 의미 합니다.

이미지 검색 정보

저는 마음에 드는 물건 보았으나, 상품명을 알고 싶을 때,
멋진 이미지를 보고, 해당 장소가 궁금할 때 이미지 검색을 통해 해당 정보를 찾고 있는데

운영자님은 어떠신가요?

구글이미지검색화면

이제는 텍스트 검색 이외에도 이미지 검색량이 높아지고 있어, 반드시 이미지가 검색엔진에 잘 노출될 수 있도록 기본기를 다져야 합니다.

상품 이미지, 컨텐츠 이미지 파일명에 신경을 써야합니다.

이미지 파일명은 숫자.jpg , 이상한 문자열.jpg, 의미없는 파일명 등을  등록해서는 안됩니다.

관련한 지식이 없는  퍼블리셔, 디자이너들이 상품 이미지를 제작, 등록하는 경우가 많으니 사이트 운영자께서는 이미지 파일명을 지정 해 주거나, 작업자에게 가이드를 전달하여 이미지 검색이 잘되도록 해 주세요.

그렇다면 오늘이 진짜 이야기 2. ‘이미지 대체 텍스트’에 대해 이야기를 건네볼께요.

이미지 대체 텍스트

이미지 텍스트는 이미지가 표시되지 못하는 환경에서 이미지를 정보를 알려주는 것으로, 인터넷 환경 등의 이유로 이미지 로딩 속도가 느린 경우 검색 사용자에게 이미지 내용을 텍스트로 알려줄 수 있으며,

SEO측면에서는 이미지 정보를 검색 엔진에 전달하는 역할을 합니다.
즉, 텍스트 이미지는 읽을 수 있는 텍스트를 의미 합니다.

또한 시각 장애를 가진 사용자들이 전용 컴퓨터로 해당 정보를 접근 했을 때 텍스트를 음성으로 전달 해 주기도 하죠.

이미지 텍스트는 검색 엔진이 이미지의 내용을 이해하고 인덱싱 하는데 도움이 되는 텍스트 입니다.

이미지 텍스트는 이미지의 alt 태그, 이미지의 메타 데이터, 이미지에 포함된 텍스트로 구성되어 있습니다.

그렇다면, 워드프레스에서 이미지 등록 시 어떤 방법으로 해당 정보를 등록할 수 있는지 살펴보도록 할께요.
워드프레스 기반하의 상품 등록 및 블로그 등록 시 이미지를 등록하는 경우 아래 페이지와 같은 영역을 확인하실 수 있죠.

파일 업로드 시 1번 제목에 파일명이 그대로 입력됩니다. 보통의 경우 이미지 등록 후에 별도로 기재를 하지 않기 때문에 대부분의 이미지 파일에는 1번 영역의 제목명만 들어가게 되죠.

파일명 제목

우리는 2번 영역의 대체 텍스트를 입력해야합니다. -> 이 부분이 alt 태그 영역 입니다.
이 영역은 이미지의 내용을 짧고 정확하게 설명해야하며, 키워드를 포함하는 것이 좋습니다.

워드프레스 대체 텍스트 영역

– alt 태그는 이미지의 내용을 정확하게 설명해야 합니다.

– alt 태그는 짧고 간결해야 합니다.

– alt 태그는 키워드를 포함해야 합니다.

– alt 태그는 중복되지 않아야 합니다.

워드프레스 이미지 검색 대체 텍스트
그렇다면, 3,4번의 영역은 어떤 영역일까요?

3번 캡션 영역은 사용자가 프론트 단에서 정보를 볼때 이미지 하단에 나오는 텍스트를 의미 합니다.
캡션 영역에 이미지 제목을 기재할 수 있지만, 캡션 텍스트를 기재 시, 테마에 따라 이미지 사이즈가 조금 변경 되기도 하니, 해당 부분은 확인 후 이용 해 주세요.

이미지 캡션 텍스트

4번 설명은 2번 대체 텍스트 (alt 태그) 이외에 추가로 입력할 수 있는 텍스트 영역 입니다. alt 태그에서 기재하지 못했던 추가 정보를 기재할 수 있지만, 설명 영역은 검색엔진이 이미지의 내용을 이해하는데 필수적이지는 않습니다.

따라서 우리에게 가장 중요한 영역은 2번 alt 태그를 지정하는 것이죠!

소셜 미디어 카드 – 페이스북 오픈 그래프 + 트위터 카드

페이스북, 트위터, 카카오톡 등 소셜 미디어에 웹페이지 링크를 공유할 때 미리보기 형태의 이미지 카드로, 이미지, 제목, 간단한 설명이 노출되는 것을 말합니다.
오픈 그래프 및 트위터 카드를 설정하지 않으면, 검색엔진은 웹페이지의 기본 정보로 노출 됩니다.

컨텐츠에 충실한 타이틀 태그와 메타스크립션 이외에 클릭을 부르는 소셜 미디어 카드가 등록되어 있다면, 아무래도 클릭율이 올라가겠죠.
상품이던, 블로그던, 모든 컨텐츠는 고객들의 클릭을 받아야하며, 클릭 안에서 구매 전환이 이루어질 수 있어야 최고의 성과를 누릴 수 있습니다.
그러려면, 클릭을 부르는 이미지, 컨텐츠 제목, 설명이 있어야겠죠.

오픈 그래프 설정은 Yoast SEO 플러그인에서 설정을 진행할 수 있습니다.

테크니컬 SEO 4회차 타이틀 태그와 사이트 설명 등록하는 방법 기억하시죠?
Yoast SEO 플러그인의 상단탭 Social 영역에서 페이스북 카드와 트위터 카드를 등록 이용할 수 있습니다.

보통은 동일한 제목, 설명, 이미지를 이용하며, 트위터, 페이스북 이벤트를 개별적으로 진행하시는 경우 별도로 등록 운영하실 수 있습니다.

오픈 그래프 설정 방법

워드프레스에서 소셜미디어카드 적용

소셜 미디어 페이스북 오픈 그래프 적용 시 결과

소셜미디어카드적용사례

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다