Blogger·티스토리에 애드센스 코드 넣는 방법

“HTML에 코드를 넣으라고?” 애드센스를 연결하려다 이 설명에서 잠시 멈췄습니다. 저도 개발자지만 주로 C/S 프로그램을 개발해왔기에 웹은 아직 서툽니다. 낯선 코드를 잘못 건드려 블로그 화면이 망가지는 건 아닐까 걱정도 됐습니다.

관리자 메뉴에서 계정만 연결하면 되는 건지, HTML을 직접 수정해야 하는 건지도 헷갈렸습니다. 찾아본 내용도 시간이 지나면 다시 잊어버릴 것 같아, 나중에 꺼내 볼 수 있도록 정리해두려 합니다.

Blogger와 티스토리에서 제공하는 애드센스 연동 방법을 먼저 살펴보고, 직접 코드를 넣어야 할 때는 어디에 붙여넣고 무엇을 확인해야 하는지 차례로 알아보겠습니다.

먼저 확인하기: 계정 연동과 직접 코드 삽입의 차이

블로그 서비스가 제공하는 애드센스 연동 기능부터 확인하세요. 계정 연결과 광고 설정을 해당 메뉴에서 진행할 수 있다면, 같은 스크립트를 HTML에 추가로 붙여넣을 필요가 있는지 먼저 확인하는 편이 좋습니다. 연동했다고 사이트 승인이 완료되거나 광고가 즉시 표시되는 것은 아닙니다.

직접 HTML을 수정해야 하는 경우에는 애드센스나 블로그 서비스가 안내하는 코드 종류와 삽입 위치를 따라야 합니다. 아래의 <head> 삽입 설명은 사이트 연결용 코드 또는 메타 태그를 기준으로 합니다. 모든 광고 코드를 같은 위치에 넣는다는 뜻은 아닙니다.

작업 전에는 현재 테마나 스킨을 백업해 두세요. HTML 문법이 잘못되면 블로그 화면이 깨지거나 저장이 거부될 수 있습니다.

Blogger에 연결하기

먼저 수입 메뉴의 애드센스 안내 확인

Blogger에서는 코드를 직접 넣기 전에 관리자의 수입 메뉴부터 확인하세요. Google의 Blogger 광고 게재 안내는 이 메뉴에서 애드센스 가입과 연결 절차를 진행하도록 설명합니다. 블로그가 애드센스를 사용할 수 있는지와 화면에 표시되는 계정 연결 상태를 먼저 확인하고, 필요한 안내를 따라 진행하세요.

서비스 안내에 따라 HTML에 코드를 직접 넣어야 한다면 아래 경로를 사용합니다.

필요한 경우 테마 HTML 편집 화면 열기

1. Blogger 관리자 페이지에 로그인하고 코드를 적용할 블로그를 선택합니다.
2. 왼쪽 메뉴에서 테마를 클릭합니다.
3. 내 테마 영역에서 맞춤설정 버튼 옆의 아래쪽 화살표 또는 점 세 개 모양의 더보기 버튼을 누릅니다.
4. 펼쳐진 메뉴에서 HTML 편집을 선택합니다.

첫 번째 캡처는 Blogger의 테마 화면에서 HTML 편집 메뉴를 여는 위치를 보여줍니다. 화면 구성이나 버튼 모양은 계정과 업데이트 시점에 따라 조금 달라질 수 있지만, 핵심 경로는 테마 → 내 테마의 더보기 → HTML 편집입니다. 이 경로는 Blogger 공식 테마 HTML 편집 안내에서도 확인할 수 있습니다.

사이트 연결용 코드를 head 아래에 붙여넣기

1. HTML 편집기가 열리면 Windows에서는 Ctrl + F, Mac에서는 Cmd + F를 누릅니다.
2. <head>를 검색합니다.
3. 찾은 여는 태그 바로 아래의 새 줄에 애드센스에서 복사한 코드를 붙여넣습니다.
4. 코드가 중간에 잘리거나 한 글자라도 바뀌지 않았는지 확인합니다.
5. 오른쪽 위의 디스켓 모양 저장 버튼을 누릅니다.

