문의하기
티스토리 운영을 위한 HTML head 태그 정리 및 적용 사례
head 태그는 웹 페이지 본문에는 보이지 않지만 웹 브라우저가 알아야 하는 정보를 입력하는 부분입니다. 티스토리에서 스킨 편집한다는 말은 대부분 head 태그에 meta 태그와 스크립트를 추가한다는 말입니다. 예로 head 태그에 광고 스크립트 코드를 추가하거나 검색 사이트 소유권 확인을 위한 meta 태그를 추가합니다.
그럼 head 태그에 대해서 알아보죠.
head 태그
▼ head 태그 내부에 포함할 수 있는 태그
| 태그 | 설명 |
|---|---|
| meta | 웹 페이지에 대한 추가 정보를 입력합니다. |
| title | 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 입력합니다. |
| script | 웹 페이지에 스크립트를 추가합니다. |
| link | 웹 페이지에 외부 참조 페이지를 추가합니다. |
| style | 웹 페이지에 외부 스타일 정보 페이지를 추가합니다. |
| base | 웹 페이지 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. |
※ 좀 더 자세한 내용은 MDN Web Docs 사이트에서 확인하시면 됩니다.
티스토리 블로그 스킨
☞ 티스토리 스킨마다 조금씩은 다를 수 있겠지만 거의 비슷할 것으로 예상됩니다.
▼ Odyssey(오디세이) 스킨을 적용 후 최초 HTML 부분
: 기본적으로 블로그를 운영할 수 있게 미리 다 만들어 줍니다. 특히 head 태그 내부에 있는 태그는 잘 알지 못하면 변경하지 않는 게 좋습니다.
- 5라인 : title 태그 (1개)
- 6라인 ~ 10라인 : meta 태그 (5개)
- 11라인 ~ 15라인 : link 태그 (5개)
- 16라인 ~ 19라인 : script 태그 (4개)
현재 운영 중인 블로그(blueshare.tistory.com)에 head 태그 추가한 예시 (참고)
1. 스크립트 추가
▼ 구글 애드센스 코드 : 광고를 달기 위해서 추가
▼ 구글 태그 매니저 코드 : 블로그 분석을 위해서 추가 (※ 구글 태그 매니저 사이트)
→ 연동만 한 상태이고 활용은 하지 않습니다. 현재 운영 중인 블로그는 구글 애널리틱스에서 페이지 접속 현황 등 분석이 충분히 가능하기 때문에 구글 태그 매니저는 사용하지 않습니다.
※ 만약 특정 이벤트에 대한 예로 쇼핑몰 사이트에서 [장바구니] 버튼을 클릭하거나 [결재] 버튼을 클릭하는 것처럼 페이지 단위가 아니라 특정 이벤트에 대해서 분석을 하기 위해서는 구글 태그 매니저를 활용하시면 됩니다. 또는 블로그에서 한다고 하면 특정 포스트 내용에 [바로가기] 버튼을 추가하거나 사이드 메뉴에서 [SNS 이미지] 버튼을 만들어 클릭할 때마다 분석을 하고자 할 때는 구글 태그 매니저를 활용하시면 됩니다.
▼ 마이크로소프트 선명도 분석을 위해서 추가 (※ 마이크로소프트 선명도 사이트)
▼ 특정 게시글 광고 미 송출 해결 방안으로 추가함
☞ 관련해서는 마지막 부분에 링크를 걸어 놓겠습니다.
2. meta 태그 추가
▼ 검색 사이트에 소유권 확인을 위해서 추가 : 네이버, 구글, 빙
마무리
이후에는 웹 페이지에서 보이는 body 태그에 대해서 작성하겠습니다. 그중에서도 먼저 제목 태그인 h1~h6 태그에 대해서 포스트 해보겠습니다. 검색 사이트 SEO에서는 h1 태그가 중요한데 웹 페이지에는 h1 태그가 반드시 존재해야 되고 1개만 존재해야 된다고 합니다. 그런데 티스토리 블로그 구조(HTML 구조) 상 약간의 문제가 있습니다. 그럼 다음 포스트에 관련해서 작성하겠습니다.
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
관련 이전 게시글
티스토리 특정 게시글 광고 미송출 및 검색 누락 해결 방법 (경험)
HTML 기본 용어(태그, 요소, 속성, 주석) 및 작성 방법
티스토리 애드센스 자동 광고, 수동 광고, 글 본문 광고 넣는 방법
