HTML 편집기로 작성할 때 반드시 알아야 할 기본 구조와 주의사항
구글 블로그(Blogspot)를 운영하면서 콘텐츠의 서식을 세밀하게 조정하고 싶을 때, 'HTML 보기' 기능은 매우 유용한 도구가 됩니다. 하지만 HTML 편집기를 사용하는 과정에서 기본 구조를 이해하지 못하거나 잘못된 태그 구성이 들어가면 오히려 레이아웃이 깨지거나 검색 노출에 불리해질 수 있습니다.
따라서, HTML로 직접 글을 작성하거나 수정할 때 반드시 알아두어야 할 기본 구조와 주의사항을 정리해두는 것이 필요합니다.
 |
| html보기 모드 |
구글 블로그 HTML 편집기의 기본 구조
구글 블로거에서 새 글을 작성할 때 'HTML 보기' 탭을 클릭하면, 에디터는 다음과 같은 구조로 시작됩니다. 다만, 실제로는 전체 HTML 문서의 <head>나 <body> 태그는 생략된 상태이며, 본문 콘텐츠만 입력하는 형태로 구성되어야 합니다.
기본적으로는 단락을 나누기 위해 <p> 태그를 활용하고, 제목 구분에는 <h2> 태그부터 사용하는 것이 적절합니다.
<h2>소제목 예시</h2>
<p>이 문장은 본문 내용의 첫 번째 단락입니다.</p>
<p>이 문장은 두 번째 단락으로 넘어간 경우입니다.</p>
줄바꿈만을 위해 <br> 태그를 반복하는 것은 가독성 측면이나 SEO 구조상 좋지 않으며, 의미 있는 단락은 반드시 <p> 또는 <h2>로 구분하는 것이 바람직합니다.
참고로 <h1> 태그는 글의 전체 제목입니다. 그래서 본문 중에 <h1>태그가 다시 오면, 제목의 중복이 일어나므로, 본문에는 <h2>태그 부터 사용하여야 합니다.
본문 이외의 구조 태그는 생략해야 함
구글 블로그의 'HTML 보기'는 이미 상위에 <html>, <head>, <body> 등의 전체 구조가 자동으로 포함되어 있기 때문에, 사용자가 작성하는 본문 내에는 이러한 상위 구조를 다시 작성하지 않아야 합니다.
특히 HTML로 변환된 콘텐츠를 외부에서 가져와 붙여넣는 경우, 중복된 <head>, <body> 태그는 반드시 제거해야 합니다.
그렇지 않으면 블로그 전체 디자인에 오류가 생기거나, 작성된 글의 일부가 표시되지 않을 수 있습니다.
링크 및 이미지 삽입 시 주의할 점
HTML 편집기로 외부 링크를 삽입할 때는 target="_blank" 속성을 사용해 새 탭으로 열리게 설정하는 것이 사용자 편의 측면에서 좋습니다. 또한 rel="noopener noreferrer" 속성도 함께 넣는 것이 보안상 안전한 방법입니다.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">공식 사이트 보기</a>
이미지를 직접 삽입하는 경우에도 <img> 태그 사용 시 alt 속성을 넣어 검색 엔진이 내용을 이해할 수 있도록 해주는 것이 좋습니다.
<img src="https://example.com/image.jpg" alt="제품 사진" width="600">
이러한 HTML 태그의 활용은 블로그 가독성뿐만 아니라 SEO(검색 엔진 최적화) 측면에서도 큰 영향을 미치게 됩니다.
에디터에서 HTML과 작성 모드 전환 시 주의
구글 블로그는 '작성 보기'와 'HTML 보기'를 자유롭게 전환할 수 있지만, 작성 도중 빈번히 전환하면 일부 태그가 변경되거나 자동으로 변환되어 의도한 레이아웃이 깨질 수 있습니다.
가급적 HTML 편집기를 사용할 때는 처음부터 끝까지 HTML 보기에서만 작업을 마치는 것이 좋기는 하며, 필요한 경우 완성 후에만 최종 확인을 위해 '작성 보기'로 전환하는 것이 권장됩니다.
하지만, 그렇게 엄격하게 적용하지 않아도 사실 큰 상관은 없습니다.
마무리하며
구글 블로그의 HTML 편집기는 단순한 글쓰기 이상의 자유도를 제공합니다. 하지만 그만큼 기본적인 HTML 문법과 구조를 잘못 사용할 경우, 전체 포스트의 가독성이나 노출 성과에 부정적인 영향을 줄 수 있습니다.
따라서 콘텐츠 작성 전, 항상 본문은 콘텐츠 중심으로만 구성하고, 상위 구조는 생략하며, 문단 구분과 링크 삽입에도 명확한 기준을 지키는 것이 필요합니다.
댓글 쓰기