Google 이미지 SEO_HTML 이미지 요소를 사용하여 이미지 삽입하기
안녕하세요. 꿀둥지입니다.
블로그 포스팅을 지속적으로 하다 보니 Google SEO(검색 엔진 최적화)에 대한 지속적인 공부를 하고 있는데요. 혹시, 이미지에 대한 검색 엔진 최적화 방법에 대한 내용도 들어보셨을까요?
블로그 또는 웹사이트의 이미지는 단순히 시각적 매력을 더하는 것 이상의 역할을 합니다. 올바르게 최적화된 이미지는 웹사이트의 검색 엔진 최적화(SEO)를 향상시키고, 웹사이트에 더 많은 트래픽을 유도하는 데 중요한 역할을 합니다. 이 글에서는 HTML의 <img> 태그를 사용하여 이미지 SEO를 향상시키는 방법에 대해 알아보겠습니다.
<img> 속성 파헤치기
HTML에서 이미지를 삽입하기 위해 <<img> 속성 사용합니다. 아래는 이미지를 삽입하는 기본적인 형식입니다.
<img src="image.jpg" alt="이미지 설명" width="500" height="300">
하나씩
분리해서 개념을 알아 보겠습니다.
1. `src`: 이미지 파일의 경로를 지정합니다. 이 속성은 필수적으로 지정해야 합니다. 예를 들어, `<img src="image.jpg">`와 같이 사용합니다.
2. `alt`: 이미지를 설명하는 대체 텍스트를 제공합니다. 이미지가 로드되지 않았을 때나 시각 장애를 가진 사용자를 위해 이미지에 대한 정보를 전달하는 역할을 합니다. 또 구글 검색앤진은 이미지를 볼 수 없기 때문에 테식스트로 사진을 보여주는 기능을 합니다. 예를 들어, `<img src="image.jpg" alt="이미지 설명">`와 같이 사용합니다.
3. `width`와 `height`: 이미지의 가로 너비와 세로 높이를 픽셀 단위로 지정합니다. 예를 들어, `<img src="image.jpg" width="500" height="300">`와 같이 사용하면 이미지의 크기를 지정할 수 있습니다. 이 속성은 이미지를 화면에 표시할 때 이미지가 차지하는 공간을 지정하는 데 사용됩다.
이미지 삽입 방법
그렇다면 블로그에 이미지를 넣어볼까요?
우선, 이미지를 URL로 바꾸는 작업이 필요합니다. 이미지를 넣기 위해서는 이미지가 어떻게든 웹에 존재를 해야해서 저같은 경우는 비공개 포스터를 하나 만들어 이미지 작업파일로 사용을 하고 있습니다.
아래와 같이 이미지를 웹상에 올리셨다면 오른쪽 마우를 사용하셔서 이미지 주소 복사를 해주세요!
그리고 아래와 같이 제가 링크를 작성하였는데요.
<div style="display: flex; justify-content: center;"><img src="https://blog.kakaocdn.net/dn/cKU67b/btslKcMLzNF/jzoqbq6DaVpLhDyPWgBGak/img.png" alt="이미지 검색 엔진 최적화" width="300" height="300" /></div>
이 글을 복사해서 티스토리의 HTML 모드로 들어가 넣고 싶은 곳에 복사 붙여넣기를 하면 완료가 됩니다. 다만, 대표 이미지로 설정하기가 안되더라고요. 그래서 사용하실 때는 대표 이미지가 아닌 이미지들에 넣어야 한다는 점 참고 해주시면 되겠습니다. 앞의 </div style="display: flex; justify-content: center;">는 가운데 정렬입니다.
`alt`의 기능
특히, 유심히 보셔야 할 부분이 `alt`인데요. `alt`는 HTML 이미지 태그에서 사용되는 속성으로, "대체 텍스트(Alternative Text)"를 의미합니다. 이 속성은 다음과 같은 목적으로 사용됩니다:
1. 이미지 로딩 실패
웹페이지를 로딩할 때 이미지가 제대로 로드되지 않는 경우, `alt` 속성에 지정된 텍스트가 대신 표시됩니다. 이는 사용자에게 이미지가 로드되지 않는 이유를 알리고, 원래 이미지가 어떤 내용이었는지에 대한 힌트를 제공합니다.
2. 접근성 향상
스크린 리더와 같은 보조 기술을 사용하는 시각 장애인이 웹페이지를 이해하는 데 도움이 됩니다. 스크린 리더는 `alt` 속성의 텍스트를 읽어 사용자에게 이미지의 내용을 설명합니다.
3. SEO 최적화
검색 엔진은 이미지를 직접 "보지" 못하기 때문에, `alt` 텍스트를 사용하여 이미지의 내용을 이해합니다. 이는 이미지 검색 결과의 정확성을 향상시키고, 웹페이지의 SEO를 개선하는 데 도움을 줍니다.
따라서, `alt` 속성은 웹페이지의 접근성과 SEO를 향상시키는 중요한 요소입니다. 가능한 한 모든 이미지에 대체 텍스트를 제공하는 것이 좋습니다.
글 맺음
위의 방법들을 활용하여 HTML을 사용하여 이미지를 넣는 방법과 SEO를 최적화하는 방법을 알아보았습니다. 이미지를 삽입할 때는 사용자 경험과 검색 엔진 최적화를 모두 고려하여 이미지를 선택하고 대체 텍스트를 꼼꼼히 작성해야 됩니다. 이를 통해 블로그의 이미지는 관련성과 정보성을 갖추며, SEO와 접근성 측면에서도 효과적으로 활용될 수 있을 겁니다.
SEO 꿀둥지였습니다.