티스토리 이미지 alt 속성 추가하는 방법

블로그의 최적화를 신경 쓰고 더 노출되기를 원하고 사이트 구조를 완벽하게 하고 싶은 사람이라면 네이버 서치 어드바이저, 구글 콘솔 등 웹사이트 분석도구를 이용할 것입니다. 

 

분석을 하다보면 밑의 사진과 같이 링크 관리의 상태가 기분 좋은 초록색 체크 상태가 아닌 노란색 느낌표 상태로 링크 구조 개선이 필요하다는 것을 발견하는 경우가 있을 것입니다.

네이버서치어드바이저-사이트구조모습

기본적으로 글을 작성할때 이미지를 넣지 않는다고 한다면 위의 링크 관리 관련된 문제는 많이 사라진다고 하지만 그림과 텍스트를 복합적으로 사용하는 것이 아무래도 글의 내용을 더 빠르고 이해하기 쉽게 표현할 수 있기에 링크 관리 문제를 위하여 이미지를 넣지 않는 방법을 선택하는 것이 아닌 이미지를 넣지만 링크 관리에 문제가 생기지 않는 방법을 찾는 사람들은 Image에 alt 속성을 넣는 것이 필요할 것입니다.

 

그렇다면 alt 속성은 무엇을 뜻하는지 알아보겠습니다.

왜 이것을 넣어야 사이트구조가 좋은 것으로 판단하는지를 알고 싶다면 이 단어의 뜻을 알고 있는 게 아무래도 도움이 되기 때문에 소개합니다.

 

alt는 alternative를 뜻합니다. 밑의 내용과 같이 무엇인가를 대체한다는 것입니다.

이미지에 alt 속성을 설정한다는 것은 image가 어떤 문제또는 환경적인 제약으로 인하여 불러올 수 없는 상황일 때 이 "이미지를 대체할 문구"를 적어 넣어 주신다고 생각하시면 됩니다.

출처-WordReference.com온라인영어사전

 

그렇다면 alt 속성을 넣는 방법을 알아보겠습니다.

위의 두가지 이미지에 직접 실습하며 설명하겠습니다.

 

Step 1. 글쓰기에 HTML 모드를 선택합니다.

 

Step 2. Image가 들어가 있는 코드를 찾아 <p>와 </p> 사이에 즉 <img> 태그에 alt 속성을 추가합니다. 

alt ="설명할 내용"으로 구성하면 됩니다.

위의 첫번째 이미지를 대상으로 하였을 때는 사진 설명을 그대로 이용하여 밑의 빨간 글씨 내용과 같이 alt="네이버서치어드바이저-사이트구조모습"으로 추가하였습니다.

 

" ##_Image|kage@40rsl/btrdlzpLjeY/A1S8u3hACD21NPnPoFdHM0/img.png|alignCenter|alt="네이버서치어드바이저-사이트구조모습" data-origin-width="753" data-origin-height="284" data-ke-mobilestyle="widthOrigin"|네이버서치어드바이저-사이트구조모습||_## "

 

여기서 이미지 하단 설명 부분이 alt 속성이 아닌지 의문이 생길 텐데 HTML 편집기에서 확인해 본 것과 같이 해당 내용에는 alt와 관련된 내용이 붙지 않습니다.

간단히 그냥 설명 주석을 넣는 부분이라고만 생각하시면 되겠습니다.

 

여기까지 alt 속성 추가하는 방법에 대하여 알아보았습니다.

이제부터라도 alt 속성을 추가하여 글을 작성하여 사이트 구조를 최적해 보시기 바랍니다.

 

문제점이나 문의점은 댓글로 부탁드립니다.