지금 시도해 볼 수 있는 10가지 실행 가능한 이미지 최적화 해킹

콘텐츠에 오타나 문법 오류가 없는지 확인하기 위해 게시물을 게시하기 전에 엄격한 검사를 실행합니까? 물론 할 수있다.

체크리스트를 통해서도 이미지를 실행합니까? 아니요?

당신은 혼자가 아닙니다.

대부분의 블로거는 콘텐츠를 최적화하기 위해 매우 열심히 노력하지만 이미지 SEO는 나중에 생각하는 경우가 많습니다.

그것을 바꿀 때입니다.

웹 사이트에서 이미지의 힘을 활용할 수 있고 활용해야 합니다. 인생의 다른 모든 것과 마찬가지로 일단 방법을 알면 매우 쉽습니다.

전체 웹사이트에 대한 일회성 작업 항목

이미지 SEO에 한 발짝 다가가기 위해 웹사이트에서 한 번만 수행하면 되는 4가지 작업부터 시작하겠습니다.

1. 이미지 사이트맵 만들기

웹사이트의 모든 게시물과 페이지(또는 최소한 검색 엔진에서 색인을 생성하거나 검색해야 하는 항목)를 포함하는 것처럼 웹사이트의 사이트맵에 이미지를 포함합니다.

Google의 이미지 사이트맵 가이드라인에 따르면 이미지와 게시물을 모두 동일한 사이트맵에 포함하거나 이미지에 대해 별도의 사이트맵을 생성하도록 선택할 수 있습니다.

그러나 CDN을 사용하여 이미지를 호스팅하는 경우 이러한 일반 사이트맵에는 일반적으로 동일한 도메인에 속하는 파일만 포함되기 때문에 웹사이트에 대해 생성된 일반 사이트맵에 이미지가 포함되지 않을 수 있습니다. 따라서 이러한 경우에는 별도의 이미지 사이트맵을 만드는 것이 좋습니다.

또한 사이트에서 JavaScript 코드를 사용하여 이미지에 액세스하는 경우 사이트맵에 이미지를 나열하지 않는 한 Google에서 해당 이미지를 찾지 못할 수도 있습니다.

Google이 이미지 사이트맵을 권장하는 이유에 대해 자세히 알아보세요.

이미지 사이트맵은 어떻게 만드나요?

RankMath 또는 Yoast와 같은 대부분의 WordPress SEO 플러그인은 기본적으로 게시물 및 페이지(동일한 사이트맵에 있음)와 함께 이미지를 포함하는 사이트맵을 생성합니다. 추천 이미지는 때때로 '멋진' 경향이 있고 인덱싱된 경우 반드시 가치를 추가하지 않을 수 있으므로 추천 이미지를 제외하거나 포함하도록 선택할 수도 있습니다.

2. CDN 사용

Image Content Delivery Network를 사용하면 이미지를 훨씬 빠르게 로드할 수 있습니다. 고품질 이미지를 제공하면 웹 사이트 속도가 크게 느려질 수 있습니다. 이는 물론 SEO에 좋지 않습니다.

이미지 CDN 또는 CDN이 무엇인지 확실하지 않은 경우 여기에 정말 간단한 설명이 있습니다.

CDN이란 무엇입니까?

CDN은 Content Delivery Network의 약자입니다. 그것은 문자 그대로입니다.

CDN은 서로 다른 데이터 센터에 있는 전 세계의 연결된 서버 네트워크입니다.

사용자가 웹사이트를 방문하면 해당 방문자의 위치와 물리적으로 가장 가까운 데이터 센터에서 콘텐츠를 제공합니다. 분명히 더 빨라집니다.

예를 들어 웹사이트의 콘텐츠가 서부 해안의 서버에 있다고 가정해 보겠습니다. 동부 해안에서 온 방문자가 귀하의 웹사이트에 방문하여 귀하의 사이트를 탐색합니다.

이제 서부 해안에서 동부까지 콘텐츠를 가져오려면 시간이 걸리고 웹 사이트 속도가 느려집니다. 대신 CDN을 사용하는 경우 콘텐츠가 뉴욕의 데이터 센터에 있을 수 있으므로 웹 사이트를 훨씬 빠르게 로드할 수 있습니다.

Google은 웹사이트 속도를 매우 중요하게 여기며 귀하도 그렇게 해야 합니다. CDN을 사용하면 웹 사이트 성능을 크게 향상시킬 수 있습니다.

물론 정말 단순화된 설명보다 더 많은 것이 있습니다. CDN에 대해 더 알고 싶으시면 자세한 CDN 가이드를 읽어보세요. 최고의 무료 CDN 솔루션 목록을 보려면 여기를 읽어보세요.

이미지 CDN이란 무엇입니까?

