구글 SEO - 티스토리 alt 태그 입력 자동화

이번 포스팅은 티스토리 블로그 작성 시 이미지에 대한 alt 태그 입력 방법을 자동화할 수 있는 방법을 소개한다. 구글 SEO를 고려한다면 블로그에 이미지를 삽입할 경우 alt 태그를 무조건 작성하는 것이 옳다. 그러나, 티스토리에서 블로그 작성 시 이미지에 대한 alt 태그를 자동으로 생성해 주지 않는 문제가 있다.

 

티스토리 유저들의 alt 태그 입력에 대한 불만 사항이 넘쳐 나는데 티스토리에서 개선하지 않는 점도 이상하고, 인터넷을 아무리 뒤져도 그에 대한 설루션도 없는 점이 아직도 잘 이해되지 않는다.

 

결국 목마른 자가 우물 파는 법이고, 내 목이 제일 말랐나 보다.

 

이번 글의 주요 내용은 다음과 같다.

• alt 태그의 정의
• alt 태그 작성 시 주의 사항
• alt 태그 수동 입력 방법
• 자바스크립트를 이용한 alt 태그 입력 자동화 방법

 

 

alt 태그란 무엇인가?

 

alt 태그를 입력하지 않고 이미지를 업로드하면 블로그의 SEO에 부정적인 영향을 미칠 수 있다는 사실을 알고 있는가?  alt 태그가 설정되어 있지 않으면 구글 검색엔진이 웹페이지를 크롤링할 때 이미지 파일을 이해할 수 없다. 따라서 alt 태그는 구글 검색 엔진이 페이지를 더 잘 이해하고 사람들이 온라인에서 검색할 때 최상의 결과를 제공할 수 있도록 하는 데 매우 중요한 역할을 한다.

 

기본적으로 alt 태그의 목적은 시각 장애인에게 이미지의 내용을 텍스트로 설명하여 접근성을 높이는 것이다. 그러나 검색 엔진의 웹페이지 크롤링에도 도움이 되므로 SEO가 향상된다. 이미지에 대한 alt 속성을 설정하지 않으면 웹사이트가 화면 판독기 및 브라우저에서 해석하기 어려워지고 시각 장애가 있는 사람의 사용자 경험이 감소하게 된다. 

 

따라서, 블로그 작성자는 방문자와 검색 엔진이 콘텐츠에 적절하게 액세스할 수 있도록 블로그 내의 모든 이미지에 alt 태그를 입력해야 한다.

 

 

alt 태그 작성 시 주의 사항

 

alt 태그를 작성할 때는 키워드를 적절히 사용하고 페이지의 콘텐츠 맥락에 맞는 텍스트를 사용해야 한다. 특히, 주의할 점은 alt 태그에 키워드를 반복적으로 사용하여 어뷰징 하는 것은 매우 위험하다. 최악의 경우 스팸 사이트로 전락할 수도 있다.

 

이렇게 하면 절대 안 된다.

<img src="dog.jpg" alt="개 개들 개새* 개쉐* 멍멍이 도그 퍼피 해피 진돗개 풍산개 지우개"/>

 

귀찮다면 이 정도만 하자. 중간은 간다.

<img src="dog.jpg" alt="개"/>

 

이 정도면 최고다.

<img src="dog.jpg" alt="아들과 공놀이를 하고 있는 진돗개"/>

 

 

티스토리에서 alt 태그를 수동으로 입력하는 방법

 

티스토리에서는 기본적으로 alt 태그를 지원하지 않는다. 그래서, 블로그 작성자가 이미지를 삽일할 때마다 html 모드로 전환 후 일일이 작성해야 한다.

 

내가 블로그 작성 시 alt 태그를 작성하는 방법은 아래와 같다.

 

0. 사전 준비 사항

이미지 파일 이름을 처음부터 의미있는 텍스트로 저장한다. 그리고, 블로그를 작성할 때 페이지의 맥락상 적절한 위치에 이미지를 삽입한다.

 

블로그 페이지의 편집이 완료되었다면, 이제부터 본격적으로 alt 태그를 입력하는 단계다.

 

1. html 모드로 변환한다.

 

2. 브라우저의 검색 입력창(ctrl+f)에서 'data-filename'으로 검색을 실행한다.

 

