정보/블로그 운영팁

이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (고급 버전)

아미넴 2020. 12. 29.
반응형

얼마 전에 글의 제목을 이미지 태그의 alt 속성 값으로 활용을 했었는데요. 이번에는 좀 더 디테일하게 설정을 해 보도록 하겠습니다. alt 속성의 중요성 및 기타 내용은 앞서 작성한 포스팅을 참고 바랍니다.

이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (초급 버전)

 

이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (초급 버전)

이미지 태그의 alt 속성 값이 검색 사이트 키워드 역할을 한다는 말은 많이 들어 보셨을 겁니다. 하지만 뒤늦게 아셨거나 알고는 있지만 앞으로도 크게 신경쓰고 싶지 않은 분들이 계실텐데 그런

sangminem.tistory.com

 

목차

     

    아이디어 설명

    이전 글에서는 단순히 글 제목만을 이미지 태그 alt 속성 값으로 활용을 하는 방법을 다루었습니다. 그 정도로만 작업해도 사실 안 하는 것보다는 훨씬 나을 수 있지만 한 게시물의 모든 이미지에 alt 속성 값이 같아져서 약간 찜찜한 생각이 들었습니다. 그래서 글 내에 작성한 제목(제목1, 제목2, 제목3)까지 활용하면 어떨까 하는 아이디어를 떠 올렸습니다.

     

    예를 들면 글 제목유럽 여행기, 글 내 제목1프랑스 파리, 제목2루브르 박물관이고 그 부분에 포함된 사진이 있다면 이미지 태그의 alt 속성유럽 여행기 - 프랑스 파리 - 루브르 박물관이라고 부여하는 겁니다.

     

     

    로직 작성

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭합니다.

     

    그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

     

    body 태그 안쪽 제일 하단 script 태그에 다음과 같이 작성을 합니다.

    function updateTagsAttr() {
        var $titleList = $('.post-cover .inner h1, .entry-content h2, h3, h4');
        var titleListLength = $titleList.length; // 제목 개수 구하는 법은 각자 다를 가능성이 높음
        var $images = $('.tt_article_useless_p_margin').find('img');
        var cnt = 0;
        var limitCnt = 0;
        var title, title1, title2, title3, title4;
        title1 = $titleList.eq(0).text();
        $images.each(function(idx, img) {
            var $img = $(img);
            if(!$img.attr('alt') || !$img.attr('title')) {
                var checkFlag = false;
                while(!checkFlag){
                    if(cnt <= titleListLength) {
                        if(cnt === titleListLength || ($titleList.eq(cnt).offset().top < $img.offset().top && $titleList.eq(cnt+1).offset().top > $img.offset().top)) {
                            if($titleList.eq(cnt).prop('tagName') === 'H1') {
                                title = title1;
                            } else if($titleList.eq(cnt).prop('tagName') === 'H2') {
                                title = title1 + ' - ' + title2;
                            } else if($titleList.eq(cnt).prop('tagName') === 'H3') {
                                title = title1 + ' - ' + title2 + ' - ' + title3;
                            } else if($titleList.eq(cnt).prop('tagName') === 'H4') {
                                title = title1 + ' - ' + title2 + ' - ' + title3 + ' - ' + title4;
                            }
                            
                            if(!$img.attr('alt')) {
                                $img.attr('alt', title);
                            }
                            if(!$img.attr('title')) {
                                $img.attr('title', title);
                            }
                            checkFlag = true;
                        } else {
                            cnt++;
                            if($titleList.eq(cnt).prop('tagName') === 'H2') {
                                title2 = $titleList.eq(cnt).text();
                            } else if($titleList.eq(cnt).prop('tagName') === 'H3') {
                                title3 = $titleList.eq(cnt).text();
                            } else if($titleList.eq(cnt).prop('tagName') === 'H4') {
                                title4 = $titleList.eq(cnt).text();
                            }
                            checkFlag = false;
                        }
                    }
                    limitCnt++;
                    if(limitCnt > 100) {
                        break;
                    }
                }
            }
        });
    }
    
    $(document).ready(function() {
        updateTagsAttr();
    });

    먼저 글 제목, 글 내 제목1, 제목2, 제목3을 가져왔습니다. 그리고 글 제목과 글 내 어떤 하위 제목보다 위에 있을 경우는 alt 속성에 글 제목만 부여했고 제목1과 제목1 사이에 있는 이미지는 '글 제목 - 제목1' 형태로 부여하며 제목2 하위에 있는 이미지는 '글 제목 - 제목1 - 제목2'의 형태로 alt 속성 값을 부여한 로직입니다.

     

    이로써 글 하나에 이미지 태그의 alt 속성 값이 모두 동일해 지는 상황을 피했습니다.

    +내용추가 (2021.02.21)

    티스토리 목차 링크 클립보드 복사하기를 적용하신 분은 button 부분 유니코드 text를 제거해야 하므로 다음과 같이 변경해 주세요.

    // 수정 전
    if($titleList.eq(cnt).prop('tagName') === 'H2') {
        title2 = $titleList.eq(cnt).text();
    } else if($titleList.eq(cnt).prop('tagName') === 'H3') {
        title3 = $titleList.eq(cnt).text();
    } else if($titleList.eq(cnt).prop('tagName') === 'H4') {
        title4 = $titleList.eq(cnt).text();
    }
    
    =====================================================================
    
    // 수정 후
    var titleTemp = $titleList.eq(cnt).text();
    var buttonLoc = titleTemp.indexOf($titleList.eq(cnt).find('button').text());
    if(buttonLoc > -1) {
        titleTemp = titleTemp.substr(0, buttonLoc);
    }
    if($titleList.eq(cnt).prop('tagName') === 'H2') {
        title2 = titleTemp;
    } else if($titleList.eq(cnt).prop('tagName') === 'H3') {
        title3 = titleTemp;
    } else if($titleList.eq(cnt).prop('tagName') === 'H4') {
        title4 = titleTemp;
    }

     

    결과 확인

    다음 글을 예로 들어 결과를 확인해 보겠습니다.

     

    구글 핵심적인 웹 지표 CLS 측정 및 개선 방법

     

    구글 핵심적인 웹 지표 CLS 측정 및 개선 방법

    이 글을 보시는 분들 중에는 취미로 가볍게 또는 수익을 목적으로 시작하신 분이나 관심만 갖고 있고 아직 행동에 옮기지 않은 분들도 계실 텐데요. 저 또한 블로그를 해 보고 싶다는 생각을 꾸

    sangminem.tistory.com

     

    먼저 이미지 title이 글 제목 - 제목1 순으로 잘 표시되는 것을 볼 수 있습니다.

     

    개발자 모드에서 확인 결과 alt 속성 값도 원하는 대로 잘 들어갔습니다.

     

    글 제목 - 제목1 - 제목2 - 제목3 까지 있는 이미지 title 값도 잘 들어가는 것을 확인할 수 있습니다.

     

    alt 속성 값도 마찬가지로 다음과 같이 확인을 할 수 있습니다.

     

    아무래도 모든 이미지의 alt 속성 값이 같은 것 보다는 이렇게 다르게 하는 것이 더 좋을 것 같습니다.

    관심 있으신 분은 한 번 도전해 보세요 :)

    반응형
    그리드형(광고전용)

    댓글32

    • dreamk 2020.12.29 23:14 신고

      좋은 정보 감사합니다 ^^ 약간 머리가 아프지만 노력해보겠습니다 ^^
      답글

    • 변태개발자님 ㅋㅋ 저 코딩 책을 대여해놓고 몇주짼데 아직 시작할 용기가 안나네요. 아미넴님 포스팅에 자극 받아서 내일은 책 첫장을 펼쳐볼까 합니다! 핫핫
      답글

    • KEIhk 2020.12.30 09:22 신고

      이미지 파일에 alt 로 설명을 넣어주어야 하는 이유가 있나요?
      답글

    • 요즘아빠 :) 2021.01.18 15:40 신고

      요번 내용도 적용완료입니다 :) 매번 정보만 얻어가서 죄송스럽네요 ㅜㅜ
      답글

    • ★정보바다 2021.02.20 06:57 신고

      정말 감사합니다~~
      답글

    • insideBox.EZ 2021.02.24 23:07 신고

      워드프레스 에도 반영 하고 싶은데 , 아무리 머리 잡고 수정 해 봐도 모르겠네요 ^^:; 정말 꿀 기능입니다
      답글

    • ( ˃ᴗ˂ ) 2021.04.04 22:50 신고

      선생님 적용시켰는데, f12로 확인해보니 잘되다가 지금은 또 제목1,2 등의 부,소제목들이 alt에 안뜨는데... 왜그런지 좀 봐주실수 있으실까요. 되다가 갑자기 안되내요... 원래 - 제목1 - 제목2 이런식으로 - 이거 다음으로 떳었거든요. 근데 타이틀만 적용이 되요...
      답글

    • ( ˃ᴗ˂ ) 2021.04.04 22:56 신고

      아.... 첫 시작하는 h2 제목 위에 있는거라 타이틀 제목만 적용됬구나... 이제 이해 했습니다...
      답글

    • 정말 좋은 정보 감사드립니다. 혹시 이런것도 적용가능한지 여쭙습니다
      그냥 이미지 넣은 순서대로 "제목-1" ,"제목-2" , "제목-3"......
      이렇게 적용할수는 없는지요?
      답글

      • 아미넴 2021.05.01 12:33 신고

        안녕하세요. 님이 말씀하신 내용은 복잡하게 제목1,2,3의 구성에 따라 뎁스를 계산하는 것이 아니고 바로 위의 제목 태그만 가져와서 적용시키도록 바꾸면 되는거라 더 간단해 보입니다.

    • ꗯ̤̱ 2021.05.07 16:50 신고

      body태그 제일 안쪽 하단 <--- 여기가 어디에요?
      HTML까지 가서 <body> 는 알겠는데 제일안쪽하단 이 어딘지 모르겠어요
      답글

    • ꗯ̤̱ 2021.05.07 19:23 신고

      저는 왜 안될까요? 고래스킨사용중인데 적용하면 페이지하단에 붙여넣은 내용이 그대로 노출이 됩니다.

      </script>
      이곳에 그대로 붙여 넣었습니다.
      </body>
      답글

      • 아미넴 2021.05.07 19:30 신고

        아 그게 아니구요.
        body 태그 안쪽 제일 하단 script 태그에 다음과 같이 작성을 합니다.
        이 말의 의미를 더 정확히 말씀드릴게요.

        <!-- 생략 -->
        <script>
        이 부분에 넣으셔야 됩니다
        </script>
        </body>

    • 떠구리 2021.06.21 13:08 신고

      이렇게 하면 따로 alt태그를 넣을 필요가 없겠네요! 일일이 넣느라고 힘들었는데ㅠㅠㅠ 지금까지 넣은 alt태그는 그냥 놔두면 되겠죠?
      답글

      • 아미넴 2021.06.21 13:18 신고

        네 기존에 넣은 정보는 건드리지 않습니다.
        그런데 일일이 넣는게 가장 좋은 방법인거 같긴해요. 이 방법으로는 인식못하는 검색엔진도 있는거 같더라구요. 그래도 아예 안넣는거보단 이 방법이라도 쓰는게 좋아 보입니다.

    • 익명 2021.07.03 16:42

      비밀댓글입니다
      답글

      • 아미넴 2021.07.03 20:24 신고

        아네~ 고려를 못한 부분인데 피드백 감사합니다.
        말씀하신 기능은 추후 반영 가능여부를 검토한 뒤에 반영해 보도록 하겠습니다.
        다시 한 번 감사드립니다.

    • 힘센캥거루 2021.10.02 01:01 신고

      와 대박입니다... 이때까지 alt값 전부 손으로 넣고 있었거든요... 너무 감사합니다.
      답글

    • 익명 2022.02.16 15:11

      비밀댓글입니다
      답글

      • 아미넴 2022.02.16 20:26 신고

        안녕하세요~ 아래에 해당하는 부분은 스킨마다 달라서 분석을 좀 해보셔야 합니다.

        var $titleList = $('.post-cover .inner h1, .entry-content h2, h3, h4');
        var titleListLength = $titleList.length; // 제목 개수 구하는 법은 각자 다를 가능성이 높음
        var $images = $('.tt_article_useless_p_margin').find('img');

    • 인파_ 2022.03.07 00:22 신고

      안녕하세요 포스팅 잘 봤습니다.

      제가 알기론 봇이 이미지 alt를 검사할때 바로 img 태그 만나자마자 검사해버려서, 후처리 스크립트로 alt넣어도 소용이 없는걸로 알고있습니다.

      예전에 저도 귀찮아서 스크립트로 처리하려 했는데, 빙 웹마스터에서 검사해보니 여전히 alt누락 오류를 표시하더라구요. 직접 alt수정하지 않는한 그러는것 같던데,

      근데 라이트하우스하고 빙 하고 또 다르고.. 저는 잘몰라서 저는 직접 넣고 있어요 ㅎㅎ;
      답글

      • 아미넴 2022.03.07 00:27 신고

        안녕하세요. 그 점은 인지하고 있긴 한데 빙은 점유율이 크지 않아서 일단은 무시 중입니다 ㅎ 귀찮음 대비 효율이 크지 않은 느낌..

      • 인파_ 2022.03.07 11:41 신고

        궁금한점이 있는데 이미지 alt 내용이 이미지 마다 반드시 달라야하나요?

      • 아미넴 2022.03.07 11:53 신고

        반드시~라고 할 것까진 없어 보이고 동일한 내용보단 이미지를 더 잘 표현하는 내용을 각각 입력하는 것이 SEO에 더 도움을 줄 수 있겠죠.

    💲 추천 글