블로그스팟 글쓰기 화면에서 HTML 편집 버튼을 눌렀더니 알 수 없는 코드가 가득해 당황한 적 있다면, 딱 5개 태그만 익혀도 글의 가독성과 검색 노출이 확 달라진다.
솔직히 고백하자면, 블로그스팟 처음 시작했을 때 HTML 편집 창을 열어보고 바로 닫았다. 네이버 블로그처럼 버튼 하나로 꾸밀 수 있는 게 아니니까, 뭘 어떻게 건드려야 하는지 감이 안 잡히더라고요. 글 쓰는 건 좋은데 결과물이 뭔가 밋밋하고, 검색에도 잘 안 걸리고.
그러다 하나씩 태그를 써보기 시작했는데, 진짜 5개만 알아도 분위기가 완전히 바뀌었거든요. 복잡한 코딩 지식 같은 거 필요 없었다. 복사해서 붙이고, 내용만 바꾸면 끝이니까. 그래서 제가 직접 써보면서 "이건 진짜 체감된다" 싶었던 태그 5개를 정리했어요.
블로그스팟에서 HTML 편집이 필요한 순간
블로그스팟 에디터는 네이버나 티스토리에 비하면 기능이 꽤 빈약하다. 구분선 하나 긋는 것도 에디터에는 메뉴가 없어서 직접 HTML로 넣어야 하거든요. 처음엔 이게 불편하다고만 느꼈는데, 좀 익숙해지니까 오히려 자유도가 높다는 걸 알게 됐다.
구글 검색 알고리즘은 HTML 구조를 읽는다. h2 태그로 소제목을 제대로 잡아주면 구글이 글의 구조를 파악하기 쉬워지고, 그게 곧 검색 노출에 영향을 준다는 거죠. 반대로 그냥 글씨 크기만 키워서 소제목처럼 보이게 만들면? 구글 입장에서는 그냥 큰 글씨일 뿐이에요.
그리고 애드센스 수익 측면에서도 HTML 구조가 깔끔한 글이 자동광고 배치에 유리하다. h2 사이에 적절한 여백이 확보되면 광고가 자연스럽게 들어가거든요. 이걸 모르고 텍스트만 쭉 이어서 쓰면 광고가 어색한 위치에 끼어들어 독자 경험도 나빠진다.
HTML 편집 모드로 전환하는 방법은 간단해요. 블로그스팟 글쓰기 화면 왼쪽 상단에 연필 아이콘 옆에 있는 버튼을 누르면 HTML 보기로 바뀐다. 여기서 코드를 직접 수정하면 되는데, 수정 후 다시 작성 보기로 돌아오면 결과가 바로 반영된다.
첫 번째 태그, h2 — 글의 뼈대를 세우는 소제목
h2 태그는 블로그스팟에서 가장 먼저 익혀야 할 태그다. 블로그스팟 에디터에서 "제목"을 선택하면 h2가 아니라 h3가 적용되는 경우가 많거든요. 테마마다 다르지만, 대부분의 블로그스팟 테마에서 글 제목이 h1 또는 h2로 잡혀 있어서 에디터의 "제목" 옵션이 실제로는 h3인 경우가 흔하다.
이게 왜 문제냐면, 구글 SEO에서 h 태그의 계층 구조가 꽤 중요하기 때문이에요. h1은 글 제목에 하나만 쓰고, 본문 소제목은 h2로, 그 아래 세부 항목은 h3로 쓰는 게 정석이다. 이 구조가 깨지면 구글이 글의 주제를 파악하기 어려워진다.
📊 실제 데이터
SEO 분석 도구 기업들의 조사에 따르면, 상위 노출 페이지의 약 70% 이상이 h2 태그를 활용한 명확한 소제목 구조를 갖추고 있다. h 태그 계층이 올바른 페이지가 그렇지 않은 페이지보다 검색 결과 상위에 노출될 확률이 높다는 분석이 여러 SEO 매체에서 반복적으로 보고되고 있어요.
사용법은 아주 단순해요. HTML 편집 모드에서 소제목을 쓰고 싶은 위치에 이렇게 입력하면 된다.
<h2>여기에 소제목 입력</h2>
주의할 점이 하나 있다. h2 안에 메인 키워드를 자연스럽게 포함시키는 게 좋다. 억지로 끼워 넣으면 오히려 역효과지만, 소제목 자체가 키워드와 연관되게 작성하면 구글이 좋아한다. 처음에 이걸 안 하고 그냥 "첫 번째 방법", "두 번째 방법" 이런 식으로만 썼는데, 키워드를 넣은 소제목으로 바꿨더니 확실히 노출이 달라지더라고요.
두 번째·세 번째 태그, strong과 em — 강조의 두 얼굴
글을 쓰다 보면 특정 단어나 문장을 강조하고 싶을 때가 있잖아요. 이때 에디터에서 B 버튼(볼드)을 누르면 보통 <b> 태그가 들어가는데, SEO 관점에서는 <strong> 태그가 더 낫다.
뭐가 다르냐고요? 겉보기엔 둘 다 굵은 글씨인데, 의미가 다르다. <b>는 단순히 시각적으로 굵게 만드는 것이고, <strong>은 "이 내용이 중요하다"는 의미를 검색 엔진에 전달하는 시맨틱 태그거든요. 검색 엔진은 시각이 아니라 코드를 읽으니까, strong 태그로 감싼 텍스트에 더 높은 중요도를 부여할 수 있다.
마찬가지로 기울임체도 <i> 대신 <em> 태그를 쓰는 게 좋아요. em은 "emphasis", 즉 강세를 뜻하는 태그라서 검색 엔진이 해당 부분에 주목한다. 개인적인 의견이나 핵심 용어를 살짝 부각하고 싶을 때 em으로 감싸면 자연스럽다.
다만 남용하면 오히려 독이 된다. 글 전체를 strong으로 도배하면 검색 엔진 입장에서 "전부 중요하다고? 그러면 아무것도 중요하지 않은 거네"가 돼 버려요. 한 문단에 1~2개 정도가 적당하고, 글 전체로는 8~12회 이내로 쓰는 게 경험상 가장 깔끔했다.
사용법은 이렇다.
<strong>중요한 내용</strong> → 굵은 글씨 + 의미 강조
<em>강세를 주고 싶은 부분</em> → 기울임 + 의미 강조
네 번째 태그, details와 summary — 접었다 펼치는 마법
이 태그를 처음 알았을 때 좀 놀랐다. 자바스크립트 없이 HTML만으로 아코디언(접고 펼치기) 기능이 된다니. 블로그스팟에서 FAQ를 만들거나, 긴 내용을 접어두고 싶을 때 이만한 게 없거든요.
details 태그 안에 summary 태그를 넣으면, summary에 쓴 텍스트만 보이고 나머지는 숨겨진다. 독자가 클릭하면 ▶ 표시가 ▼로 바뀌면서 숨겨진 내용이 펼쳐지는 구조예요.
💡 꿀팁
details/summary 태그로 FAQ를 만들면 독자의 체류시간이 늘어나는 효과가 있다. 클릭해서 답변을 확인하는 행위 자체가 페이지 내 상호작용으로 잡히거든요. 여기에 FAQ Schema(구조화 데이터)까지 추가하면 구글 검색 결과에 FAQ 리치 스니펫이 노출될 가능성도 생긴다.
코드 구조는 이렇게 생겼어요.
<details>
<summary>질문 내용을 여기에</summary>
<p>답변 내용을 여기에</p>
</details>
실제로 써보면 느끼는 건데, 이 태그가 특히 빛을 발하는 건 글이 길어질 때다. 정보를 전부 펼쳐놓으면 스크롤이 끝도 없어지는데, 부가 정보를 details로 접어두면 글이 깔끔해지면서도 필요한 사람은 펼쳐서 볼 수 있다. 모바일에서 특히 효과적이에요. 작은 화면에서 긴 글은 피로감이 크니까.
한 가지 주의할 점은, 핵심 내용을 details 안에 숨기면 안 된다는 거예요. 구글이 details 안의 숨겨진 텍스트를 크롤링은 하지만, 기본적으로 보이는 콘텐츠에 더 높은 가중치를 둔다고 알려져 있거든요. 보조 정보나 부연 설명을 접어두는 용도로 쓰는 게 맞다.
다섯 번째 태그, blockquote와 hr — 시선을 잡는 인용과 구분선
사실 이건 두 개를 묶어서 다섯 번째로 넣었다. 각각 역할이 다르지만, 둘 다 "글에 시각적 리듬을 준다"는 공통점이 있어서.
<blockquote> 태그는 인용문을 표시할 때 쓴다. 다른 출처의 내용을 가져오거나, 핵심 메시지를 강조하고 싶을 때 blockquote로 감싸면 들여쓰기가 되면서 시각적으로 구분이 되거든요. 블로그스팟에서는 에디터의 따옴표 버튼으로도 삽입할 수 있는데, HTML에서 직접 스타일을 입히면 훨씬 예쁘다.
검색 엔진도 blockquote 안의 내용을 "인용된 텍스트"로 인식해요. 구글이 Featured Snippet(추천 스니펫)을 생성할 때 blockquote 안의 문장을 발췌하는 경우도 있다는 분석이 나오고 있어서, SEO 관점에서도 의미가 있다.
<hr> 태그는 수평 구분선이다. 놀랍게도 블로그스팟 에디터에는 구분선 삽입 버튼이 없거든요. 네이버에서 당연하게 쓰던 기능인데 블로그스팟에서는 HTML로 직접 넣어야 해요. <hr> 하나만 입력하면 끝이라서 어렵진 않다. 닫는 태그도 필요 없고.
⚠️ 주의
blockquote를 남용하면 본문 전체가 인용문처럼 보여서 오히려 가독성이 떨어진다. 한 글에 2~3회 정도가 적당하고, 반드시 본인의 해석이나 코멘트를 blockquote 바깥에 달아줘야 자연스러워요. 인용만 늘어놓으면 독자 입장에서 "이 사람 의견은 뭐지?" 싶어지거든요.
실전에서 blockquote에 인라인 스타일을 입히면 훨씬 깔끔해진다. 예를 들어 왼쪽에 색상 보더를 넣고 배경색을 살짝 깔면 일반 단락과 확실히 구분되면서도 과하지 않은 디자인이 나와요.
<blockquote style="border-left:4px solid #6366F1; padding:12px 16px; background:#f9f9fb;">
인용하고 싶은 문장
</blockquote>
hr도 기본 스타일이 좀 투박하니까, 색상이나 두께를 바꿔주면 좋다.
<hr style="border:none; border-top:1px solid #e0e0e0; margin:30px 0;">
여기까지 읽었으면 각 태그가 어떤 역할인지 감이 잡혔을 거예요. 정리하면 이런 그림이다.
| 태그 |
용도 |
SEO 효과 |
| h2 |
소제목 구조 설정 |
글 구조 파악, 키워드 인식 |
| strong |
의미적 굵은 강조 |
중요 키워드 가중치 부여 |
| em |
의미적 기울임 강조 |
보조 키워드 강세 전달 |
| details/summary |
접기/펼치기 (FAQ 등) |
체류시간 증가, 리치 스니펫 가능 |
| blockquote / hr |
인용 표시 / 구분선 |
콘텐츠 구조화, 스니펫 발췌 가능 |
이 5개 태그의 공통점이 있다. 전부 시맨틱(semantic) 태그이거나 구조적 역할을 한다는 것. 블로그스팟에서는 <style> 태그나 외부 CSS를 글 단위로 적용하기 까다로우니까, 인라인 스타일과 시맨틱 태그 조합으로 가는 게 현실적이에요.
처음엔 h2와 strong만 써보다가, 자신감이 붙으면 details랑 blockquote까지 확장하는 식으로 단계를 밟으면 부담이 없다. 한꺼번에 다 적용하려고 하면 코드가 꼬여서 오히려 스트레스받거든요. 저도 처음에 욕심부려서 코드를 잔뜩 넣었다가 레이아웃이 깨진 적이 있다. 미리보기를 반드시 확인하면서 하나씩 추가하는 게 안전해요.
그리고 한 가지 더. 블로그스팟은 HTML 편집 모드에서 작성 보기로 돌아올 때 코드를 자동 정리하는 경우가 있어서, 빈 태그나 불필요한 속성이 삭제될 수 있다. 최종 발행 전에 반드시 HTML 편집 모드에서 코드가 의도대로 남아있는지 확인하는 습관이 중요하다.
❓ 자주 묻는 질문
Q. 블로그스팟에서 h1 태그를 본문에 써도 되나요?
글 제목이 이미 h1으로 잡혀 있는 테마가 대부분이라서, 본문에서는 h2부터 사용하는 게 맞아요. h1이 2개 이상이면 검색 엔진이 어느 쪽이 진짜 제목인지 혼란을 겪을 수 있거든요.
Q. strong 태그와 b 태그를 섞어 써도 괜찮을까요?
기능적으로 문제가 생기진 않지만, 의미적 강조가 필요한 곳에는 strong을, 단순히 시각적으로 굵게만 하고 싶은 곳에는 b를 쓰는 식으로 구분하면 코드의 의미가 명확해져요.
Q. details 태그가 구형 브라우저에서 안 되는 경우가 있나요?
Internet Explorer에서는 details/summary가 지원되지 않아요. 다만 IE는 2022년에 공식 지원이 종료되었고, 현재 크롬·사파리·파이어폭스·엣지 등 주요 브라우저에서는 전부 정상 작동합니다.
Q. 인라인 스타일 말고 블로그스팟 테마 CSS를 수정하는 게 나은가요?
반복적으로 같은 스타일을 쓸 예정이라면 테마 CSS에 클래스를 추가하는 게 효율적이에요. 하지만 HTML 편집이 처음이라면 인라인 스타일로 시작해서 결과를 바로 확인하는 쪽이 학습에 훨씬 빠릅니다.
Q. 이 태그들을 워드프레스나 티스토리에서도 동일하게 쓸 수 있나요?
네, h2·strong·em·details·blockquote·hr은 표준 HTML 태그라서 워드프레스, 티스토리 등 HTML 편집을 지원하는 모든 플랫폼에서 동일하게 작동해요. 플랫폼별 기본 CSS에 따라 겉모습만 약간 다를 수 있습니다.
본 포스팅은 개인 경험과 공개 자료를 바탕으로 작성되었으며, 전문적인 의료·법률·재무 조언을 대체하지 않습니다. 정확한 정보는 해당 분야 전문가 또는 공식 기관에 확인하시기 바랍니다.
👉 함께 읽으면 좋은 글: E-E-A-T 적용하고 검색 순위 확 바뀐 블로그 글쓰기 경험담
👉 함께 읽으면 좋은 글: 애드센스 승인 후 첫 수익이 통장에 찍히기까지, 내가 겪은 현실 타임라인
👉 함께 읽으면 좋은 글: 블로그스팟 레이아웃 깨짐 테마 변경 후 복구 방법 후기
블로그스팟 HTML 편집이 어렵게 느껴졌다면, 오늘 소개한 h2, strong, em, details/summary, blockquote/hr 이 5개 태그만 먼저 써보면 된다. 글의 구조가 잡히면 검색 노출도 따라오고, 독자도 더 편하게 읽을 수 있어요.
코딩을 잘 몰라도 괜찮다. 복사해서 붙이고 텍스트만 바꾸는 것부터 시작하면 돼요. 한 달만 꾸준히 적용해보면 글의 퀄리티가 달라지는 걸 본인이 가장 먼저 느낄 거예요.
혹시 직접 적용해보고 궁금한 점이 생기면 댓글로 남겨주세요. 공유도 환영합니다.
댓글
댓글 쓰기