3. 파일 이름을 복사하여 alt 태그를 추가한다.

 

추가 전: ~~~ data-filename="쌀사비파-걍교쥬.png" ~~~

추가 후: ~~~ data-filename="쌀사비파-걍교쥬.png" alt="쌀사비파-걍교쥬" ~~~

 

4. 비공개 모드로 저장한다.

 

5. 개발자 모드에서 alt 태그를 확인한다.

 

크롬 브라우저에서는 아래와 같이 이미지에 대한 alt 태그를 확인할 수 있다.

F12 -> inspect 버튼 클릭 -> 마우스 커서를 이미지 위로 이동

 

크롬 브라우저 alt 태그 확인 화면

 

6. 확인이 끝났다면 공개 모드로 발행한다.

 

alt 태그 입력이 익숙해지고 자신이 있다면 4, 5번은 생략해도 된다.

 

 

alt 태그를 자동으로 입력하기 위한 자바스크립트 작성

 

나는 개발자다. 똑같은 일을 반복하다 보면 컴퓨터를 이용해서 자동화할 수 있는 방법을 찾아야 한다는 생존 본능이 발동한다. 그래야 칼퇴할 수 있기 때문이다. 위에서 alt 태그를 수동으로 입력하는 방법도 자동화할 수 있는 방법을 찾아보았다. 약 1주일간 구글링을 해 보았지만 답을 찾을 수 없었다.

 

저것만 자동화해도 포스팅 한 건당 5~10분은 절약이 될 것 같다. 그래서, 직접 해결하기로 했다. 아래의 javascript는 1차 결과물이다. 코드를 몰라도 주석을 참고한다면, alt 태그가 어떻게 입력되는지 이해할 수 있을 것이다. 

 

function addAltTag() {

	// find all image elements in this document
	var imgs = document.body.getElementsByTagName('img');

	// add alt tag to img element while iterating all imgs
	for (var i = 0; i < imgs.length; i++) {
		// get attributes of image element
		var attrs = img.attributes;
		// get file name from 'data-filename' attribute
		var filename_item = attrs.getNamedItem('data-filename');
		// get file name
		var filename = filename_item.value;
		// remove extension
		var tag_value = filename.split('.')[0];
		// add alt tag with text (file name)
		img.setAttribute('alt', tag_value);
	}

}

 

 

티스토리 alt 태그 자동 입력을 위한 최종 버전의 자바스크립트는 github로 공유한다.

https://github.com/shawsk0723/publish/blob/main/tistory_alt_tag_automation

GitHub - shawsk0723/publish

 

관리자 메뉴 -> 스킨 편집 -> html 편집 -> body 안의 적당한 위치(보통 제일 밑)에 붙여 넣으면 된다.

alt 태그 자동 입력을 위한 자바스크립트 적용 화면

 

각자의 티스토리 스킨에 맞게 커스터마이징과 디버깅이 필요할 수 있으니, 적용 시 주의하기 바란다.

 

 

자신만의 독창적인 콘텐츠와 구글 SEO가 결합되면 어떤 일이 생길까?

 

나를 포함한 많은 사람이 궁금해하는 문제인데, 구글신에서조차 답을 못 찾는 그런 문제가 있었다. 그래서 내가 직접 답을 찾고 포스팅을 했다. 물론 내가 알고 있는 선에서 alt 태그를 포함한 구글 SEO를 적용했다.

 

아래 그림은 그 페이지의 구글 검색 유입 현황이다.

 

나만의 콘텐츠에 구글 SEO 적용된 페이지 구글 검색 유입 현황

 

 

마치며

 

이번 포스팅은 alt 태그의 의미와 중요성, 그리고 내가 블로그 작성 시 사용하는 alt 태그 입력 방법과 자동 입력을 위한 JAVASCRIPT를 소개하였다. 구글 유입을 원한다면 블로그 작성과 함께 구글 검색 엔진 최적화(Google Search Engine Optimization)에 대한 공부도 병행하시길 바란다.

 

 

---

 

홈트레이닝에 최적화된 운동법, '케틀벨 스윙과 겟업'을 아시나요?

홈트레이닝, 케틀벨 스윙과 겟업

직장인에게 최적화된 투자법, '미국 배당 성장 투자'를 아시나요?

배당 성장 투자의 핵심은 시간이다, "존버"하자 !