[SEO] 이미지 최적화하기, 모바일 친화적인 사이트

이미지 최적화하기

HTML 이미지 사용하기

HTML 이미지 요소를 사용하여서 콘텐츠에 이미지를 삽입하는 것은 좋다.

 

- HTML <img> 또는 <picture>요소 사용하기

시맨틱 HTML 마크업을 사용하면 크롤러가 이미지를 찾고 처리할 수 있다.

<picture>요소를 사용하여 반응형 이미지를 위한 다양한 화면 크기에 여러 옵션을 지정할 수도 있다. 이미지에 loading = "lazy"속성을 사용하면 사용자가 페이지를 더 빠르게 볼 수 있다.

 

❌이것만은 피하자)

• CSS를 사용하여 색인을 생성할 이미지 표시

 

- alt 속성 하용하기

이미지와 관련된 설명을 제공하는 파일 이름 및 alt속성을 사용하라. alt 속성을 사용하면 어떤 이유로 이미지를 표시할 수 없는 때 대신 표시할 텍스트를 지정할 수 있다.

alt 속성의 다른 이유는 이미지를 링크로 사용하는 경우 해당 이미지의 대체 텍스트가 텍스트 링크의 앵커 텍스트와 비슷하게 취급되다는 점이다. 그러나, 텍스트 링크를 통해서 가능하다면, 되도록 이미지 링크를 사용하지 않는 것이 좋다.

파일 이름과 대체 텍스트를 최적화하면 구글 이미지와 같은 이미지 검색 프로젝트에서 이미지를 더욱 쉽게 이해할 수 있다.

 

- 간단하지만 설명이 담긴 파일 이름과 대체 텍스트 사용

최적화의 대상의 되는 페이지의 다른 부분들과 마찬가지고, 파일 이름과 대체 텍스트는 짧으면서도 설명을 제공하는 것이 가장 좋다.

 

❌이것만은 피하자)

• image1.jpg, pic.gif, 1.jpg와 같은 일반적인 파일 이름의 사용은 좋지 않다.
• 매우 긴 파일 이름 역시 좋지 않다.
• 대체 텍스트를 키워드로 채워 넣거나 전체 문장을 복사-붙여넣기

 

- 이미지를 링크로 사용할 때 대체 텍스트 제공

이미지를 링크로 사용하기로 결정한 경우 대체 텍스트를 작성하면 구글에서 링크하려는 페이지에 대해 더 잘 이해할 수 있다.

텍스트 링크의 앵커 텍스트를 작성한다고 생각해보라.

 

❌이것만은 피하자)

• 스팸으로 간주될 수 있을 정도로 대체 텍스트를 지나치게 길게 작성
• 사이트탐색에 이미지 링크만 사용하는 경우

 

검색엔진이 내 이미지를 찾을 수 있게 돕기

이미지 사이트맵을 사용하면 구글이 사이트에서 발견한 이미지에 관해 더욱 자세한 정보를 제공할 수 있다. 이렇게 하면 구글 이미지 검색결과에 이미지가 표시될 가능성이 높다.

이 파일의 구조는 웹페이지의 XML 사이트맵 파일과 유사하다.

 

표준 이미지 형식 사용하기

일반적인 파일 형식을 사용하라. 대부분의 브라우저는 JPEG, PNG, GIF, BMP, WebP 이미지 형식을 지원한다.

 

 

사이트를 모바일 친화적으로 만들기

오늘날의 세상은 모바일 중심으로 돌아간다. 휴대전화를 이용하여 구글에서 많이 검색한다.

모바일 기능을 지원하는 사이트가 있어야 온라인 인지도를 유지할 수 있다.

 

⭐️기기 간 차이점

• 스마트폰 - Android기기, iPhone등의 스마트폰을 말한다. 모바일 브라우저는 광범위한 HTML5 사양을 렌더링할 수 있지만, 화면 크기가 더 작고, 기본 방향이 세로이다.
• 태블릿 - 구글에서는 태블릿을 별도의 기기 유형으로 간주한다. 태블릿의 화면은 보통 더 크므로 따로 태블릿에 최적화된 홈페이지를 제공하는 것이 좋다.
• 멀티미디어 휴대전화 - 일부 HTML5의 기능을 지원하지 못하는 브라우저를 사용할 수 있다.
• 피처폰 - 일반 데스크톱 웹페이지를 랜더링가능 기능이 없다.

 

모바일 전략 선택하기

웹사이트에서 모바일 환경을 지원하도록 구현하는 방법은 여러 가지이다.

• 반응형 웹 디자인(권장)
• 동적 게재
• 별도 URL

모바일 지원 사이트를 개발한 후에는 Lighthouse와 같은 도구를 사용하여 모바일 친화적인지 확인할 수 있다.

 

사이트에서 여러 페이지에 걸쳐 블로그 게시물이나 제품 방문 페이지와 같은 여러 정적 콘텐츠를 게재하는 경우 AMP(Accelerated Mobile Pages)를 사용한 콘텐츠 구현을 고려하라. AMP는 특별한 종류의 HTML로서 사이트를 항상 빠르고 사용자 친화적으로 유지해주며, 구글 검색 등의 다양한 플랫폼을 통해 사이트 속도를 한층 더 높일 수 있다.

 

색인이 정확하게 생성될 수 있도록 모바일 사이트 구성하기

다음 중요 포인트에 유의하라:

1. 동적 게재를 사용하거나 별도의 모바일 사이트가 있는 경우 휴대기기에 맞게 페이지 형식을 지정했다면 이를 구글에 알린다. 이렇게 하면 구글에서 모바일 검색 사용자의 검색결과에 콘텐츠를 정확하게 게재하는 데 도움이 된다.
2. 반응형 웹 디자인을 사용하는 경우 meta name="viewport" 태그를 사용하여 브라우저에 콘텐츠 조정 방법을 알린다.
   동적 게재의 경우 Vary HTTP 헤더를 사용하여 사용자 에이전트에 따라 변경사항을 알린다.
   별도의 URL을 사용하는 경우 rel="canonical" 및 rel="alternate"요소가 있는 <link>태그를 페이지에 추가하여 두 URL 간의 관계를 알린다.
3. 리소스를 크롤링 할 수 있는 상태로 유지하라. 페이지 리소스를 차단하면 구글이 웹 사이트를 제대로 알리지 못할 수도 있다.
   구글에서 모바일 친화적인지 알 수 없으므로 모바일 검색 사용자에게 제대로 게재되지 않을 수 있다.
4. 자주 발생하여 모바일 방문자를 불편하게 하는 실수를 하지 마라.(ex. 재생할 수 없는 동영상 등)
5. 검색 사용자의 불만을 초래하는 모바일 페이지가 있으면 순위가 낮아질 수 있고 모바일 검색결과에 경고와 함께 표시될 수 있다.
6. 모든 기기에서 모든 기능을 제공하라. 모바일 사용자는 웹사이트에서 지원하는 다른 모든 기기에서 댓글, 결제 등 동일한 기능 및 콘텐츠를 사용하기를 기대한다.
7. 데스크톱 사이트에 있는 구조화된 데이터, 이미지, 동영상, 메타데이터가 모바일 사이트에도 포함되어 있는지 확인하라.

 

자세한 것은 모바일 친화성 가이드를 참고.