블로그 최적화 방법 -이미지편 2탄: alt태그 넣기
- 잘벌기/블로그키우기
- 2021. 6. 11.
왠지 블로그에 그림이나 사진이 하나도 없으면 괜히 성의 없어 보이고, 빠르게 훑기 힘들거라 생각하지 않나요? 그래서 가능한 많은 사진을 업로드하고 계시진 않나요? 아직도 그렇게 생각하시는 분이 있다면, 잘 오셨습니다. 어서 제 글을 꼼꼼히 읽어주세요.
아직 제 이전 글, [블로그 최적화 방법 - 이미지 편 1탄]을 읽지 않으셨다면, 어서 1탄부터 읽고 오시기 바랍니다. 제가 1탄에서 말씀드린 내용은 모두 이해하셨다고 생각하고 2탄을 진행할 예정이니깐요. 잠깐 이 페이지를 열어 두고, 1탄부터 읽고 다시 아래로 내려가시기 바랄게요!
블로그 최적화 방법 - 이미지편 1탄-
다들 블로그 하면서 사진 올릴 때 뭘 가장 신경 쓰세요? 내가 얼마나 잘 나왔는지? 고화질 사진인지? 무단 도용을 막기 위한 워터마크? 만약 여러분들이 블로그 할 때 이런 부분들만 신경 썼다면
thosewants.tistory.com
이미지 SEO 2탄. 'alt 태그' 넣기
이전 글에서 말씀드렸지만, 검색 엔진 로봇은 이미지를 읽지 못합니다. 그냥 이미지가 어느 위치에 있단 정도만 아는 거죠. 그러니까 '어떤' 이미지가 있는지에 대한 작업을 해야 한다고 말씀드렸죠? 그 부분은 1탄에서 다뤘으니 아직도 안 읽고 오신 분이 계시다면 얼른 스크롤 업하셔서 읽고 오시기 바랍니다.
alt태그란?
alt태그는 우리가 업로드한 이미지 파일을 제대로 로드하지 못할 경우, 이미지 대신 띄우는 대체 텍스트를 의미합니다. 따라서 이미지가 없더라도 원래 어떤 이미지를 보여주려고 한 것인지, 그리고 이미지를 보지 못하는 시각 장애를 가진 사용자가 불편 없이 웹사이트 내용을 이해하도록 돕는 보조적 역할이라고 보면 됩니다. 이미지 하단에 작성하는 설명과 차이점은 이미지가 제대로 작동하면 우리가 대체 텍스트를 볼 일이 없죠.
alt태그를 사용하는 이유는?
1. 웹 접근성이 향상된다.
시각 장애가 있는 사용자가 웹사이트를 방문하면 스크린 리더가 해당 페이지의 텍스트를 읽어준다고 합니다. 이때 이미지에 도달하면 이미지에 적용된 alt태그를 기반으로 해당 이미지가 무엇인지 설명하죠. alt태그가 없으면 스크린 리더가 대신 이미지 파일의 이름을 읽습니다. 그렇지만 잘 생각해보면 우리가 파일명을 저장할 때 대충 아무렇게나 저장하잖아요? 예를 들면, 사진 1, 사진 2 이렇게 쉽고 간편하게 말이에요. 그렇다 보니 웹사이트 최적화가 잘 이루어지지 않습니다.
2. 웹사이트 검색엔진 순위가 상승된다.
우리가 추가하려는 이미지는 당연히 우리가 쓰는 글과 관련 있는 내용일 것입니다. 그러니 해당 이미지에 우리가 타깃으로 삼는 키워드가 포함되면 그만큼 키워드와의 적합성이 높아질 것이고, 우리 글(혹은 블로그)의 점수가 올라가겠죠. 이밖에도 구글에서 검색하면 이미지 결과가 뜰 때가 있는데요. 이 경우에도 우리가 타깃 한 키워드로 이미지 검색 시 해당 이미지와 함께 우리 글이 뜨게 되는 거죠.
alt태그 코드 추가 방법
data-filename="파일명" alt="alt태그 내용" data-ke-mobilestyle="widthOrigin"|사진 설명|_##]</p>html 설정으로 들어가 보면 위와 같이 data-filename이라고 된 부분을 찾을 수 있습니다. 눈에 잘 띄지 않는다면, find 기능인 ctrl + f를 눌러 찾으시면 돼요. data-filename에 해당하는 부분은 여러분이 해당 이미지를 저장한 파일명이라고 보시면 돼요. 1탄에서 말씀드렸듯이 검색 엔진 로봇이 쉽게 인지할 수 있도록 아예 파일명도 글 내용에 맞게 적절하게 작업하여 저장하시는 게 좋겠죠?
그러고 나서 파일명 뒤에 alt="alt태그 내용"을 추가해 주셔야 합니다. alt라고 되어 있지 않기 때문에 직접 파일명 뒤에 alt=" " 에 해당하는 내용을 기입해 주셔야 해요. 아래 올바른 alt태그 작성 팁에 대해서도 설명드릴 예정이니 끝까지 읽으신 뒤에 알맞게 alt태그를 작성하시기 바랍니다.
올바른 alt태그 작성 팁
1. 짧고 구체적으로 쓴다.
alt태그는 이미지를 보지 못하는 상황에 나타나는 대체 텍스트임을 감안하여 구체적이면서 짧게 써야 합니다. 따라서 이미지로 표현하고자 했던 핵심 내용과 키워드를 담으면서도 간결하게 작성해야 하죠.
2. 관련성 높은 키워드를 자연스럽게 넣는다.
앞서 설명한 것처럼 이미지 검색 시에도 노출될 수 있도록 적절한 키워드를 녹인 문장으로 작성합니다.
이렇게 작성하고 나면 같은 글이라도 검색 로봇이 보기에 검색 엔진에 친화적으로 쓴 글이라고 평가합니다. 꼭 이것 때문만은 아니지만 이미지를 많이 넣게 되면 alt태그를 추가하는 작업을 일일이 해주어야 하기 때문에 굉장히 번거로워요. 그러니 로딩 속도와 alt태그 작업 속도를 모두 고려했을 때 너무 많은 이미지를 넣는 건 불필요하겠죠?
당장 새롭게 쓸 글이 없다면, 기존에 써둔 글들로 제가 1탄과 2탄에서 알려드린 이미지 최적화 작업을 해보시는 게 어떨까요? 다음 시간에는 같은 글이라도 더 검색 엔진 최적화로 쓸 수 있는 h태그 활용 팁에 대해 알려드릴게요!!
지금까지 찐 사장의 < 블로그 최적화를 위한 이미지 편 - alt태그 작성 팁 >이었습니다.
좋아요와 댓글, 구독은 찐 사장에게 힘이 됩니다♥