티스토리 뷰

티스토리 alt 태그를 한번에 넣는 방법을 알아보겠습니다. alt 태그는 이미지가 브라우저에 표시될 수 없을 때 이미지를 설명해주는 내용을 넣는 태그입니다. alt 태그를 넣어야 구글상위 노출을 할 때 보다 높은 점수를 받는다고 합니다.

티스토리 alt 태그 넣기 썸네일
티스토리 alt 태그 넣기 썸네일

 

하지만 티스토리 신에디터에서는 구에디터와 달리 alt 태그를 넣을 수 있는 메뉴가 없습니다. 따라서 HTML로 편집을 해서 직접 티스토리 alt 태그를 입력해야 합니다. 

 

그런데 하나씩 alt 태그를 입력하는 것이 힘들 때가 있습니다. 정규표현식을 이용하면 쉽게 티스토리 alt 태그를 입력할 수 있습니다. 그러면 아래에서 자세한 방법을 알아보겠습니다. 

 

목차

  • 티스토리 alt 태그 한번에 넣기
    • 1. alt 태그 확인하는 방법
    • 2. alt 태그 입력하는 방법
    • 3. 정규표현식 사이트 이용하기
    • 4. 티스토리 포스팅 내용 전부 복사하기
    • 5. 티스토리 블로그에 다시 붙여넣기
    • 6. 핵심요약
    • 관련 포스팅

 

티스토리 alt 태그 한번에 넣기

1. alt 태그 확인하는 방법

크롬 브라우저에서 F12키를 눌러서 alt 태그를 확인할 수 있습니다. 

F12키 누르기
F12키 누르기

 

빨간색으로 표시한 선택 아이콘을 클릭하고 사진을 선택합니다. 

선택 아이콘
선택 아이콘

 

티스토리 포스팅을 할 때 이미지 아래에 내용을 입력하면 alt 태그에 들어가지 않습니다. 

이미지 아래에 입력하기
이미지 아래에 입력하기

 

data-alt라는 곳에 들어가게 됩니다. 

data-alt
data-alt

 

이미지 아래에 입력한 것은 figcaption태그로 이미지를 설명하는 역할을 합니다. 

figcaption
figcaption

 

alt 태그는 아래와 같이 alt="설명하는 내용"으로 표시됩니다. 

티스토리 이미지 alt 태그 위치
티스토리 이미지 alt 태그 위치

 

2. alt 태그 입력하는 방법

에디터에서 HTML 모드를 선택합니다. 

HTML 모드
HTML 모드

 

##_Image로 시작하는 것이 이미지입니다. "widthContent" 뒤에 alt="" 입력하고 ""사이에 이미지를 설명하는 내용을 입력하면 alt 태그가 입력됩니다. 

alt 태그 입력하기
alt 태그 입력하기

 

하지만 이 방법을 사용하면 사진 갯수만큼 alt 태그를 넣어야 해서 불편합니다. 정규표현식 사이트를 이용하면 쉽게 티스토리 alt 태그를 입력할 수 있습니다.

 

3. 정규표현식 사이트 이용하기

아래 링크를 클릭해서 정규표현식 사이트에 들어갑니다. 정규표현식이란 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어를 말합니다. 자세한 내용은 위키피디아에서 정규표현식을 설명한 내용을 확인하시기 바랍니다. 

 

Expression 메뉴에서 정규표현식을 입력하면 규칙에 맞는 문자를 찾아서 표시해줍니다.

정규표현식 사이트
정규표현식 사이트

 

빨간색으로 표시한 곳에 정규표현식을 입력하면 됩니다. 

정규표현식 입력하기
정규표현식 입력하기

 

그림을 나타내는 코드를 복사해서 붙여넣었습니다.

코드 붙여넣기
코드 붙여넣기

 

우리의 목표는 "widthContent" 다음에 있는 |이미지 설명하는 내용||를 찾아서 그 내용을 alt 태그 안에 넣는 것입니다. 그리고 이미지 아래에 들어간 내용은 그대로 있도록 합니다.

 

data-ke-mobilestyle="widthContent" alt="구글 블로그 만들기 Blogger 선택" |구글 블로그 만들기 Blogger 선택||

 

widthContent 뒤에 "|를 찾아야 합니다. 

widthContent"|구글 블로그 만들기 Blogger 선택||

 

정규표현식에서 원하는 문자를 찾고 샆으면 엔터 위에 있는 원표시(₩)를 눌러서 찾고 싶은 문자를 입력하면 됩니다. 달러표시를 클릭하면 역슬레쉬가 되는 경우가 있습니다. 

 