두 번째 캡처의 빨간 화살표는 <head> 바로 아래에 스크립트를 넣는 위치를 나타냅니다. 캡처 안의 G-로 시작하는 값은 Google Analytics 측정 ID의 형식이므로, 이를 애드센스 게시자 코드로 그대로 사용하면 안 됩니다. 이 이미지는 코드의 종류가 아니라 삽입 위치를 이해하는 참고 화면입니다. 실제 작업에는 애드센스에서 복사한 ca-pub- 게시자 정보가 포함된 본인 코드를 사용하세요.

저장 후에는 애드센스의 사이트 연결 화면으로 돌아가 확인 또는 검토 요청 단계를 완료합니다. 코드를 넣었다고 광고가 즉시 표시되는 것은 아니며, 사이트 승인과 광고 설정 상태에 따라 시간이 필요할 수 있습니다.

티스토리에 연결하기

먼저 수익 메뉴에서 계정 연동

티스토리는 블로그 관리 → 수익 → Google AdSense에서 애드센스 계정을 연결하는 기능을 제공합니다. 계정 연동과 광고 설정이 목적이라면 이 방법이 HTML을 직접 수정하는 것보다 간단합니다. 티스토리 공식 애드센스 연동 안내에 따라 연동하기 버튼을 누르고, 애드센스에 사용하는 구글 계정으로 로그인해 접근 권한을 허용하면 됩니다.

필요한 경우 스킨 HTML에 직접 삽입

1. 티스토리 블로그 관리자 페이지에 로그인합니다.
2. 왼쪽 사이드바에서 꾸미기 → 스킨 편집을 선택합니다.
3. 오른쪽 위의 html 편집 버튼을 누릅니다.
4. 코드 영역에서 <head>와 </head>를 찾습니다.
5. <head> 바로 아래나 </head> 바로 위의 빈 줄에 본인의 애드센스 코드를 붙여넣습니다.
6. 오른쪽 위의 적용 버튼을 누릅니다.

티스토리 스킨을 직접 편집할 때도 먼저 스킨을 백업하는 것이 좋습니다. 스킨을 교체하면 수동으로 추가한 코드가 사라질 수 있으므로, 변경 후에는 애드센스 코드가 남아 있는지 다시 확인하세요.

직접 코드를 넣을 때 주의할 점

구글 애드센스에서 복사한 사이트 연결용 코드 또는 메타 태그는 일반적으로 페이지의 <head>와 </head> 사이에 넣습니다. <head>는 방문자에게 직접 보이는 본문이 아니라 사이트의 설정 정보와 외부 스크립트를 불러오는 영역입니다.

반드시 자신의 애드센스 계정에서 제공된 코드를 그대로 복사해야 합니다. 예시 코드에 있는 게시자 ID를 사용하거나 다른 블로그의 코드를 복사하면 정상적으로 확인되지 않습니다. 구글의 사이트를 애드센스에 연결하는 공식 안내에서도 코드를 두 head 태그 사이에 배치하도록 설명합니다.

자동 연동 기능과 수동 스킨 코드를 무조건 함께 사용할 필요는 없습니다. 같은 스크립트를 중복 삽입하면 관리가 어려워질 수 있으므로 현재 스킨에 이미 애드센스 코드가 있는지 먼저 검색하고, 필요한 방식 한 가지를 기준으로 정리하세요.

저장 후 블로그와 애드센스 상태 확인하기

• 복사한 코드가 내 애드센스 계정의 코드인지 확인합니다.
• 직접 삽입한 사이트 연결용 코드나 메타 태그가 <head>와 </head> 사이에 있는지 확인합니다.
• 동일한 애드센스 스크립트가 여러 번 들어가 있지 않은지 검색합니다.
• 테마나 스킨을 수정하기 전에 백업했는지 확인합니다.
• 저장 후 블로그 첫 화면과 글 화면이 정상적으로 열리는지 확인합니다.
• 애드센스 화면에서 사이트 확인 또는 검토 요청 상태를 확인합니다.

먼저 Blogger의 수입 메뉴나 티스토리의 수익 메뉴에서 제공하는 연동 기능을 확인하고, 직접 편집이 필요할 때만 테마나 스킨 HTML을 수정하면 됩니다. 수동으로 사이트 연결용 코드를 넣었다면 본인 계정의 코드인지, 안내된 위치에 중복 없이 들어갔는지 확인하세요. 마지막으로 블로그 첫 화면과 글 화면이 정상적으로 열리는지, 애드센스에서 연결 및 검토 상태가 어떻게 표시되는지 확인합니다.