이미지 CDN은 방금 설명한 일반 CDN과 매우 유사하지만 이미지를 변환하고 크기, 형식 및 품질을 수정하는 기능이 추가되어 이미지를 보고 있는 장치에 맞게 이미지가 최적화됩니다. .

자세한 내용은 Google에서 바로 여기에 기본 사항을 요약합니다.

이미지 CDN 서비스의 인기 있는 공급자는 다음과 같습니다.

Optimole – 이미지를 최적화된 방식으로 압축, 변환, 저장 및 전달합니다. Optimole은 WordPress.org에서 우수한 평가를 받은 WordPress 플러그인을 사용하여 WordPress 웹사이트와 쉽게 통합할 수 있습니다. 자세한 내용은 여기에서 자세한 Optimole 리뷰를 읽어보세요.

Quicq – 이미지 전달 성능을 가속화할 것을 약속합니다. 여기에서 자세한 Quicq 리뷰를 읽어보세요.

또한 MaxCDN, Cloudinary, Filestack, Imgix, Imagekit 등 고려해야 할 이미지에 대한 CDN 공급자가 더 많이 있습니다.

3. 지연 로딩 활성화

지연 로딩은 말 그대로 방문자가 실제로 아래로 스크롤하거나 해당 영역으로 이동하여 해당 이미지를 "요구"할 때 방문자의 브라우저에 적시에 이미지가 로드됩니다.

지연 로딩을 어떻게 활성화합니까?

미디어 라이브러리에 업로드된 모든 이미지에 대한 레이지 로딩은 WordPress 버전 5.5에서 기본 기능으로 추가되었습니다(width 및 height 속성이 있는 img 태그에 loading=”lazy” 속성 추가). 나중에 WordPress 버전 5.7에는 iframe 태그에 대한 지연 로딩도 포함되었습니다.

그러나 원하는 경우 무료 a3 Lazy Load 플러그인과 같은 WordPress 플러그인을 사용하도록 선택할 수 있습니다.

• WordPress의 기본 지연 로딩 동작을 비활성화하거나
• 지연 로딩을 지원하여 WordPress의 지연 로딩 기능을 향상시킵니다.
  • 미디어 라이브러리 외부의 이미지
  • 이 WordPress 속성을 지원하지 않을 수 있는 브라우저
  • WordPress에서 지연 로드할 수 없는 Iframe 또는 동영상

4. 브라우저 캐싱 활성화

브라우저 캐싱은 브라우저가 다운로드한 리소스를 로컬에 저장한 다음 사용자가 웹 사이트를 다시 방문할 때 리소스를 다시 다운로드하는 대신 거기에서 제공하는 것입니다.

브라우저 캐싱을 활성화하는 방법은 무엇입니까?

코드에 관심이 없다면 WP Rocket 또는 W3 Total Cache와 같은 캐싱 플러그인에 맡기는 것이 가장 좋습니다. 코딩이 두렵지 않다면 다음 지침에 따라 브라우저 캐시를 DIY하십시오.

각 이미지에 대해 반복 가능한 작업 항목

다음은 콘텐츠 체크리스트에 포함되어야 하는 6가지 작업 항목 목록입니다. 이미지가 포함된 게시물을 게시하기 전에 이러한 각 이미지 최적화 요구 사항을 준수하는지 확인하세요.

5. 올바른 이미지 형식 선택

“WebP 무손실 이미지는 PNG에 비해 크기가 26% 더 작습니다. WebP 손실 이미지는 유사한 JPEG 이미지보다 25-34% 더 작습니다.”

WebP의 Google 노트

Google은 다양한 형식의 이미지를 지원하지만 상대적으로 새롭고 덜 알려진 형식인 WebP가 이상적입니다. JPG는 일반적으로 사진에 사용됩니다. PNG는 일반적으로 일러스트레이션 및 로고에 사용됩니다(PNG는 투명한 배경을 허용하기 때문).

Google은 WebP, PNG 및 JPG 이미지를 비교하여 수행한 연구 결과에 따라 성능을 위해 WebP를 사용할 것을 권장합니다.

확신? 다음은 WebP 이미지를 사용하는 방법에 대한 Google의 몇 가지 팁입니다.

6. 이미지 이름을 적절하게 지정하세요.

이미지의 파일 이름은 검색 엔진이 이미지를 "읽고 이해"하는 데 도움이 될 수 있습니다. MYPRODUCT202541.jpg는 전혀 도움이 되지 않으므로 갈색 노트북 가방과 같은 이미지 파일의 이름을 무작위로 지정합니다.

대신 'light-brown-laptop-bag.jpg'로 이름을 지정하면 검색 엔진에 이미지의 내용에 대한 단서가 제공됩니다.

