728x90
자동화의 필요성
같은 작업을 반복하다 보면 점점 익숙해져 실수가 줄어들게 됩니다. 하지만 가끔 순간적으로 작업을 빠뜨리는 경우가 생기곤 합니다. 예를 들어, SEO 최적화를 위해 "alt" 태그를 입력해야 하는데, 이를 잊어버리는 일이 발생할 수 있습니다. 이런 실수를 방지하기 위해서는 자동화 방법을 찾아보는 것이 효과적일 수 있습니다. 자동화 도구나 스크립트를 활용하면 반복적인 작업을 더 효율적으로 관리할 수 있고, 실수를 최소화할 수 있습니다. 이렇게 하면 작업의 일관성을 높이고, 더 나은 결과를 얻는 데 도움이 될 것입니다.
Alt 지동 입력 스크립트
<script>
/*
https://izzang65.tistory.com
add alt tag to image by file name automatically
*/
function addAltTagToImage(img) {
const ALT_TAG = "alt";
const TITLE_TAG = "title";
const DATA_FILENAME_TAG = "data-filename";
var attrs = img.attributes
var filename_item = attrs.getNamedItem(DATA_FILENAME_TAG);
if(!filename_item) {
return;
}
var filename = filename_item.value;
if(!filename) {
return;
}
var tag_value = filename.split('.')[0];
if (!img.hasAttribute(ALT_TAG)) {
img.setAttribute(ALT_TAG, tag_value);
}
if (!img.hasAttribute(TITLE_TAG)) {
img.setAttribute(TITLE_TAG, tag_value);
}
}
function updateImageAttribute() {
const IMG_TAG = "img";
// find all 'img' elements
var imgs = document.body.getElementsByTagName(IMG_TAG);
// add alt tag to img element while iterating all imgs
for (var i = 0; i < imgs.length; i++) {
addAltTagToImage(imgs[i]);
}
}
$(document).ready(function() {
updateImageAttribute();
});
</script>위 코드는 티스토리에 첨부된 이미지에 alt 태그를 자동을 입력해 주는 기능을 가지고 있습니다.
적용방법
- 자신의 티스토리 스킨폅집에 접속합니다.
- HTML편집 > Body 적당한 위치에 복사 붙여 넣기 합니다.
주의사항
위 스크립트를 그대로 복사하여 붙여 넣기만 해서는 안 됩니다. 티스토리 스킨은 개인마다 다르기 때문에, 자신의 스킨에 맞게 커스터마이징(Customizing)과 디버깅(Debugging)이 필요합니다. 적용할 때 주의가 필요하므로, 미리 자신의 스킨 내용을 저장해 두는 것이 좋습니다. SEO 최적화를 통해 많은 곳에 자신의 글이 노출될 수 있다는 점도 잊지 마시기 바랍니다.
728x90
