워드프레스 이미지 작업 시 대체텍스트를 넣자... [구글 SEO를 위한 alt태그작업]
요즘 워드프레스에 관한 공부를 하고 있는 중입니다. 배우면 배울수록 까다롭고 어렵지만 조금씩 워드프레스를 알아갈수록 재미와 흥미가 느껴져서 다행인데요. 오늘은 워드프레스 이미지 작업 시 대체텍스트 즉 알트태그 넣는 방법에 관한 내용을 준비해 보았습니다.
저처럼 워드프레스 초보자, 워린이들에게 도움이 되기를 바라봅니다. 그럼 지금부터 저와 함께 하시죠...
작년 11월 초에 티스토리 블로그를 개설했던 기억이 납니다. 벌써 정확히 1년 전인데요. 그때도 티스토리는 처음이라 좌충우돌하면서 아무것도 모른 채로 부딪히며 배우기 시작했답니다. 막힐 때마다 인터넷에서 정보를 뒤져가면서 하나씩 깨닫기 시작했는데요. 이번에도 또 새로운 걸 접하게 되었네요. 그건 바로 워드프레스랍니다.
이건 티스토리나 네이버 블로그와는 비교도 되지 않는, 제게 있어서는 완전 고급 수준을 요구하더라고요. ㅎㅎ
그래도 역시 하루하루 조금씩 공부하고 배워가면서 접하게 되면 언젠가 워드프레스도 멋지게 해낼 때가 오리라 믿고 차근차근 욕심안부리고 열공 중입니다...
서론이 길었는데요. 오늘의 내용으로 다시 돌아와서 워드프레스 이미지 추가 시 알트 태그(alt tag)는 어떻게 해야 하는지 고민이 되더군요. 그런데 책을 보고 인터넷에서 정보를 찾아오니 그리 어렵지 않았습니다.
아시죠? 티스토리에서는 이미지 올린 후 이미지를 클릭하면 나타나는 메뉴에서 톱니바퀴 설정창이 대체 텍스트 삽입이며, 이곳에 텍스트를 입력 시 자동적으로 html 소스에 알트 태그가 입혀진다는 것을 말입니다. 사실 워드프레스도 이것과 똑같은 원리입니다. 이제부터 차근차근 설명해 드릴게요.ㅎㅎ
위 화면처럼 글-새로추가-미디어 추가를 차례대로 클릭해 주시면 이미지를 추가할 수 있답니다.
이처럼 미디어추가 창이 나타납니다.
파일 업로드 탭에서 [파일 선택]을 클릭하고 원하는 이미지를 불러옵니다...
저는 오늘 '워드프레스 로고' 이미지를 가지고 설명해 드릴 겁니다. 위 화면처럼 워드프레스 이미지를 클릭해 줍니다...
그 후 우측의 네모 박스처럼 첨부 상세를 보면 대체 텍스트, 제목, 캡션, 설명란이 나타납니다... 저는 참고로 이렇게 텍스트를 입력해 보았는데요. 여기서 중요한 게 바로 [대체텍스트]입니다. 어디서 많이 들어보신 거 맞죠? 티스토리에서도 이미지에 대체텍스트 삽입이 있었는데 그것과 같은 원리랍니다. 이곳에 대체텍스트 내용을 입력하며 자동적으로 html 소스에서도 alt태그가 입혀진 걸 확인하실 수 있답니다...
어디 한번 확인을 해 볼게요... 워드프레스 고전 편집기 창에서 위 화면과 같이 [텍스트]를 클릭해 줍니다...
그럼 위 화면과 같이 지금 작성 중인 글의 html 소스를 확인하실 수 있습니다. 위 화면 네모 박스를 보세요. alt="워드프레스 공식 로고"라는 부분이 보이시죠? 제가 위에서 이미지 첨부 상세 화면에서 대체 텍스트에 입력했던 내용이라는 거 아시죠? 이제 감이 오시나요?ㅎㅎ
그럼 만약에 이미지 첨부 상세에서 대체 텍스트 부분에 입력을 지워버리면 어떻게 html 소스가 바뀌는지 보여드리겠습니다... 자! 지금 똑같은 두 장의 워드프레스 로고 사진이 담겨있는데요. 정말 똑같죠? 하지만 html 소스로 확인해 보면 확연히 차이가 난다는 걸 아실 겁니다. 아까처럼 상단의 [텍스트]를 클릭해 줍니다...
이미지로는 분명히 똑같은 워드프레스 로고 사진이었을 뿐인데, 이걸 html 소스로 확인해 보니 차이가 분명해지는 걸 보실 수 있습니다... 첫 번째 사진은 알트 태그가 입혀진 상태이며, 대체텍스트를 입력하지 않았던 두번째 이미지는 위에서 보시는 것처럼 알트태그 부분이 비어 있다는 것입니다...
왜 이미지 추가 시 알트 태그에 목숨을 가느냐? 하실 텐데요... 이건 바로 구글 SEO와 밀접한 관련이 있기 때문에 그렇습니다. SEO는 영어로 search engine optimization의 약자로 검색엔진 최적화를 의미합니다. 구글 봇은 인터넷상의 웹사이트를 돌아다니면서 수집하고 크롤링을 해 가는데 이를 통해 구글에서 정한 표준에 맞는 문서인지 아닌지를 구분해 낸답니다. 이는 곧 구글 최적화를 통해 키워드 검색 시 구글 최상단에 뜨느냐? 마느냐?를 결정하는 중요한 기준과 잣대가 되기에 중요한 것입니다.
워드프레스로 이미지를 삽입할 때는 반드시 대체 텍스트, 즉 알트 태그를 넣으셔야 한다는 것도 알아가셨으면 좋겠습니다.
오늘은 "워드프레스 이미지 작업 시 대체 텍스트를 넣자... [구글 SEO를 위한 alt태그 작업]"에 관한 내용을 알아보았습니다. 오늘의 포스팅이 조금이나마 유익하셨다면 공감, 댓글, 구독을 부탁드립니다. 그럼 저는 다음 시간에 더욱 유익한 포스팅으로 찾아뵙겠습니다. 읽어주셔서 감사드립니다.
↓↓IT 인터넷 관련한 포스팅 글들도 참고해 주세요.↓↓
KT 인터넷모뎀 OPT 빨간불 들어오는 원인... 인터넷 고장시 해결방법!!!
KT 인터넷모뎀 OPT 빨간불 들어오는 원인... 인터넷 고장시 해결방법!!!
KT 인터넷모뎀 OPT 빨간불 들어오는 원인... 인터넷 고장 시 해결방법!!! 요즘 집 인터넷 성능이 조금 저하된 것 같아서 걱정이었는데요. KT 와이파이도 짱짱하게 뜨지 않아 고민이었습니다. 그러던
2trillionlee.tistory.com
맥북 새로고침 어떻게 하나요? 맥북 단축키 알면 편하다...
맥북 새로고침 어떻게 하나요? 맥북 단축키 알면 편하다...
맥북 새로고침 어떻게 하나요? 맥북 단축키 알면 편하다... 기존의 MS윈도우 운영체제에서는 새로고침을 참 많이 사용한 거 같아요. 윈도우에서 웹브라우저를 새로고침할때마다 펑션키 F5를 이용
2trillionlee.tistory.com
맥북 한영키, 한자키, 이모티콘 및 특수문자 단축키 사용법 알아보자
맥북 한영키, 한자키, 이모티콘 및 특수문자 단축키 사용법 알아보자
맥북 한영키, 한자키, 이모티콘 및 특수문자 단축키 사용법 알아보자 "맥북 한영키, 한자키, 이모티콘 및 특수문자 단축키 사용법" 오늘의 포스팅 주제입니다. 저는 맥북과 엘지 그램을 번갈아가
2trillionlee.tistory.com
운전면허갱신 고령운전자 인터넷교육 예약 및 수강방법 [교통안전교육 수료증 출력]
운전면허갱신 고령운전자 인터넷교육 예약 및 수강방법 [교통안전교육 수료증 출력]
운전면허갱신 고령운전자 인터넷교육 예약 및 수강방법 [교통안전교육 수료증 출력] 여러분 안녕하세요... 오늘은 운전면허 갱신과 관련해서 고령운전자들의 필수인 교통안전교육 인터넷 예약
2trillionlee.tistory.com
판매자 정보를 Google sellers.json 파일에 게시하시기 바랍니다. 오류메시지 해결 방법 [구글 애드센스 오류메시지]
판매자 정보를 Google sellers.json 파일에 게시하시기 바랍니다. 오류메시지 해결 방법 [구글 애드센
판매자 정보를 Google sellers.json 파일에 게시하시기 바랍니다, 오류 메시지 해결 방법 [구글 애드센스 오류 메시지] 여러분 안녕하세요. 티스토리 블로그 초보 운영자가 겪고 있는 좌충우돌 성장기
2trillionlee.tistory.com
'IT인터넷' 카테고리의 다른 글
| 맥북에서 지긋지긋한 Avast 삭제하는 방법 (3) | 2022.11.08 |
|---|---|
| 워드프레스 플러그인 추천: 글 작성을 돕는 shortcodes ultimate (3) | 2022.11.07 |
| KT 인터넷모뎀 OPT 빨간불 들어오는 원인... 인터넷 고장시 해결방법!!! (3) | 2022.08.17 |
| 개인 도메인 설정과 티스토리 연결방법 [feat.가비아] (4) | 2022.08.09 |
| 맥북 새로고침 어떻게 하나요? 맥북 단축키 알면 편하다... (11) | 2022.01.26 |