이미지 검색엔진최적화의 중요성

아래의 저희의 다른 게시글에서 설명하였습니다.

이미지 검색엔진최적화의 중요성(필요성)

워드프레스 이미지 메타 데이터들의 중요성

(발췌 :  Image Meta Data 101 – Title, Caption, Alt Text, and Description )

많은 초보자는 종종 이미지 를 자신의 게시물에 업로드 합니다. 그러나 이것만으로 검색 엔진, 사용자 및 웹 사이트 관리에 최적화된 이미지는 아닙니다.

메타 데이터는 이미지에 추가 할 수있는 추가 텍스트입니다. 이 텍스트는 검색 엔진이 이미지의 내용을 파악할 수있게 하여 사용자가 해당 단어를 검색 할 때 이미지를 표시 할 수있게 합니다. 사용자들입장에서는 대체 텍스트, 설명 및 캡션과 같은 이미지 메타 데이터를 통해 이미지에 대해 더 많은 정보를 얻을 수 있습니다. 메타 데이터를 사용하여 사진에 대한 배경 이야기를 제공하고 사용자에게 보다 재미있는 이미지를 제공 할 수 있습니다.

이미지 메타 데이터는 또한 시각 장애가 있는 사용자가 스크린 리더를 사용하고 있을때, 이미지가 무엇을 보여주고 있는지를 알도록 도와줍니다.

즉, 이미지 메타 데이터는 이미지를 더욱 재미 있고 유익하고 검색 가능하며 유용하게 만듭니다.

워드프레스 이미지 메타 데이터들(구성요소들, 태그들)

(발췌 :  Image Meta Data 101 – Title, Caption, Alt Text, and Description )

첨부 파일 제목( Attachment Title ) – 첨부 세부 정보의 제목 필드를 사용하여 이미지에 제목을 제공 할 수 있습니다. 이 제목은 WordPress에서 미디어 라이브러리의 이미지를 정렬하기 위해 내부적으로 사용됩니다. 이것은 이미지 title 즉, 제목이 아닙니다. Attachment Title, 즉 첨부된 미디어의 이름이라는 의미로 미디어 라이브러리의 이미지를 정렬 및 검색하기 위한 용도로 사용됩니다. 이미지 대체 텍스트와 WordPress의 이미지 제목의 차이점 에 대해 더 알아보기 )

이미지 대체 텍스트(Image Alt text ) – 대체 텍스트 또는 대체 텍스트는 HTML 표준 사양에서 필수 필드입니다. 사용자 브라우저가 이미지를 찾을 수 없을 때 표시됩니다. Google과 같은 검색 엔진은 alt 태그를 이미지 검색 결과의 순위 요소로 사용합니다. WordPress의 이미지 대체 텍스트와 이미지 제목 의 차이점 에 대한 가이드를 참조하십시오 .

설명( Description) – 이미지의 첨부 파일 페이지에이 텍스트를 표시 할 수 있습니다. 설명 필드에 원하는만큼의 정보를 입력 할 수 있습니다. 사진 뒤에 숨겨진 이야기, 사진을 찍은 방법 또는 공유하고 싶은 것이 있다면 여기에 갈 수 있습니다. 설명 필드에 링크를 추가 할 수도 있습니다.

캡션( Caption) – 이미지로 표시 할 텍스트입니다. 테마에 따라 이미지 테두리 또는 이미지 바깥쪽에 표시됩니다. WordPress의 이미지에 자막을 추가하는 방법에 대한 가이드를 참조하십시오 . 영화를 볼때 자막과 같은 기능입니다.

아래의 이미지는 워드프레스에서 첨부 파일 제목, 이미지 대체 텍스트, 설명, 캡션을 모두 입력한 이미지의 소스를 살펴본 것입니다.

