검색 엔진 최적화(SEO) meta 태그
안녕하세요! 블로그 최적화 팁을 전하는 하링입니다. 😊
meta 태그는 검색 엔진 최적화(SEO)와 SNS 공유 시 아주 중요한 요소예요.
웹사이트나 Blogge (블로그 스팟) 또는 티스토리를 운영하신다면 서버에 글을 올리거나, 웹호스팅 준비 단계에서 먼저 가장 먼저 해야 하는 것이 있죠.
많은 것 중에 meta 태그역시 그중 중요한 기본적인 요소예요.
많은 cms가 있지만 오늘은 Blogge (블로그 스팟)에서 meta 태그를 효과적으로 삽입하는 원리와 방법에 대해해서 이야기해보려고 합니다.
Blogge (블로그 스팟) 에서는 메타태그를 어떻게 추가하는 게 가장 좋을까요? 🤔
💡meta 태그는 어디에 넣어야 할까?
meta 태그는 기본적으로 <head> 태그 안에 있어야 해요.
Google에서 지원하는 메타 태그 및 속성 | Google 검색 센터 | 문서 | Google for Developers
Google은 페이지 수준 메타 태그와 태그 속성 둘 다 지원합니다. Google 검색에서 지원할 수 있는 특수 태그의 목록을 살펴보세요.
developers.google.com
그래야 Google 검색, Facebook 공유 등에 최적화될 수 있죠. 🧐
그런데 Blogger에서는 HTML을 직접 수정하는 방법과 HTML/JavaScript 가젯을 이용하는 방법이 있어요.
어떤 방식이 가장 효과적일까요? 하나씩 살펴볼게요
📌 방법 1: HTML 편집에서 직접 추가하기 (가장 추천!)
가장 확실한 방법은 Blogger의 "HTML 편집" 기능을 이용해서 <head> 안에 meta 태그를 추가하는 거예요.
✅ 단계별 가이드
- Blogger 관리자 페이지로 이동해요.
- "테마" → "HTML 편집"을 클릭해요.
<head>부분을 찾아 아래 코드를 추가해요.
<head>
<meta name="description" content="이 블로그는 다양한 정보를 제공합니다.">
<meta name="keywords" content="Blogger, SEO, Google Analytics">
<meta property="og:title" content="내 블로그 제목">
<meta property="og:description" content="이 블로그의 소개">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
</head>
이렇게 하면 검색 최적화는 물론, Facebook이나 Twitter에서 블로그를 공유할 때도 깔끔하게 표시돼요. 🎉
📌 방법 2: HTML/JavaScript 가젯을 이용하는 방법 (제한적)
Blogger에서는 HTML/JavaScript 가젯을 추가할 수 있는 방법도 있습니다.
하지만 재대로 삽입하지 않으면 이 방법으로는 meta 태그가 정상적으로 작동하지 않을 가능성이 높아요. 🧐
그 이유는 HTML/JavaScript 가젯이 <body> 안에 추가되기 때문이에요.
meta 태그는 원래 <head> 안에서만 적용되는데, <body>에 들어가면 검색엔진이 인식하지 못할 수도 있어요.
✅ JavaScript를 이용한 우회 방법
하지만 JavaScript를 이용하면 동적으로 <head> 안에 meta 태그를 추가할 수 있어요! 👇
<script>
var meta = document.createElement('meta');
meta.name = "description";
meta.content = "이 블로그는 다양한 정보를 제공합니다.";
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
이 코드를 HTML/JavaScript 가젯에 추가하면 Blogger에서 <head> 안으로 meta 태그를 삽입할 수 있어요.
하지만 SEO 효과는 HTML 편집에서 직접 추가하는 것보다 떨어질 수 있어요.
Blogger에서 가젯 위치 선택 - 어디에 추가해야 할까? 🤔
Blogger에서 메타 태그를 가젯을 추가할 때, 그 종류에 따라 위치를 어디에 두느냐에 따라 추적 코드의 효과가 달라질 수 있어요. 📊
특히, Yandex Metrika, Google Analytics, Facebook Pixel 같은 추적 및 분석 코드는 적절한 위치에 추가하는 것이 중요해요!
잘못된 위치에 추가하면 코드가 정상 작동하지 않을 수도 있어요!
📍 가장 추천하는 위치: "헤더(Head)" 또는 "푸터(Footer)"
- ✅ 헤더(Head) 또는 푸터(Footer)에 추가하는 것이 가장 적절해요!
- ✅ 대부분의 추적 코드(Google Analytics, Yandex Metrika, Facebook Pixel 등)는 웹사이트의 모든 페이지에서 실행되어야 해요.
- ✅ 헤더(Head) 또는 푸터(Footer)에 넣으면 블로그의 모든 페이지에서 실행 가능!
📌 추천 위치
- ✔ 푸터(Footer) → 가장 많이 추천됨! 🚀
- ✔ 헤더(Head) → Google Analytics, Meta Tags 등의 코드에 적합
📌 푸터에 추가하는 이유
- 👉 블로그가 빠르게 로딩된 후 실행되므로 사이트 속도 저하를 방지할 수 있어요.
- 👉 블로그 레이아웃을 깨뜨리지 않으면서 모든 페이지에서 실행돼요.
Yandex Metrika, Google Analytics, Facebook Pixel 또는 네이버 에널리틱스 추적 코드의 경우 블로그의 속도와 최적화를 고려할 때, 푸터(Footer)에 추가하는 것이 가장 좋은 방법이에요! 🚀
🚀 최종 정리! 어떤 방법이 좋을까?
| 방법 | 적용 가능 여부 | 추천 정도 |
|---|---|---|
| Blogger HTML 편집에서 직접 추가 | ✅ 가능 | ⭐⭐⭐⭐⭐ (가장 추천!) |
| HTML/JavaScript 가젯에서 직접 추가 | ❌ 작동하지 않음 | ❌ |
| HTML/JavaScript 가젯에서 JavaScript로 추가 | ✅ 가능 (우회 방법) | ⭐⭐⭐ (제한적 사용 가능) |
결론! SEO 최적화를 위해서는 HTML 편집에서 직접 추가하는 것이 가장 좋아요. 🎯
함께 보면 좋은 관련 글
워드프레스 자동 발행, 포스팅시 Markdown vs. HTML 방식 업로드-어떤 방법이 좋을까? (장단점 비교)
워드프레스 자동 발행 글 포맷 방식 비교안녕하세요, 하링입니다.😊 블로그나 워드프레스를 운영하다 보면 수동으로 발행할 때 불편함을 느낄 때가 너무나도 많아요. 그럴 때마다 자동발행의
bouza.tistory.com
GPT-4 출력 토큰 제한을 활용하여 블로그 글을 풍부하게 작성하는 방법은?
GPT-4 모델의 출력 토큰 제한과 블로그 글 작성 전략GPT-4 모델을 활용하여 긴 블로그 글을 작성할 때, 출력 토큰 제한을 효과적으로 활용하는 방법에 대해 알아봅니다. 출력 토큰 제한이란 무엇인
bouza.tistory.com
Make에서 Google 스프레드 시트 연결 안 될 때 해결 방법
Google 시트 연결안녕하세요! 😊 하링입니다. Make를 통해 글쓰기나, 블로그 자동화시스템을 구축하기 위해서는 우선 구글 스프레드시트 연결이 필수예요. 처음 접하는 분들은 보통 모듈에 스프
bouza.tistory.com
📢 도움이 되셨다면 공유와 댓글 부탁드려요! 😊
#Blogger #SEO #meta태그 #블로그최적화 #검색엔진최적화 #HTML #JavaScript #Blogger설정 #SNS공유설정
'온라인' 카테고리의 다른 글
| 구글 블로거(블로그 스팟) 푸터 가젯 설정 가이드! 활성화와 비활성화 차이점 정리(방문자 추적 코드, 카운터) (1) | 2025.02.15 |
|---|---|
| 워드프레스 자동 발행, 포스팅시 Markdown vs. HTML 방식 업로드-어떤 방법이 좋을까? (장단점 비교) (1) | 2025.02.15 |
| Make에서 Google 스프레드 시트 연결 안 될 때 해결 방법 (3) | 2025.02.12 |
댓글