정규표현식에 \"를 입력합니다. 그러면 "를 찾아서 표시해줍니다.

정규표현식 입력하기
정규표현식 입력하기

 

|는 원표시(₩) 위에 있는 기호로 Shift+₩로 입력하면 됩니다.\"\|를 입력하면 "|를 찾아줍니다.

 입력하기
정규표현식 입력하기

 

"|뒤에 이미지를 설명하는 내용이 나옵니다. 여기에서는 숫자, 문자, 기호 등이 들어갈 수 있습니다. 이때는 점(.)을 사용하면 됩니다. 점(.)은 숫자, 문자, 기호 등을 나타냅니다.

 

\"\| 뒤에 점을 세 개 찍으면 세 개까지 표시해줍니다. 

 

\"\|...

정규표현식 입력하기
\"\... 입력하기

 

이미지를 설명하는 내용은 여러 문자가 올 수 있습니다. 이때는 별표(*)를 사용합니다. 별표(*)는 앞에 있는 문자가 0개 이상 있다는 뜻입니다. .*은 숫자,  문자, 기호 등이 0개 이상 있다는 뜻입니다. 

 

\"\|.*

정규표현식 입력하기
\"\.* 입력하기

 

이미지 설명한 내용 뒤에 |문자가 두개가 있습니다. 뒤에 \|를 두번 연속해서 써줍니다.

 

 \"\|.*\|\|

정규표현식 입력하기
정규표현식 입력하기

 

정규표현식으로 "|구글 블로그 만들기 Blogger 선택||을 찾았습니다. 

 

이제는 이것을 Tools 메뉴에서 바꿔보겠습니다. <Replace>를 클릭합니다. 

Replace 클릭하기
Replace 클릭하기

 

$&는 찾은 정규표현식으로 찾은 문자열인 "|구글 블로그 만들기 Blogger 선택|| 전체를 나타냅니다. $& 앞뒤로 <<, >>를 붙이면 아래와 같이 기호가 붙습니다. 이것을 잘 활용하면 티스토리 alt 태그 붙이기를 쉽게 할 수 있습니다. 

$& 사용법
$& 사용법

 

다른 기호를 필요없고 이미지를 설명한 내용만 사용하고 싶습니다. 정규표현식에서 .*를 괄호(())로 감쌉니다. 

\"\|(.*)\|\|

정규표현식 입력하기
정규표현식 입력하기

 

그리고 Tools 메뉴에서 $1를 입력해봅니다. $1은 정규표현식에서 괄호로 감싼 문자열을 말합니다. 그러면 Tools 메뉴에서 아래와 같이 글자만 남게 됩니다.

$1 사용하기
$1 사용하기

 

이것을 alt 태그 안에 넣어야 합니다. 

 

widthContent뒤에 큰따옴표오고 한 칸 띄어야 합니다. 그래서 " $1라고 입력합니다. 

정규표현식 입력하기
정규표현식 입력하기

 

그리고 alt="" 안에 $1를 넣으면 됩니다. 그러면 alt 태그 안에 이미지를 설명한 내용이 들어갑니다. 

정규표현식 입력하기
정규표현식 입력하기

 

alt 태그가 끝나면 |기호가 오고 이미지를 설명한 내용다음에 |기호가 두 개 있어야 합니다. 아래와 같이 입력합니다. 그러면 원하는 대로 alt 태그와 이미지 아래에 표시되는 내용이 잘 입력됩니다. 

 

" alt="$1"|$1||

alt 태그 입력
alt 태그 입력

 

4. 티스토리 포스팅 내용 전부 복사하기

티스토리에서 포스팅을 다 작성합니다. 그리고 HTML 모드를 선택합니다. 

 

Ctrl+A를 눌러서 전체선택합니다. 그리고 코드를 복사합니다. 전체선택 단축키는 컴퓨터를 할 때 많이 사용하므로 꼭 기억하기 바랍니다.

전체선택해서 복사하기
전체선택해서 복사하기

 

복사한 코드를 정규표현식 사이트에 붙여넣습니다. 

 

그런데 이미지를 연속해서 놓으면 아래와 같이 원하는 내용만 선택되지 않는 경우가 있습니다. 

잘못 선택되는 경우 발생
잘못 선택되는 경우 발생

 