캡션은 ‘data-image-meta’ tag에 정의되어 있고 첨부 파일 제목은 ‘data-image-title’ tag, 설명은 ‘data-image-description’ tag로 정의되어 있습니다.  그러나 ‘data-image-meta, data-image-title, data-image-description’ 태그들은 워드프레스에서 정의하여 사용하는 tag들인 것으로 보입니다. ( World Wide Web Consortium (W3C) (W3C는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스 리를 중심으로 1994년 10월에 설립되었다. W3C는 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄이다) 의 기술서 중에 data-mage-meta tag, data-image-title tag, data-image-description tag가 있나 살펴보았으나 찾을 수 없는 것으로 보아서는 워드프레서에서 정의하여 사용하는 tag인것으로 판단됩니다. )

기본적으로는 워드프레스로 만들어지지 않는 많은 웹페이지들이 존재하므로 검색엔진의 순위요소로는 적당하지 않습니다.(한편, 이미지 파일을 정의하는 img tag 안에 있고 이미지에 대한 추가적인 정보를 제공한다는 점에서는 빈칸으로 놓아두는 것보다는 가능한 입력하는 것이 검색순위를 올리는데 도움이 될 것입니다.  그러나 노력 대비 결과, 가성비의관점에서 볼때 따로 시간을 내어  제목, 설명, 캡션을 따로 다시 입력하시라고 권하지는 못하겠습니다. 처음 입력 단계에서 alt tag와 함께 입력하시면 모를까…)

이미지 대체 텍스트는 alt tag 로 별도로 정의되어 있음을 볼 수 있습니다.  제가 워드프레스 이미지 메타 데이터들중 유의미한 것은 alt tag(이미지 대체 텍스트)뿐인 것 같습니다. 

구글 이미지 검색 순위 결정 요소들중 매우 중요한 것은 아래의 요소들입니다.

구글 이미지 검색 순위 결정 요소(Google images ranking factors (infographic)).

