애드센스 인피드 광고 HTML 코드 만드는 방법

📢 애드센스 인피드(In-Feed) 광고 HTML 코드 만드는 방법

🚀 애드센스 인피드 광고는 목록형 콘텐츠(리스트, 카드형 UI) 사이에 자연스럽게 삽입되는 광고입니다.

💡 블로그, 뉴스 사이트, 다큐 리뷰 콘텐츠 등에 적합하며, CTR(클릭률)과 CPC(클릭당 수익)을 높이는 데 효과적입니다.

🔹 1. 인피드 광고 생성 방법 (애드센스에서 코드 발급)

✅ Step 1: 애드센스 계정 로그인 → Google AdSense
✅ Step 2: "광고" → "광고 단위 만들기" 클릭
✅ Step 3: 광고 유형 선택 → "인피드 광고" 선택
✅ Step 4: 스타일 설정 (텍스트 색상, 배경색 조정 가능)
✅ Step 5: "코드 생성" 버튼 클릭 → HTML 코드 복사

🔹 2. 인피드 광고 HTML 코드 예제

📌 아래 코드를 복사하여 블로그, 웹사이트, HTML 편집기에 삽입하세요.

<!-- Google AdSense In-Feed 광고 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-XXXXXXX"  <!-- 여기에 본인의 애드센스 ID 입력 -->
     data-ad-slot="YYYYYYY">  <!-- 광고 슬롯 ID 입력 -->
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

📌 변경해야 할 부분:

ca-pub-XXXXXXX → 본인의 애드센스 퍼블리셔 ID 입력
data-ad-slot="YYYYYYY" → 본인의 광고 슬롯 ID 입력

🔹 3. 인피드 광고를 리스트(목록) 사이에 삽입하는 예제

📌 블로그 게시글에서 다큐 추천 목록 사이에 광고 넣기

<ul>
    <li>넷플릭스 다큐멘터리 추천 1</li>
    <li>넷플릭스 다큐멘터리 추천 2</li>

    <!-- 광고 삽입 -->
    <li>
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-format="fluid"
             data-ad-layout="in-article"
             data-ad-client="ca-pub-XXXXXXX"
             data-ad-slot="YYYYYYY">
        </ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </li>

    <li>넷플릭스 다큐멘터리 추천 3</li>
    <li>넷플릭스 다큐멘터리 추천 4</li>
</ul>

📌 이 방식의 장점
✅ 광고가 콘텐츠처럼 자연스럽게 노출되어 클릭률 증가
✅ 사용자가 목록을 읽는 동안 광고를 쉽게 발견

🔹 4. 인피드 광고를 카드형 UI에 삽입하는 예제 (CSS 적용 가능)

📌 블로그, 뉴스 사이트에서 카드형 레이아웃 내 광고 삽입하는 코드

<div class="card-container">
    <div class="card">
        <h3>넷플릭스 다큐 추천 1</h3>
        <p>실화 기반 범죄 다큐멘터리</p>
    </div>

    <div class="card">
        <h3>넷플릭스 다큐 추천 2</h3>
        <p>역사적 사건을 다룬 다큐멘터리</p>
    </div>

    <!-- 광고 삽입 -->
    <div class="card">
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-format="fluid"
             data-ad-layout="in-article"
             data-ad-client="ca-pub-XXXXXXX"
             data-ad-slot="YYYYYYY">
        </ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <div class="card">
        <h3>넷플릭스 다큐 추천 3</h3>
        <p>미제 사건을 다룬 미스터리 다큐</p>
    </div>
</div>

📌 CSS 스타일 추가 (선택사항)

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
}

🔹 5. 워드프레스에서 인피드 광고 삽입하는 방법

✅ Step 1: "테마 편집기"에서 single.php 또는 content.php 파일 열기
✅ Step 2: <article> 태그 안에 광고 코드 삽입
✅ Step 3: "저장" 후 적용 확인

📌 워드프레스에서 자동으로 광고 삽입하는 플러그인 추천
🔹 Ad Inserter (광고 자동 삽입)
🔹 Advanced Ads (애드센스 최적화 플러그인)

🔹 6. 인피드 광고 최적화 팁 (CTR & CPC 상승 전략)

✅ 목록형 콘텐츠 중간에 삽입 (예: "TOP 10 다큐 추천" 리스트)
✅ 카드형 UI에서 2~3개마다 광고 배치 (자연스럽게 유도)
✅ 반응형 광고 설정 → 모바일에서 최적화됨 (RPM 상승)
✅ 광고 앞뒤에 제목 추가 (예: "🎬 추천 다큐 보기 전 확인하세요!")
✅ 글 길이가 1,500자 이상일 경우 2~3개 배치 (수익 극대화)

📌 최적의 광고 배치 예제 (블로그 기준)
1️⃣ 본문 첫 번째 단락 후 광고 삽입
2️⃣ 추천 콘텐츠 리스트 중간에 인피드 광고 배치
3️⃣ 본문 끝부분 CTA(클릭 유도) 앞에 광고 삽입

🎯 결론: 효과적인 인피드 광고 활용법

✅ 1) 애드센스에서 인피드 광고 생성 후 HTML 코드 복사
✅ 2) 목록형 콘텐츠 & 카드형 UI에서 자연스럽게 배치
✅ 3) 모바일 최적화 & 광고 위치 조정으로 CTR 증가
✅ 4) 워드프레스에서는 플러그인 사용으로 간편 적용 가능

📌 이 방법을 활용하면 CTR & CPC 상승, 애드센스 수익 극대화 가능! 🚀