라이브러리 브랜드

2021. 10. 4. 13:25

티스토리 에디터 개발자 도구를 통해 Alt 태그 쉽게 추가하는 방법

공유하기

이미지의 Alt값은 일반 웹문서의 키워드와 같습니다. 구글이나 네이버, 다음에서 해당 이미지가 검색되기를 원할 경우에는 이미지에 Alt 요소를 추가해주는 것이 좋은데요. 더불어, Title 값도 함께 추가해준다면 검색엔진에서 내가 업로드한 이미지가 노출될 확률이 높아집니다.

저 같은 경우에는 글을 쓸 때, 일반 기본 모드로 글을 쓰는 경우도 많이 있지만, HTML 모드에서 글을 쓰는 경우가 더 많습니다. P 태그 요소와 더불어 다양한 기능을 CSS(스타일 시트)로 꾸밀 수 있기 때문인데요.

티스토리 내에서 이미지를 업로드하는 경우에는 고유의 주소 값으로 업로드되기 때문에 하나하나 찾아서 Alt 태그와 Title 태그를 찾아서 넣는 것이 쉽지 않습니다. 그래서 가장 쉬운 방법으로는 F12 개발자 도구를 활용해서 요소를 추가하는 방식입니다. 일단은 아래의 방법에 따라서 천천히 따라와 주시면 쉽게 Alt 태그와 Title 태그를 삽입하실 수 있으실 겁니다.

VR 하는 소녀

Alt 요소 쉽게 추가하는 방법

  • 위의 이미지에 해당 요소를 삽입해보겠습니다.

보시다시피 위의 이미지는 아래와 같은 이미지 고윳값을 가지게 됩니다. 티스토리 내에서 CDN 방식으로 업로드가 되는 것이기 때문인데요.

개발자도구를 통한 직접추가

위의 이미지 주소를 잘 보시면 하나의 치환 값으로 되어 있지만 확장자가 보이는 것을 확인하실 수 있으실 겁니다. 수직 세로 바가 두 개 겹쳐져 있는 부분에 Alt 태그와 Title 태그를 추가하실 수 있습니다만, 위 방법은 조금 헷갈릴 수 있습니다.

따라서 개발자도구를 통해서 쉽게 이미지의 해당 요소를 추가해보겠습니다. 컨트롤 + Shift + C 또는 F12를 누르면 개발자 도구가 실행됩니다. 실행된 창을 확인하시면 아래와 같은 개발자 도구 화면이 보이실 겁니다.

바로 아래의 화면이 개발자 도구입니다.

그다음에 개발자 도구의 좌측 상단에 위치한 아이콘을 클릭해줍니다.

좌측 상단에 있는 아이콘이 보이시나요?

그다음에는 빨간 표시가 되어 있는 부분을 클릭하고 해당 이미지를 클릭하면 해당 주소의 HTML 코드가 나타나게 됩니다. 이 상태에서 해당 요소가 활성화되어 있는 것을 확인하실 수 있으며, 엔터를 누르거나 이미지 링크를 더블클릭하면 해당 요소 칸이 활성화가 될 것입니다.

그러면 이미지 주소 링크의 맨 마지막에 Alt="키워드" Title="제목"으로 꾸미고자 하시는 부분을 작성하신 후에 엔터를 누르면 해당 코드에 요소가 추가된 것을 확인하실 수 있으실 겁니다.

다소 복잡해보이지만, 이 방법이 익숙해지면 매우 쉽게 Alt 요소를 추가할 수 있습니다. 이 과정이 조금은 귀찮아도 글을 쓸 때, 이미지에 삽입해주시면 검색 노출에 있어서 유리해질 수 있습니다. 티스토리도 또 하나의 웹사이트로써 SEO의 많은 부분에 영향을 받는다는 점을 기억하세요.