KEBI BLOG

IT,PC,모바일,스마트폰 정보와 팁 그리고 제품리뷰와 생활정보

티스토리 블로그 이미지 alt 태그 한번에 붙여넣는 방법

티스토리 블로그 이미지 alt 태그 한번에 붙여넣는 방법

티스토리 블로그를 하시는 분들은 대부분 네이버 웹마스터도구에 블로그를 등록을 하실텐데요. 등록을 한후에 사이트 최적화 항목을 보게 되면 HTML 구조, 링크관리, 모바일 사용성등이 나오는데요. 이중에서 HTML 구조부분에 이미지 alt 속성을 넣으라는 권장 사항이 있습니다. 이건 네이버 사이트 최적화 안내 ( https://searchadvisor.naver.com/guide/report-seo ) 페이지에 나와 있는 내용인데요. 티스토리에서 자동으로 alt 태그를 넣어주면 정말 좋겠지만 그렇지 않죠. 

이미지 alt 속성 네이버 최적화 안내페이지 
이미지 alt 속성 네이버 최적화 안내페이지 

이번 포스팅에서는 티스토리 블로그 이미지 alt 태그 한번에 붙여넣는 방법에 대해서 알아 보려고 합니다. 제가 아려드리는  방법은 신규에디터 기준이니 참고 부탁 드립니다. 

하기전에 미리 준비를 해야 하는게 있는게 하나 있는데요. 바로 정규식을 지원하는 에디터 입니다. 왜 필요 한지는 아래 포스팅을 보시면 이해가 되실거에요. 저는 atom 이라는 오픈소스 에디터를 사용했으니 참고 부탁 드립니다. 

티스토리 신규 에디터에서 이미지 설명 넣기

티스토리 alt 태그 넣기 예제
티스토리 alt 태그 넣기 예제

일단 제가 알려 드리고자 하는 방법을 사용하기 위해서는 신규 에디터에서 이미지 추가를 한후에 이미지 선택시에 하단에 나오는 "이미지를 설명해 보세요" 부분을 입력을 하는겁니다. 이부분에 alt 태그에 넣고자하는 내용을 넣어 주시면 됩니다. 포스팅에 들어가는 모든 이미지를 동일한 방법으로 처리 하시면 됩니다. 

기본모드에서 HTML 모드로 변경하기 

티스토리 alt 태그 넣기 예제
티스토리 alt 태그 넣기 예제

어느정도 포스팅이 마무리가 되셨다면 이제 기본모드에서 HTML 모드로 변경을 하시기 바랍니다. 그리고 거기에 나오는 코드를 전부 선택 (Ctrl + a) 하셔서 복사를 해주세요. 꼭 에디터 안쪽에서 전체 선택을 하셔야지만 코드 부분만 전체 선택이 됩니다. 그렇지 않으면 웹 페이지 전체가 선택이 되니 꼭 에디터 안쪽 부분에서 전체 선택을 하신후에 복사를 하세요. 

정규식 지원되는 에디터에 붙여넣고 alt 태그 넣기 

티스토리 alt 태그 넣기 예제
티스토리 alt 태그 넣기 예제

이제 마지막 단계로 정규식 지원이 되는 에디터에 복사한 태그 뭉치를 붙여 넣습니다. 그리고 바꾸기를 통해서 태그를 넣으면 되는데요. 여기에서 찾을 내용과 바꿀 내용은 아래와 같이 정규식으로 넣으시면 됩니다. 

찾을내용 : \"\|(.*?)\|\|
바꿀내용 : " alt="$1" alt="$1"|$1||

그러면 아래와 같이 붙여넣은 태그중에서 img 부분에 alt 태그가 들어간걸 확인할수 있습니다. 이걸 그대로 다시 티스토리 HTML 모드 에디터에 붙여 넣기 하시면 됩니다. 

티스토리 alt 태그 넣기 예제 
티스토리 alt 태그 넣기 예제 

아래처럼 붙여 넣기 하시면 되구요. 혹시 모르니 HTML 에서 기본모드로 변경을 하신후에 문제 없는지 한번더 확인을 하면 됩니다. 이렇게 하면 여러장의 이미지에 간단하게 alt 태그를 모두 추가 할수가 있습니다. 

티스토리 alt 태그 넣기 예제 
티스토리 alt 태그 넣기 예제 

개인적으로는 이미지 설명 부분이 바로 alt 태그로 들어 갔으면 좋겠는데.. 티스토리에서 왜 그렇게 않 했는지는 모르겠네요. 나중에라도 이미지 설명을 alt 로 넣어 주면 좋겠다는 생각이 드네요. 이제 포스팅을 확인해 보시면 아래처럼 이미지에 alt 태그가 들어가 있는걸 확인 할수 있습니다. 

티스토리 alt 태그 넣기 예제
티스토리 alt 태그 넣기 예제

이렇게 에디터로 복사한후에 변경하고 다시 붙여 넣는 방식이 아닌 javascript 로 직접 에디터의 내용을 수정 하도록 해보려고 했는데 수정을 하면 티스토리 에디터가 정상적으로 동작을 하지 않네요. 그리고 HTML 모드의 경우에는 textarea 나 input 이 아닌 실제 보여지는 부분은 모두 span 으로 처리가 되어 있어서 수정을 하더라도 실제로 티스토리 서버쪽과 맞지가 안아서 적용이 안되네요. ㅠ ㅠ

참고로 atom 의 경우에는 바꾸기 패턴을 저장해 놓는 패키지도 있습니다. 추가 하셔서 사용하시면 필요할때 바로바로 사용할수 있으니 참고하세요 ^^ atom 이외에 정규식을 지원한다면 어떤 에디터든 상관은 없습니다. 

어쨌든 개인적으로는 이런 방법으로 그나마 여러장의 이미지가 들어 갔을때 alt 를 넣기 제일 좋은 방법이네요. 그럼 이상으로 티스토리 사용하시는 분들에게 혹시라도 alt 태그 한번에 넣고 싶으신 분들에게 참고가 되셨길 바라면서 포스팅 마치도록 하겠습니다. 여기 까지 읽어 주셔서 감사합니다. ^^ 도움이 되셨다면 구독 & 공감 & 댓글 부탁 드려요 ~~~

31
스토리버킷 2020.04.18 19:04 신고

매번 귀찮고 빼먹기도 하고 그러는데, 다음 번에 한번 해봐야겠어요. 고맙습니다!

KEBI heokebi 2020.04.18 19:05 신고

전 이방법이 제일 괜찮은거 같더라구요

리뷰쏙 2020.04.18 19:04 신고

와~~~좋은 저보네요.^^

KEBI heokebi 2020.04.18 19:05 신고

감사합니다. ^^

리타임 2020.04.18 21:05 신고

좋은 포스팅 잘보고 갑니다.ㅎㅎㅎ매번 많은 것 배우고 가네요ㅎㅎ

KEBI heokebi 2020.04.18 22:46 신고

저도 배우는 중이라 ^^ 감사합니다.

IT's me 2020.04.18 21:10 신고

이 글을 보고서 alt가 이미지에 없다는걸 알았네요. alt가 있는게 seo에 좋으니까 넣으면 좀 더 낫지 않을까 싶네요...

KEBI heokebi 2020.04.18 22:47 신고

아무래도 좋은 영향을 주지 안을까 생각되네요.. ^^

서른셋 파이어족 2020.04.18 21:43 신고

어 간단하네용

KEBI heokebi 2020.04.18 22:49 신고

감사합니다. ^^

플랜정 2020.04.18 21:51 신고

좋은 정보 잘 읽고 갑니다^^

KEBI heokebi 2020.04.18 22:50 신고

댓글 감사합니다. ^^

히오기 2020.04.19 10:50 신고

좋은정보잘보고갑니다ㅎㅎ 오늘도행복한하루보내세요

KEBI heokebi 2020.04.20 11:13 신고

댓글 감사합니다. ^^

Austin's 2020.04.19 23:29 신고

꿀팁이네요 ㅎㅎ 감사합니다

KEBI heokebi 2020.04.20 11:16 신고

감사합니다. ^^ 그냥 방법을 찾다보니 이 방법도 괜찮을거 같아서 공유 해봤어요 ^^

HTML6 2020.04.20 10:20 신고

이번주도 좋은 포스팅 감사합니다 월요일 잘보내세요!!!^^

KEBI heokebi 2020.04.20 11:17 신고

댓글 감사합니다. ^^

꿈을쓰는남자 2020.04.20 16:55 신고

꿀팁 감사해요 구독하고 소통해요!

KEBI heokebi 2020.04.20 16:58 신고

댓글 감사합니다. ^^

깰리 2020.04.22 07:53 신고

티스토리는 진짜 알 수록 어렵고 신기하네요...ㅋㅋㅋㅋ 갈 길이 머네요 휴..

KEBI heokebi 2020.04.22 11:41 신고

^^ 저도 아직 어렵네요.. ㅎㅎ

2020.05.06 10:12

비밀댓글입니다

KEBI heokebi 2020.05.06 11:07 신고

댓글 내용이 이해가 가지 안네요 ^^;;;

Cacka IMae 2020.05.06 11:13 신고

첫에 블로그 들어오면
<title>바퀴의 블로그 :: 바퀴의 블로그</title>
이런식으로 하고싶는데 어떻게하는지 잘모르겠습니다 ㅠㅠ

KEBI heokebi 2020.05.06 11:23 신고

"첫에 블로그 들어오면" 이 말이 무슨 말씀인지 모르겠어요...

Cacka IMae 2020.05.06 11:27 신고

타이틀

Cacka IMae 2020.05.06 11:29 신고

제블로그 확인하면 어디부터 해야지는지 잘모르겠어요 도와주세요 ㅠㅠ

KEBI heokebi 2020.05.06 11:34 신고

다른분 스킨을 참고해서 본인의 스킨을 제작 하시려는건가요? 그게 아니라면 배포중인 스킨을 그냥 적용 하시면 될거 같은데...?? 블로그 보니 소스를 Copy & Paste 하시고 있는거 같아서... 그렇게 하시면 어디서 부터 손을 대야 하는지 어려워요.. 티스토리는 치환자를 사용하기 때문에 제가 지금 상태에서 어떻게 해야지 됩니다 라고 소스를 보지 않고서는 도와 드리기도 힘들구요 ^^;;;

torong 2020.08.11 14:54 신고

alt 넣는 것.... 한 번에 할 수 있었군요. 하나하나 하다가 지금 안하고 있는데, 다시 천천히 해보아야겠습니다. 정보 감사합니다.

청결원 2020.08.11 15:47 신고

포스팅 잘 보고 갑니다
비가 오지만 좋은 하루 보내세요~

Comment *

댓글 달기

6,575,686

전체

714

오늘

5,801

어제

Skin By KEBIBLOG Ver 1.0 Copyright ⓒ KEBI BLOG. All rights reserved.