728x90
반응형
Art 태그 자동화
똑같은 작업을 계속 반복하다 보면 익숙해져서 실수가 줄어들기는 하지만,
때로는 순간적으로 그 작업을 빠트려 버리는 경우도 있습니다.
또한, SEO 최적화를 위해 "art" 태그를 입력하는 작업도 해야 하지만,
가끔 이런 입력을 잊어버리는 글도 발생할 수 있습니다.
이런 실수를 방지하기 위해서는 자동화 방법을 찾는 것이 가장 효과적일 수 있습니다.
<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>
위 코드는 티스토리에 첨부된 이미지에 art 태그를 자동을 입력해 주는 기능을 가지고 있습니다.
사용방법
사용방법을 알아보도록 알려드리도록 하겠습니다.
티스토리 스킨편집 > HTML편집 > Body 적당한 위치에 복사 붙여 넣기 합니다.
위 스크립트를 그냥 바로 복사 붙여 넣기 하시면 안 됩니다.
주의사항
티스토리 스킨이 개인마다 차이가 있기 때문에
자신의 스킨에 맞게 커스터마이징(Customizing)과 디버깅(debug)이 필요합니다.
적용 시 주의하셔야 되기 때문에 미리 자신의 스킨의 내용을 저장해 두시기 바랍니다.
SEO 최적화가 되면 정말 많은 곳에 자신의 글이 노출될 수 있다는 점 잊지 마시기 바랍니다.
728x90
반응형