티스토리 블로그에 head와 body 태그 넣는 완벽 가이드

안녕하세요, 여러분! 오늘은 티스토리 블로그를 한 단계 업그레이드할 수 있는 중요한 팁을 공유해 드리려고 합니다. 바로 HTML의 기본 구조인 head와 body 태그를 티스토리 블로그에 적용하는 방법에 대해 알아보겠습니다.

head와 body 태그가 중요한 이유

HTML 문서는 크게 head와 body 두 부분으로 나뉩니다. head 영역은 웹페이지에 대한 메타데이터와 스타일, 스크립트 등을 포함하며, body 영역은 실제로 사용자에게 보여지는 콘텐츠를 담고 있습니다.

티스토리 블로그에서 이 태그들을 적절히 활용하면 다음과 같은 이점이 있습니다:

검색엔진 최적화(SEO) 향상
블로그 디자인 및 기능 커스터마이징
사이트 성능 개선
외부 서비스(구글 애널리틱스, 애드센스 등) 연동 용이

티스토리에서 head 태그 추가하기

티스토리에서는 스킨 편집 기능을 통해 head 태그 내용을 추가할 수 있습니다.

1단계: 관리자 화면으로 이동

먼저 티스토리 블로그에 로그인한 후, 관리자 화면으로 이동합니다.

2단계: 스킨 편집 메뉴 선택

왼쪽 메뉴에서 '꾸미기 > 스킨 편집'을 선택합니다.

3단계: HTML 편집

스킨 편집 화면에서 'HTML' 탭을 클릭하면 블로그의 전체 HTML 코드를 볼 수 있습니다.

4단계: head 태그 내 코드 추가

<head> 태그를 찾아 그 안에 원하는 코드를 추가합니다. 예를 들면:

<head>
    <!-- 기존 코드 -->
    
    <!-- 내가 추가하는 코드 -->
    <meta name="description" content="내 블로그 설명">
    <meta name="keywords" content="키워드1, 키워드2, 키워드3">
    <link rel="stylesheet" href="외부 CSS 파일 경로">
    <script src="외부 자바스크립트 파일 경로"></script>
    
    <!-- 기존 코드 계속 -->
</head>

티스토리에서 body 태그 활용하기

body 태그는 블로그의 실제 콘텐츠를 포함하며, 티스토리에서는 다음과 같이 활용할 수 있습니다.

1단계: body 관련 설정 찾기

스킨 편집 화면에서 <body> 태그를 찾습니다.

2단계: body 속성 추가하기

<body> 태그에 클래스나 ID를 추가하여 CSS 스타일링을 용이하게 할 수 있습니다:

<body class="my-blog-theme" id="main-content">
    <!-- 블로그 콘텐츠 -->
</body>

3단계: 본문 끝 부분에 스크립트 추가

</body> 태그 바로 앞에 자바스크립트를 추가하면 페이지 로딩 성능을 향상시킬 수 있습니다:

<body>
    <!-- 블로그 콘텐츠 -->
    
    <!-- 스크립트는 body 종료 태그 직전에 배치 -->
    <script>
        // 자바스크립트 코드
    </script>
</body>

SEO 최적화를 위한 head 태그 활용법

검색엔진 최적화(SEO)를 위해 head 태그 내에 추가할 수 있는 중요 요소들:

1. 메타 태그 최적화

<head>
    <!-- 타이틀 태그: 검색 결과에 표시되는 제목 -->
    <title>핵심 키워드가 포함된 블로그 제목</title>
    
    <!-- 메타 설명: 검색 결과에 표시되는 설명 -->
    <meta name="description" content="160자 내외의 블로그/포스트 설명">
    
    <!-- 메타 키워드: 주요 키워드 나열 -->
    <meta name="keywords" content="관련 키워드1, 키워드2, 키워드3">
    
    <!-- 모바일 최적화 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 작성자 정보 -->
    <meta name="author" content="작성자 이름">
</head>

2. Open Graph 태그 추가

소셜 미디어에서 공유될 때 표시되는 정보를 제어합니다:

<head>
    <meta property="og:title" content="공유 시 표시될 제목">
    <meta property="og:description" content="공유 시 표시될 설명">
    <meta property="og:image" content="공유 시 표시될 이미지 URL">
    <meta property="og:url" content="블로그 URL">
    <meta property="og:type" content="website">
</head>

3. 캐노니컬 태그 설정

중복 콘텐츠 문제를 방지합니다:

자주 발생하는 문제와 해결 방법

문제 1: 수정 후 블로그 레이아웃이 깨짐

해결책: 코드를 수정하기 전에 반드시 백업을 해두세요. 태그를 추가할 때 기존 코드를 건드리지 않도록 주의합니다.

문제 2: 추가한 스크립트가 작동하지 않음

해결책: 자바스크립트 코드의 위치가 중요합니다. DOM 요소에 접근하는 스크립트는 </body> 태그 직전에 배치하세요.

문제 3: 변경사항이 적용되지 않음

해결책: 변경 후 반드시 '저장' 버튼을 클릭하고, 브라우저 캐시를 삭제한 후 새로고침해보세요.

마무리

티스토리 블로그에서 head와 body 태그를 적절히 활용하면 블로그의 SEO를 개선하고 다양한 기능을 추가할 수 있습니다. 처음에는 낯설게 느껴질 수 있지만, 조금씩 실험하며 익숙해지면 여러분의 블로그를 한층 더 전문적으로 만들 수 있을 것입니다.

혹시 실습 중 어려움이 있거나 궁금한 점이 있다면 댓글로 남겨주세요. 함께 해결해보도록 하겠습니다!

waymaker