정규표현식에서 별표(*) 뒤에 ?를 붙이면 됩니다. ?는 앞에 글자가 있을 수도 있고, 없을 수도 있다는 뜻입니다. 정규표현식 설명하는 포스팅에서 자세한 내용을 확인해보는 것을 추천합니다.

 

 

티스토리 alt 태그를 에러 없이 한번에 넣기 위해서는 정규표현식에서 \"\|(.*?)\|\|를 입력해야 합니다. 아래와 같이 원하는 것만 잘 선택되었습니다. 

원하는 것만 선택
원하는 것만 선택

 

Tools 메뉴를 확인해보니 티스토리 alt 태그가 한번에 들어간 것을 확인할 수 있습니다. 

alt 태그 확인하기
alt 태그 확인하기

 

여기서 주의해야 할 점이 있습니다. 모든 이미지 아래에 이미지를 설명하는 내용을 넣어야 합니다. 

 

이미지 설명하는 내용 모두 적기
이미지 설명하는 내용 모두 적기

 

이미지를 설명하는 내용을 넣지 않으면 아래와 같이 |뒤에 설명하는 내용이 없어져서 alt 태그에 빈 내용이 들어갑니다. 

"widthContent"|||_##]

 

Tools 메뉴에서 입력칸을 선택하고 Ctrl+A키를 눌러서 전체 선택을 합니다. 

전체 복사하기
전체 복사하기

 

5. 티스토리 블로그에 다시 붙여넣기

이것을 다시 티스토리 블로그에 붙여넣으면 티스토리 alt 태그 한번에 넣기가 완료됩니다. F12로 확인해보니 alt 태그가 잘 들어갔습니다. 

alt 태그 확인하기
alt 태그 확인하기

6. 핵심요약

  • 정규표현식 :  \"\|(.*?)\|\|
  • 바꿀 내용 : " alt="$1"|$1||

 

이번 포스팅에서는 티스토리 alt 태그 한번에 넣는 방법을 알아봤습니다. alt 태그를 넣어야 SEO에서 좋은 점수를 받아서 구글 상위노출에 유리합니다. 그리고 티스토리 스킨 속도가 빨라야 SEO에 더 좋은 점수를 얻는다고 합니다. 티스토리에서 빠른 스킨이 궁금한 분은 티스토리 스킨 속도를 비교한 포스팅을 읽어보는 것을 추천합니다. 

 

관련 포스팅

댓글
  • 프로필사진 비밀댓글입니다 2021.02.11 00:07
  • 프로필사진 잇플 위치는 상관 없습니다 ^^ 정규표현식으로 바꿀 때 widthcontent 뒤에 넣는 게 편해서 이 방법을 사용했습니다~ 2021.02.11 14:15 신고
  • 프로필사진 태사자 html코드에 오류가 나지않을가 생각했는데,알트태그 삽입 위치는 중요한게 아니었군요.;;
    정규표현식 다소 어렵게 다가오는데 더 쉬운 방법은 없겠죠?..ㅎ;;
    2021.02.11 16:45
  • 프로필사진 주부사전 스텔라 빙 웹마스터에서 alt태그 오류를 자꾸 지적하길래 수동으로 다 넣어야하나 고민했는데 정말 굿팁입니다. 감사합니다. 익숙해지려면 오래걸릴듯하네요. 새로 쓰는 글부터 차근차근 적용해 나가야겠습니다. 2021.07.14 15:39
  • 프로필사진 잇플 네^^ 도움이 되셨다면 정말 다행입니다~ 2021.07.16 15:24 신고
  • 프로필사진 alt alt 태그 써줄 때는 이미지 설명을 어떤 식으로 써줘야 할까요? 2021.08.16 16:48
  • 프로필사진 잇플 이미지를 키워드로 설명하는 것이 좋습니다. 예를 들어 스포츠 사진이라면
    농구-슛-자세 이런식으로 설명하면 좋습니다.
    2021.08.20 12:52 신고
  • 프로필사진 아트시 관리자의 승인을 기다리고 있는 댓글입니다 2021.09.23 22:47
  • 프로필사진 아트시 해봤는데요, alt="바바 가누쉬" alt=""|||_## 이런식으로 알트 설명은 잘 들어가는데, 옆에 alt=""|||_## 이런 표시가 추가로 붙는 건 괜찮은 건가요? 2021.09.23 23:16
  • 프로필사진 잇플 혹시 전체적인 코드를 제가 볼 수 있을까요? 링크 남겨주시면 확인해볼게요~ 2021.10.18 00:36 신고
댓글쓰기 폼