• keyword the surrounding text(이미지 근처의 텍스트중 키워드)
• keyword in the image name(이미지 파일 이름)
• image size (min. 320 pixel, max. 1280 pixel)(이미지의 사이즈)
• keyword in the “alt-text”(알트 텍스트)
• make sure that the image is available for the images-bot : 이미지 검색 로봇이 이미지를 활용할 수(찾을 수) 있도록 하라. 이미지를 포함하고 있는 폴더의 경로를 /images 또는 /**이미지 처럼 만들고 robot.txt 가 이런 폴더에 접근하는 것을 막지말라는 의미입니다.

이들중 alt-text, Alt Tag (for Image Links) 는 그림에 대한 앵커 텍스트로서 구글 상위노출 요소 200여가지중 하나입니다. 이미지를 통해 백링크 될 경우 alt tag(알트 태그)가 링크에 대한 텍스트 역할을 합니다. alt tag 안에 주요 키워드가 포함되는 것이 좋습니다.

구글 상위노출(검색엔진최적화) 요소들 총정리 : Google’s 200 Ranking Factors: The Complete List(51~100)

워드프레스 알림판에서 이미지 메타 데이터들 추가하기

이미지 메타 데이터들은 미디어 추가 단계에서 우측하단에서 정의(입력)할 수 있습니다.

수정은 알림판(대시보드)의 [미디어] ->[라이브러리]에서 수정하고자하는 미디어를 선택하고 [편집]을 눌러 할 수 있습니다.

미디어(이미지) 최적화를 위해 워드프레스에서 파일명 변경하기

위에서 설명한 구글 이미지 검색 순위 결정 요소들중 keyword in the image name(이미지 파일 이름)은 매우 중요한 요소들중 하나입니다.

구글 이미지 검색 순위 결정 요소(Google images ranking factors (infographic)).

• keyword the surrounding text(이미지 근처의 텍스트중 키워드)
• keyword in the image name(이미지 파일 이름)
• image size (min. 320 pixel, max. 1280 pixel)(이미지의 사이즈)
• keyword in the “alt-text”(알트 텍스트)
• make sure that the image is available for the images-bot : 이미지 검색 로봇이 이미지를 활용할 수(찾을 수) 있도록 하라. 이미지를 포함하고 있는 폴더의 경로를 /images 또는 /**이미지 처럼 만들고 robot.txt 가 이런 폴더에 접근하는 것을 막지말라는 의미입니다.

이미지의 이름은 검색 엔진에 의한 색인 생성을 위한  최적화 에서도 매우 중요합니다. 이미지 최적화를 위해 워드프레스의 이미지의 이름들을 변경하고자 방법을 찾고 보았습니다.

워드프레스로 만들어진 다른 사이트들의 본문에 첨부된 이미지 경로는 https://도메인/wp-content/uploads/2017/06/image.jpg  입니다. kopress 사이트의 경우에는 https://kopress.kr/wp-content/uploads/2017/06/image.jpg 입니다.

그래서 FTP 프로그램중 하나인 FileZilla 에서 “550_SJ17T327_1.jpg”를 찾아보았습니다.  이미지 경로는 /www/wp-content/uploads/2018/01/(파란색 네모칸)는 맞는데, 550_SJ17T327_1-150X150.jpg, 550_SJ17T327_1-260X332.jpg, 550_SJ17T327_1-300X300.jpg 등 원본외에 사이즈가 서로 다른 9개의 jpg file 이 만들어져 있어 이미지 file 명을 변경하는 것이 엄두가 나지 않습니다.

미디어 편집화면은 알림판(대시보드)에서 [미디어] ->[라이브러리]로 이동하여 [편집]을 click하시면 볼수 있습니다. [보기]를 선택하시면 미디어의 독립된 페이지가 보이는 것이 아니고 미디어가 포함된 post(게시글)을 볼 수 있습니다.

아래의 이미지는 미디어 편집 화면입니다. 캡션, 대체 텍스트, 설명 등은 변경이 가능한데, 파일 이름과 파일 경로를 수정할 수 없습니다.

파일 경로와 이미지 화일이름은 “/wp-content/uploads/2018/02/emsyap-kutseupeullo-peulleokeuin_emsyap-baesongjohoe-mit-taekbaesa-yeondong-unsongjang-chullyeok-peulleokeuin_9_seobiseu-kwanli-1.jpg”으로 표시됩니다.

’emsyap-kutseupeullo-peulleokeuin_emsyap-baesongjohoe-mit-taekbaesa-yeondong-unsongjang-chullyeok-peulleokeuin_9_seobiseu-kwanli-1′ 은 ‘엠샵 굿스플로 플러그인 엠샵 배송조회 및 택배사 연동 운송장 출력 플러그인9서비스_관리’가 저장되며 워드프레스에 의해 자동 부여된 이미지 화일명입니다. ’emsyap-kutseupeullo-peulleokeuin_emsyap-baesongjohoe-mit-taekbaesa-yeondong-unsongjang-chullyeok-peulleokeuin_9_seobiseu-kwanli-1′ 은 영문같지만 한글을 단지 영문으로 표기한 의미없는 단어의 조합으로 abc123.jpg와 같이 무의미한 파일명입니다.

발음기호라면 음성인식 기능이 좋아져서 검색엔진에 노출되지 않을까하는 희망때문에 저는 이것이 발음기호에 의한 것인가했는데, 한글 파일명을 사용하는 경우 깨지는 것을 방지하기 위해 한글을 영문으로 표기하는 것이었습니다.

한글 영문표기법에 의해 자동생성된 미디어(이미지, 동영상) 영문 파일명은 검색엔진이 crawling은 할 수 있지만 단어의 이름을 파악할 수 없으므로 색인되지도 검색결과에 표시되지도 않습니다. ( 검색엔진친화적이지 않습니다.)

검색엔진친화적인 미디어(이미지) 파일이름을 만드는 방법

예를들어, 강이지 문양이 있는 상의중 박스인 상품, ‘강아지기모박스’의 이미지를 올린다고 가정했을때 한글을 영문표기한 kangajikimobakseu.jpg 는 의미가 없고 dog_brushed_box.jpg 또는 보다 의미에 충실한 puppy_brushed_top.jpg 으로 이미지 파일 이름을 생성하시는 것이 검색엔진친화적 이미지 파일 이름입니다.

서버가 PHP 7.0을 지원하면 한글명 파일의 업로드 / 다운로드시 파일 깨짐 현상이 없습니다.

카페24에서 호스팅하고 있는 서로 다른 사이트인데

서버환경이 UTF-8 (PHP5.5, MySQL5.x)인 사이트는 한글파일명이 지원이 안되는데,

서버 환경이 UTF-8 (PHP7.0, mariadb-10.0.x) 인 사이트는 지원됩니다. 구글에서 이미지 검색해보았는데, 검색이 잘 됩니다.

검색엔진최적화를 위해, 사이트 속도 향상을 위해 PHP 7.0으로 변경하는 것이 좋습니다.(제가 서버는 잘 몰라서 다시 부연합니다. PHP 7.0이 한글을 지원하는지 꼭 각자 확인후 PHP 7.0으로 변경하세요)

PHP 7.0으로 변경할 경우 데이터, DB 모두 초기화되므로 반드시 백업을 받아놓고 시작하시기 바랍니다.

PHP 7.0으로 변경하는 방법은 아래의 게시글을 참조하세요.

만약 백업을 받지 않고 진행했다면 카페24 게시판에 지원을 요청하면 백업 파일을 다운로드할 수 있도록 조치해줄 것입니다.

https://www.thewordcracker.com/miscellaneous/how-to-change-php-version-in-cafe24-korea/

===================================================

우커머스_상품등록하기 를 워드프레스에서 저장하면 ‘ukeomeoseu_sangpumdeunglokhaki’로 저장됩니다. 구글 이미지검색에서 ukeomeoseu_sangpumdeunglokhaki을 조회하면 검색결과에 나옵니다. 그러나 우커머스 상품등록하기로 검색하면 검색결과에 안 나옵니다. 또한 이것을 구글 번역기로 돌리면 발음기호는 ‘u keomeoseu sangpum deungloghagi’로 표현되는 이것으로 검색해도 검색결과에 안 나옵니다.

워드프레스에서 미디어(이미지) 이름 변경하기

알림판(대시보드) [미디어] ->[라이브러리] -> 변경하고자하는 미디어(이미지) 선택

미디어(이미지) 파일 이름(분홍색 네모부분), neibeo-syoping-jaesusin-yocheong.jpg 은 변경할 수 없고(한글을 소리나는데로 영문으로 표시하여 파일명이 만들어저 있습니다. 한글명을 그대로 올리면 이미지 깨짐 현상이 일어나기 때문일 것입니다.) 파랑색 네모 부분의 타이틀, 캡션, 대체 텍스트, 설명은 교체할 수 있습니다.

플러그인으로 워드프레스 미디어(이미지) 이름 변경하기

주의사항 : Retitle 적용시 이미지이름에 따라서 retitle(자동으로 제목 재생성)이 잘 안 되는 경우가 있으므로 Rename 만 이용하세요.

카페24를 이용하는 경우, 카페24의 DB복원하기(data 복원하기가 아닙니다.)를 이용하시어 작업 이전단계로 돌릴 수 있으니 참조하세요.  카페24 DB복원하기는 아래의 게시글을 참조하세요.

http 500 error 와 카페24 복원

Phoenix Media Rename 플러그인(plugin)( Contributors & Developers : crossi72 )

Phoenix Media Rename

• Version:1.3.4
• Last updated:3 weeks ago
• Active installations:10,000+
• WordPress Version:4.5 or higher
• Tested up to:5.2.4

주의 요망  : 2~3개의 미디어를 rename한 후 해당 미디어를 포함하고 있는 페이지(게시글) 또는 슬라이드가 깨지지 않는지 꼭 확인하고 사용해주세요. 처음 3 개의 사이트에서는 문제 없이 잘 작동하였는데 betheme를 사용하는 4번째 사이트에서는 rename을 하면 해당 미디어를 담고 있는 컨텐츠 또는 슬라이드에서 rename 이 적용된 해당 미디어(4번째 사이트에서는 미디어중 이미지)가 깨지는 문제가 발생하였습니다. 

추후에도 5번째, 6번째 등 더 test해보고 결과를 업데이트해주세요.

무료 버전인데, 유료버전처럼 개발자가 support(기술지원)도 잘 해줍니다. ( https://wordpress.org/support/plugin/phoenix-media-rename )

단일 미디어의 이름을 바꾸는 방법은 무엇입니까?

관리자 패널의 미디어 섹션으로 이동하여 원하는 미디어를 선택하고 [편집]을 click하여 열어줍니다.

캡션, 대체 텍스트, 설명 밑에 “Filename”이라는 새 필드와 현재 파일 이름이 나타납니다. 새 이름을 원하는대로 변경하고 “업데이트”버튼을 누릅니다.

미디어의 이름을 대량으로 바꾸는 방법은 무엇입니까?

관리자 패널의 [미디어] -> [라이브러리]으로 이동하여  이름을 바꾸려는 미디어를 확인 및 선택한 다음 -> 해당 미디어의 우측끝에 있는 “Filename(파일 이름)”필드에 변경 또는 추가하고자하는 이미지 파일명을 입력하세요 -> 드롭 다운에서 “Rename(이름 바꾸기)”또는 “Rename & Retitle(이름 바꾸기 및  Retitle)”중에 원하시는 것을 선택하신 후(rename는 이미지파일의 이름만 변경하는 것이고 Rename & Retitle(이름 바꾸기 및  Retitle) 는 이미지파일의 이름과 첨부 파일 제목( Attachment Title )을 동시에 변경하는 것입니다 ) -> “적용”버튼을 눌러주세요. 주의사항 : Retitle 적용시 이미지이름에 따라서 retitle(자동으로 제목 재생성)이 잘 안 되는 경우가 있으므로 Rename 만 이용하세요.

제가 보기엔 마술같이 신기한 일이 벌어집니다. 기존에 의미가 없던 “550_SJ14T681” “550_SJ14T681_소매프릴BL”와 같이 이미지 파일명이 “550_SJ14T681_소매프릴BL_러블리한럭셔리하객룩여리여리핏여성블라우스여성스러운하객룩상의top여성의류패션의류블라우스_셔츠.jpg”(이 상품은 패션의류 중 여성의류이고 여성의류중 블라우스이며 하객룩으로 여리여리한 여성스러움과 럭셔리함을 연출할 수 있는 블라우스라는 의미를 검색엔진에게 전달할 수 있는 이미지파일명으로) 변경됩니다. 그것도 선택한만큼(여기서는 9 개의 이미지파일명)이 한번에 변경됩니다.

Media File Renamer 플러그인(plugin) : 자동으로 파일이름을 변경하는 플러그인입니다. 이 플로그인 설치후 이미지 깨짐 현상을 경험하였습니다. 추천하지 않습니다. 

Media File Renamer – Auto & Manual Rename

https://www.youtube.com/watch?v=-0Mkm9P07h4

((시작하기 전 유의사항))

파일 이름 바꾸기는 위험한 과정입니다. 모든 것을 자동으로 이름을 바꾸기 전에 먼저 몇 개의 파일 이름을 바꾸고 해당 파일에 대한 모든 참조가 웹 사이트에서 제대로 업데이트되었는지 확인하십시오. WordPress에는 너무 많은 테마와 플러그인이 있어 이름을 바꾸는 프로세스가 불행히도 모든 경우를 다룰 수는 없습니다.

FileZilla와 같은 FTP 소프트웨어로 미디어(이미지) file 들을 백업한 후 플러그인을 사용을 시작하세요. 

https://wordpress.org/plugins/media-file-renamer/ 에서 download 받으시거나 알림판에서 [플러그인] -> [플러그인 추가하기] -> 검색창에 “Media File Renamer”에 입력하여 검색후 -> [지금 설치하기] -> [활성화]해주세요.

알림판(대시보드)에서 [미디어(Media)] -> [라이브러리(Library)]하여 라이브러리에 액세스한후 라이브러리가 모눈으로 표시되는 경우 목록 아이콘을 클릭하여 목록 모드로 전환하세요.

한번 Auto Rename을 하면 되돌릴수 없습니다. 

Auto Rename 밑에 “Rename in lowercase, to google-shopping.jpg.”는 SEO 친화적인 file name 을 만드는 것으로 빈공간대신 -를 넣는다든지 대문자를 소문자로 전환, 특수 문자 제거와 같은 것을 고려하여 제안을 합니다.

“You can also edit this media “는 다른 기능이 있는지 알았으나 [미디어] -> [라이브러리] 에 있는 원래 [편집]기능과 다르지 않습니다.

미디어 파일명을 변경하려면 아래의 상품 중 하나를 유료 구입해야 합니다.

Starter – 14.00$ Yearly / 1 Website

Standard – 18.00$ Yearly / 5 Websites

Professional – 32.00$ Yearly / 20 Websites

Standard (Lifetime) – 40.00$ Lifetime / 5 Websites

Professional (Lifetime) – 89.00$ Lifetime / 20 Websites

Developer (Lifetime) – 140.00$ Lifetime / 500 Websites

Agency (Lifetime) – 260.00$ Lifetime / 2500 Websites

WP Real Media Library 플러그인(유료, $24, [워드프레스] 미디어 라이브러리 정리 플러그인 )

플러그인으로 워드프레스 alt tag 만들기/수정하기

여기까지 하니 욕심이 하나 더 생깁니다. alt tag를 한번에 변경할 수 있는 플러그인은 없는 것일까 ? 아래의 게시글을 참조하세요. 

[추천]워드프레스 alt tag 관련 플러그인들( Update Image Tag Alt Attribute plugin, PB SEO Friendly Images plugin, Automatic image ALT attributes plugin )

다른 이미지 최적화 플러그인들(이미지 압축 플러그인들)

워드프레스 플러그인에서 image SEO를 검색하면 이미지를 압축하여 저장 용량을 줄이고 페이지 로딩 속도를 증가시키는 아래의 Smush Image Compression and Optimization 와 같은 플러그인들을 보실 수 있습니다. 빠른 로딩속도는 검색엔진최적화(SEO)의 기본이므로 당연히 최적화에 많은 도움이 되오니 같이 이용하시길 권합니다.

Smush – Lazy Load Images, Optimize & Compress Images

워드프레스 미디어(이미지) 최적화가 잘 되었는지 검증하는 방법

이미지 파일명을 최적화하고 alt tag 를 최적화하는 등 작업을 하였다면 그 성과가 어떤한지 확인해 보아야 합니다.

최적화가 잘 되었는지 확인하는 방법은 아래의 게시글을 참조하시어 구글 서치 콘솔의 검색 애널리틱스 보고서에서 검색유형 카테고리중 이미지 필터와 날짜 필터를 이용하시어 최적화 적용전과 후를 비교해보세요.

얼마나 놀라운 순위상승이 있는지 확인하실 수 있을 것입니다.

Q. 당신의 사이트(쇼핑몰, 홈페이지, 블로그)의 이미지가 최적화되었는지 확인하는 방법은 ?(Google 이미지 검색 순위를 측정하는 도구들)

참고자료 : 1. 이미지 경로 문제 질문입니다.

2. Comment renommer les images sur un blog WordPress

3. [워드프레스] 미디어 라이브러리 정리 플러그인

4. Image Alt Text vs Image Title in WordPress – What’s the Difference?

5. Image Meta Data 101 – Title, Caption, Alt Text, and Description