워드프레스 블로그를 운영하면서, 분명 모든 이미지에 Alt 속성을 설정했는데, 네이버 웹마스터도구에서 Alt 속성이 누락되었다는 진단결과를 확인된 적이 없는지요?
워드프레스에서 사용하고 있는 테마, 플러그인 또는 워드프레스 사용법 등 원인으로, 이미지에 설정한 Alt 속성이 제대로 반영되지 않는 경우가 있는데, 그 원인으로 네이버에서 Alt 속성이 누락되었다는 진단결과가 나오게 되는 경우가 있겠습니다.
이 글에서는 워드프레스에서 Alt 속성을 설정했는데도, 제대로 설정이 되지 않는 문제를 파악하고, 누락문제를 해결하는 방법을 정리해보았습니다.
Alt 속성과 대체 텍스트는 같은 뜻이어서, 아래 글에서 혼용하여 설명한 점 이해하시길 바랍니다.
1. 워드프레스 대체 텍스트 설정방법
워드프레스에서 대체 텍스트를 설정하는 곳이 아래와 같이 두군데가 있습니다.
- 글 편집->블록->대체 텍스트
- 미디어 라이브러리->대체 텍스트
두 군데 모두 대체 텍스트를 설정하는 곳인데, 용도가 다르겠습니다.
1-1. 글 편집->블록->대체 텍스트
워드프레스 글 편집->블록에 대체 텍스트를 설정하는 항목이 있는데, 여기에 설정한 대체 텍스트가 네이버 웹마스터도구의 Alt 속성의 체크대상이 됩니다.
그래서 네이버 웹마스터도구에서 Alt 속성이 누락되었는다는 알림이 뜨면, 해당 글을 찾아 삽입된 이미지를 하나하나 클릭하면서, 대체 텍스트를 설정해주면 되겠습니다.
문제는 워드프레스에 헷갈리게 쉽게 미디어 라이브러리에도 대체 텍스트 설정이 있다는 것입니다.
1-2. 미디어 라이브러리->대체 텍스트
이미지 선택 또는 업로드->미디어 라이브러리에도 대체 텍스트를 설정해주는 곳이 있습니다.
미디어 라이브러리에서 설정하는 대체 텍스트는 해당 이미지 자체에 대체 텍스트를 설정해두는 것으로, 특정 글에 삽입하는 이미지에 대체 텍스트를 설정하는 것이 아닙니다.
즉 미디어 라이브러리에 대체 텍스트를 설정했다고 해서, 해당 이미지를 사용하고 있는 글의 이미지에 대체 텍스트가 적용되는 것이 아니라는 것입니다.
다시 설명하면, 동일한 이미지 파일이지만 글 편집->블록->대체 텍스트와 미디어 라이브러리->대체 텍스트는 서로 다르고, 동일한 이미지 파일에 대체 텍스트가 두개 있다는 것입니다.
미디어 라이브러리->대체 텍스트의 역할은, 글을 편집할 때 새로운 이미지를 업로드 하지 않고, 기존의 미디어 라이브러리에 있는 이미지를 선택하여 사용할 때, 미디어 라이브러리에 설정한 대체 텍스트가 글 편집->블록->대체 텍스트 항목에 자동으로 삽입된다는 것입니다.
2. 대체 텍스트 확인방법
alt 속성은 웹사이트의 HTML 파일을 오픈하여 확인할 수 있습니다.
위 캡쳐에서 alt=””로 표시되는 것은 대체 텍스트가 누락되었다는 것이고, alt= 뒤의 쌍다운표 안에 설명이 들어있으면 대체 텍스트가 제대로 설정되어 있다는 것입니다.
HTML 파일을 확인하는 방법은 아래와 같습니다.
2-1. URL 주소 앞에 view-source: 추가
웹페이지의 URL 주소 앞에 view-source:를 삽입하는 것으로 HTML 파일을 확인할 수 있습니다.
예를 들어 확인하고 싶은 URL 주소가 아래와 같을 경우
https://anotherark.com/79/
HTML 파일을 확인하고자 하면은 아래와 같이 입력
view-source:https://anotherark.com/79/
2-2. 단축키 Ctrl + U 또는 Cmd + Option + U (Mac)
웹페이지에서 단축키를 통해서도 HTML 파일을 확인할 수 있습니다.
윈도우일 경우 웹페이지에서 단축키 Ctrl + U를 눌러주면 HTML 파일을 확인할 수 있고, 맥북일 경우 Cmd + Option + U를 눌러주면 되겠습니다.
또한 웹페이지에서 오른쪽 마우스를 클릭하여 웹사이트 소스 코드 보기를 통해 HTML 파일을 확인할 수 있습니다.
3. 네이버 웹마스터도구 Alt 속성 누락 해결방법
이미 워드프레스 블로그를 오랫동안 운영해왔다면, 기존에 Alt 속성이 누락된 이미지들을 하나하나 찾아가서 설정하는 것은 어려움이 있겠으니, 네이버 웹마스터도구에서 체크해주는 Alt 속성 누락 리스트를 감사히 이용하면 되겠습니다.
네이버 웹마스터도구->사이트 진단에서 Alt 속성이 누락된 리스트를 확인할 수 있습니다. 물론 네이버에 수집되지 않은 URL주소들은 당연히 여기에 나타나지 않겠습니다.
오른쪽의 돋보기를 클릭하여 아래와 같이, 어떤 이미지에 대체 텍스트가 누락되었는지 확인할 수 있습니다.
이미지 파일의 파일명이 나타나기에, URL 주소에 들어가서 하나하나 체크해주면 되겠습니다.
물론, 파일명을 보지 않고도, 글 편집에 들어가서 이미지파일을 하나하나 클릭하면서 블록->대체 텍스트에 설명이 들어있는지 체크하는 것도 좋은 방법이 되겠습니다.
4. 마무리
워드프레스에서 대체 텍스트를 설정하는 곳이 아래와 같이 두군데가 있습니다.
글 편집->블록->대체 텍스트
미디어 라이브러리->대체 텍스트
두군데의 대체 텍스트의 용도가 서로 다르다는 것을 인지하셔야 하겠습니다.
결국 대체 텍스트로 인식되는 것은 글 편집->블록->대체 텍스트이어서 Alt 속성 누락되었다는 알림을 얻게 되면, 글 편집에서 설정해주어야 하겠습니다.
미디어 라이브러리->대체 텍스트는 라이브러리에서 이미지를 선택하여 사용할 경우, 라이브러리에서 설정된 대체 텍스트가 디폴트로 글 편집->블록->대체 텍스트에 삽입이 되는 용도가 되겠습니다.
대체 텍스트는 구글에서 체크를 해주고 있지 않지만, 이미지 검색으로 블로그 유입이 될 수 있는 상당히 도움이 되는 역할이기에, 꼭 모든 이미지에 설정해주는 것이 좋다고 봅니다.
그리고 대체 텍스트에 관해 더 상세한 내용은 아래 글에서 확인할 수 있습니다.
댓글