SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기

최근 ChatGPT 등의 AI에 관심이 많아져서 그런가, 왠지 반복적으로 하는 일들을 줄여볼 수 없을까? 하는 고민을 부쩍 많이 하게 된 것 같습니다.

매일 한 개 정도씩 블로그 포스팅을 하다보니 은근 반복되는 작업이 많습니다. 가장 반복하기 싫은 일은 검색엔진이 잘 읽어낼 수 있도록 첨부된 이미지의 alt 속성값을 넣어주는 일인 것 같습니다. 하기 싫지만, 검색최적화를 위한다면 반드시 해주기를 권장하는 단순반복업무.

게다가 SEO(Seacrh Engine Optimization: 검색엔진 최적화)를 맞추려면, alt 태그에 들어가는 글자들을 공백 대신에 하이픈(-)으로 이어주는 게 좋다고들 그러더라구요.(저는 잘 모르는 영역이라, 카더라~ 통신에 의거...)

그래서 포스팅 할 때 마다, 이미지를 넣을 때 마다 아래의 작업을 반복하고 있더랬습니다.

이미지 하단에 설명글을 써준다.
그걸 복사해서 Alt 태그 속성값으로 붙여 넣는다.
글자 사이 공백을 지우고, 하이픈(-)을 넣어준다.

단순 반복적인 행위는 일단 자동화를 고민해보자

생각없이 살다가, ChatGPT에 충격을 받았는지 머리를 좀 굴려보기로 했습니다.

왜 바보처럼 반복하고 있는 거지? 지금까지 공부했던, "정규식" 검사 방식과 "Javascript" 기초지식 정도면 충분히 반자동화 할 수 있지 않을까? 할 수 있다! 파이팅!!

정규식 만들고 테스트 하기

지난 번 포스팅을 하면서 정규식을 다시 좀 들여다 보게 되었는데요, 그 기억들을 떠 올려보면서 정규식을 만들었습니다.

이메일 주소를 검사하는 정규식(RegExp) 및 웹개발 적용

이메일 주소를 검사하는 정규식 및 웹개발 웹 서비스에 회원 가입을 하려면, 대부분 이메일 주소를 기입하는 과정이 존재합니다. 그런데, 사용자가 문자열을 입력하게 되면, 실시간으로 감지를

kincoding.com

"공백"만 검사해서 하이픈으로 바꿔치면 될테니까요.

사용된 정규식 : / /g

이게 끝입니다. 뒤에 붙는 g는 global의 의미인데요, 저 패턴을 문장 전체를 반복하라고 붙여줬습니다. 딱 1번만 찾을 거라면 g를 안붙이면 됩니다만... 문장 전체에 들어 있는 공백을 찾아야 하는 것이니까요.

g 옵션이 있는 상태, 없는 상태 둘 다 테스트 해보시면, 이해가 바로 됩니다.

그리고 '/공백/' 이런 식으로 빈칸을 두 개의 슬래시 사이에 넣었습니다.

Javascript의 replace() 내장 함수로 바꿔버리자

전체코드는 요렇게 한번 대충 작성해봤습니다.

  <style>
    #btn_hypener {
      display: block;
      width: 680px;
      height: 100px;
    }
    #btn-container {
      padding: 20px;
    }
  </style>

<body>
  <textarea name="userInput" id="userInput" cols="100" rows="10"></textarea>
  <div id="btn-container">
    <button id="btn_hypener">Hypener!</button>
  </div>
    <textarea id="result" cols="100" rows="10"></textarea>

  <script>
  document.querySelector("#btn_hypener").addEventListener("click", function () {
    let str = document.querySelector("#userInput").value;
    let result = str.replace(/ /g, "-");
    document.querySelector("#result").value = result;
    );
  </script>
</body>

혼자서 대충 쓸거라서 뭐 예쁘게 만들 필요없을테니... 아무튼 프로토타입 형태입니다.

이쁜 것 보다는, 영역을 넓게 큼지막하게 잡아서 빠르게 사용할 수 있도록 입력란과 버튼을 배치했습니다.

상단 영역에 문장을 붙여 넣기하고, Hypener 버튼을 클릭하면 공백을 하이픈(-)으로 바꿔쳐줍니다.

듀얼 모니터로 띄워놓고, 변환해가면서 사용하니 바보 같이 하이픈을 넣던 단순무식반복하던 행위가 싹 사라졌습니다.

옛말에 사람은 머리가 나쁘면 손발이 고생한다고 하더니, 선조들의 지혜를 다시금 새겨보는 오늘이 되었습니다.

마치며

매우 간단한 작업이었지만 막상 만들고 보니, 왜 진작 만들어 사용하지 않았을까 하는 한심한 생각도 들었습니다.

그리고 다음 번에는 버튼 클릭하지 않아도 자동으로 변환해주는 방식으로 업데이트 해야겠다는 발전적인 생각도 들었습니다. 역시.. 사람은 머리를 계속 써야 생각도 발전을 하게 되나봅니다.

취미처럼 공부하던 코딩을 이용해서, 나의 반복 행위를 줄여주는 간단한 프로그램을 직접 만들어 사용하게 되니 감회가 새롭습니다. 나만 몰랐었을 뿐, 참으로 훌륭한 세상에 살고 있습니다!

오늘도 짬을 이용해서 재미있게 코딩을 공부해보았습니다.^^

즐거운 코딩생활, 즐코딩.

KINcoding.

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

0.1 + 0.2 = 0.3이 아니다? 소숫점 계산 시 주의 사항 (0)	2023.02.07
JS function 문법 기초 정리 (0)	2023.02.03
Carousel을 직접 만들어 보자 Part 2 - 성능 향상 하기 (0)	2023.01.29
Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) (0)	2023.01.28
Dark Mode를 만들어 보자(ft. classList.add) (0)	2023.01.25

즐코딩 - KINcoding

SEO 최적화를 돕는, 이미지 Alt 속성에 Hypen 자동으로 넣기