티스토리 alt 태그 자동 입력 스크립트

alt 태그란?

alt 태그는 HTML에서 이미지 요소 <img>에 사용되는 속성입니다. 이 속성은 이미지가 표시되지 못할 때 대체 텍스트를 제공합니다. 대체 텍스트는 시각 장애인이나 이미지 로딩에 실패한 경우를 포함하여 이미지를 볼 수 없는 경우에 유용합니다. 대체 텍스트는 이미지의 콘텐츠와 기능을 설명하는 간결한 설명이어야 합니다. 이 설명은 이미지의 의미나 내용을 이해할 수 있도록 도와주어야 합니다. 또한 검색 엔진은 이 대체 텍스트를 활용하여 이미지를 이해하고 검색 결과에 포함시킬 수 있습니다.

alt 태그 자동입력

alt 태그는 검색 엔진 최적화를 위해 매우 중요한 요소입니다. 하지만 이미지를 많이 사용하는 글쓰기 작업에서 alt 태그를 일일이 입력하는 것은 귀찮은 일입니다. 그래서 글 작성 시 이미지에 자동으로 alt 태그를 입력할 수 있는 스크립트를 사용하려 합니다. 이 스크립트를 사용하면, 이미지를 업로드할 때 alt 태그를 입력하지 않아도 자동으로 입력됩니다. 이렇게 하면 시간과 노력을 절약할 수 있으며, 검색 엔진에서도 이미지를 인식할 수 있습니다. 하지만, 이 스크립트를 사용할 때는 alt 태그가 정확한 정보를 제공하도록 주의해야 합니다. 검색 엔진은 alt 태그를 통해 이미지의 내용을 이해하기 때문에, 올바른 정보를 입력해야 검색 결과에서 노출될 가능성이 높아집니다. 따라서, 티스토리에서 제공하는 스크립트를 사용하면서도 alt 태그에 충분한 정보를 입력하는 것이 중요합니다. 이렇게 하면, 검색 엔진 최적화에 큰 도움이 될 뿐만 아니라, 사용자들에게도 더욱 유용한 정보를 제공할 수 있습니다.

자동 입력 스크립트

아래 스크립트를 티스토리 html편집 /body 적당한 위치에 붙여 넣으시면 됩니다.

<script>
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++) {
        var img = imgs[i]; // get current image element
        // 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);
    }
}
</script>

이 스크립트는 구성에 대해 설명드리겠습니다. HTML 문서 내의 모든 이미지 요소 <img>에 대해 대체 텍스트(alt 속성)를 추가하는 JavaScript 함수를 정의합니다.

1. addAltTag() 함수는 이미지에 대체 텍스트를 추가하는 기능을 수행합니다.
2. document.body.getElementsByTagName('img')를 사용하여 HTML 문서 내의 모든 이미지 요소를 선택합니다.
3. for 루프를 통해 모든 이미지 요소에 대해서 아래의 작업을 수행합니다.
   • 각 이미지 요소의 속성을 가져옵니다.
   • 'data-filename' 속성에서 파일 이름을 가져옵니다.
   • 파일 이름에서 확장자를 제외한 부분을 추출합니다.
   • 추출한 파일 이름을 대체 텍스트로 설정하기 위해 이미지 요소의 'alt' 속성에 추가합니다.
4. 이렇게 함으로써 이미지 요소에는 이미지 파일의 파일 이름이 대체 텍스트로 추가됩니다.

위 스크립트를 사용하여 글작성하실 때 Alt태그에 조금이나마 신경을 덜 쓸 수 있었으면 합니다. 그럼 오늘 작은 성공을 경험하시기 바랍니다.