다시 말하지만, 항상 그렇듯이 이미지 파일 이름에 키워드를 채우지 마십시오. 대신 가능한 한 자연스럽고 '인간적'으로 유지하십시오.

7. 이미지 압축

품질 저하 없이 이미지 파일 크기를 가능한 한 가장 작게 유지해야 합니다.

이미지에 대한 고정된 제한이나 권장 파일 크기는 없지만 내가 본 대부분의 웹 사이트는 50KB에서 100KB 사이의 파일 크기의 이미지를 사용합니다.

WPSmush, TinyPNG, OptiMole 또는 EWWW Image Optimizer와 같은 무료 WordPress 플러그인을 사용하여 웹 사이트에서 이미지를 압축할 수 있습니다.

8. 의미 있는 Alt 태그 추가

각 이미지에는 문자 그대로 대체 텍스트를 나타내는 "alt"라는 태그가 있습니다. Alt 태그는 SEO와 접근성 모두에서 이미지의 가장 중요한 측면 중 하나입니다.

이미지를 액세스 가능하게 만들기

시각 장애가 있는 사용자가 사용하는 스크린 리더 도구는 웹 사이트의 텍스트 콘텐츠를 소리내어 읽습니다. 이미지의 경우 이러한 도구로 대체 텍스트를 읽습니다.

따라서 대체 텍스트가 이미지를 제대로 설명하지 않으면 웹 사이트 방문자에게 전혀 의미가 없습니다.

접근성 검사 도구를 사용하여 웹 사이트의 접근성을 개선해야 하는지 여부를 평가할 수도 있습니다.

이미지 검색 엔진 친화적으로 만들기

Google은 이미지를 "읽을" 방법이 없으므로 대체 텍스트를 사용하여 이미지를 해독합니다. 또한 브라우저가 어떤 이유로 이미지를 로드할 수 없는 경우 단순히 대체 텍스트를 표시합니다.

Alt 태그를 추가할 때 피해야 할 몇 가지 사항 –

• 긴 키워드 목록을 대체 텍스트에 채우려고 하지 마세요. Google은 충분히 똑똑하게 볼 수 있습니다.
• 동일한 게시물이나 페이지의 이미지에 대해 중복된 Alt 태그를 피하세요. Google을 귀찮게 할 뿐입니다.

Image Block을 사용하면 WordPress에서 이미지에 alt 태그를 쉽게 추가할 수 있습니다. 웹 사이트의 모든 이미지에 대한 alt 태그를 대량 업데이트하려는 경우에만 플러그인이 필요할 수 있습니다.

참고 사항 – 이미지 제목과 캡션은 2022년 8월 6일부터 Google에서 지원 중단되었습니다. 즉, Google은 이제 이러한 이미지 태그를 완전히 무시합니다.

이미지에 이러한 태그를 이미 지정한 경우 돌아가서 삭제할 필요가 없습니다. 이 추가 데이터가 있으면 불이익은 없지만 더 이상 이점도 없습니다.

9. 역병과 같은 애니메이션 GIF를 피하십시오

애니메이션 GIF는 크고 부풀어 오른 파일로 이어질 수 있습니다.

대신 MP4와 같은 비디오를 사용하면 파일 크기를 크게 줄이는 데 도움이 될 수 있습니다. WebP 비디오를 사용하는 것이 훨씬 좋습니다. 증명을 위해 Google의 예를 참조하십시오.

10. 콘텐츠를 보완하는 이미지 사용

이미지(및 대체 텍스트)가 이미지 전후의 텍스트 콘텐츠와 일치하는지 확인해야 합니다. 그렇지 않으면 혼란스러워지고 검색 엔진에서도 잘못 해석될 수 있습니다.

예를 들어 파스타 레시피를 설명하는 두 단락 사이에 우주선과 같은 이미지를 삽입하는 것은 부자연스럽습니다.

결론적으로

요약하면 이미지를 효율적으로 제공하고 Google이 이미지를 찾도록 돕고 이미지를 정확하게 이해하기만 하면 됩니다.

이러한 간단한 이미지 최적화 기술이 생성하는 데 도움이 되는 SEO 주스가 너무 많습니다. 당신은 이것들을 정말로 무시할 변명의 여지가 없습니다. 이미지 SEO에 약간의 주의를 기울이면 웹사이트의 사용자 경험을 극적으로 개선하는 데 도움이 될 수 있습니다. 그리고 그것이 생성하는 유기적 트래픽은 반가운 보너스입니다.

의견을 남기고 WordPress 웹 사이트의 이미지를 어떻게 최적화했는지 알려주십시오. 시도하고 사랑했던(또는 싫어했던) 이미지 최적화 WordPress 플러그인이 있습니까?