김 예빈 
쇼핑몰이나 제품 소개 콘텐츠를 만들면서 절대로 해서는 안되는 일이 바로 사이트 전체를 하나의 통이미지로 만드는 일이라고 할 수 있다. 네이버를 포함해서 대부분의 검색엔진은 통이미지로 만들어진 제품 상세 페이지의 경우에는 페이지의 토픽을 파악할 수 없기 때문에 대게의 경우 이런 통이미지 페이지가 검색 결과에서 좋은 순위를 얻을 수가 없기 때문이다. 검색엔진은 디자인이 훌륭하지는 않지만 페이지의 토픽을 텍스트로 친절하게 설명한 웹사이트를 미적으로 예쁘지만 통이미지로 만들어진 웹페이지보다 더 높게 평가한다.
여기까지가 일반적으로 우리가 기억해야할 내용이다. 하지만 미적 요소, 편의성 등의 여러 이유로 웹사이트를 텍스트가 아닌 통이미지 혹은 몇 개의 이미지로 구성하는 경우를 우리는 종종보게 된다. 이런 상황에서 할 수 있는 SEO에는 어떤 것이 있을까? 결코 추천할 수는 없지만, 어쩔 수 없는 상황이라면 이런 상황에서 우리가 할 수 있는 차선의 SEO 4가지가 무엇인지 알아보자.
1. 이미지를 텍스트화 한다.
기대한 답이 아닐지 모르지만 통이미지에 박혀있는 텍스트 부분은 텍스트로 작성해야 한다. 이미지 내용을 아직은 구글 및 다른 검색엔진이 그 내용까지 완벽하게 이해할 수 없으므로 이미지를 가능한 한 텍스트화 하는 것이 필요하다. 궁극적으로 나아가야하는 방향이 통 이미지가 아닌 텍스트임을 기억하자. 하지만 이미지속의 텍스트를 모두 텍스트화 하는 것이 불가능하다면 가능한 부분까지라도 텍스트화 해야한다.
2. 이미지에 캡션을 단다.
통이미지의 캡션 정보를 충실하게 달아줘야한다. 이렇게 달아준 캡션 정보는 이미지의 아래쪽에 설명글 처럼 나타나게 되는데, 이렇게 달아 놓은 텍스트가 통이미지로 만든 웹사이트의 단점을 다소나마 해결해줄 수 있다. 이때 달아주는 캡션에는 사실 글자 수 제한이나 폰트 사이즈 등 제한이 없다. 웹페이지 기획자의 입장에서는 유저 경험을 크게 해치지 않는 범위에서 최대한 자세한 설명을 캡션에 넣어 주자.
캡션 예시:
3. 이미지에 Alt text를 작성한다.
대체 텍스트(Alt text)는 시각장애인이나 이미지를 로딩할 수 없는 경우 설정한 대체 텍스트가 보이게 되어 어떤 이미지인지 인지할 수 있도록 도와주는 텍스트 정보다. 원래는 보이스 브라우저를 위한 설정이지만 검색엔진에게 웹페이지의 내용을 이해시키는 역할을 한다는 의미에서 SEO에서 중요하게 여기는 태그다. 통이미지로 만들어진 웹사이트에서 부족한 SEO를 보완하는 의미로 Alt text를 적절하게 사용하는 것은 상당히 도움이 된다. 하지만, 이런 때에도 최소한 지켜야 할 몇가지 사항을 정리해본다.
- – 통이미지 안에 담긴 내용을 소상하게 하지만 요약하여 작성할 것
- – 글의 길이는 125자 전후로 작성하자.
- – ~하는 이미지, ~사진과 같은 형식의 표현을 피하고 이미지 속의 토픽을 설명한다.
- – 키워드를 나열하는 방식으로 대체 텍스트를 작성하지 말아야한다. (예: 검은색컵, 컵, 텀플러, 보온텀블러 …)
- – 웹페이지에 있는 모든 이미지에 대체 텍스트를 넣지 말고, 웹페이지의 주요 토픽을 담은 이미지에만 대체 텍스트를 설정하자.
alt text 설정 예시:
<img src="https://www.ascentkorea.com/blog/image-sample.png " alt="한번 충전으로 오래 사용이 가능하고, 설치가 쉽고 에너지 효율이 좋은 A 상품">4. 소셜 미디어에서의 공유에 대응할 OG태그와 card태그를 설정한다.
통 이미지로 만들어진 상세페이지가 네이버 블로그나 카카오톡 혹은 페이스북이나 트위터에서 공유될 때 어떤 모습으로 공유되는가에 따라서 공유되는 속도와 범위가 크게 영향받는다. 이를 위해서 설정하는 것이 바로 오픈 그래프 태그나 트워트 카드 태그라고 불리는 소셜 태그다.
meta property="og:title" content=" 콘텐츠 제목 "
meta property="og:url" content=" 웹페이지 url "
meta property="og:type" content=" 웹페이지 type "
meta property="og:image" content=" 소셜미디어에서 표시되는 이미지 URL"
meta property="og:site_name" content=" 웹사이트 이름 "
meta property="og:description" content=" 웹페이지 설명 "meta name="twitter:card" content=" 트위터 카드 타입 "
meta name="twitter:title" content=" 콘텐츠 제목 "
meta name="twitter:description" content=" 웹페이지 설명 "
meta name="twitter:image" content=" 소셜미디어에서 표시되는 이미지 URL"요약
자 다시한번 말하지만, 통이미지의 상세페이지를 만들어 놓고 검색 결과 페이지에서 노출이 잘 되기를 기대하지는 말자. 하지만 아무것도 할 수 없는 상태라면 위에서 소개한 4가지 방식을 통해서 검색엔진에게 웹페이지가 담고 있는 토픽을 이해시키려고 노력해보자.
통이미지로 만들어진 상세페이지가 양산되는 가장 큰 이유는 이렇게 통이미지를 쓰는 것이 페이지 제작에 드는 시간을 줄이고 이쁘게 말들 수 있다는 잘못된 믿음 때문이다. 하지만, 이렇게 만든 상세페이지가 아무리 이쁘고, 적은 비용이 들었다고 해도 잠재 고객을 전혀 유입시키지 못한다면 무슨 의미가 있을까? 물론 애초에 광고의 랜딩페이지로만 쓸 생각이라면 이렇게 만들어도 된다. 그러나 검색을 통해 지속적인 트래픽을 만들어내고 싶었다면 통이미지 상세페이지는 절대 값싼 선택이 아니다.
