블로그 글을 쓰다 보면 관련 포스팅이나 참고 사이트 링크를 남겨야 할 때가 많습니다. 그런데 일반 텍스트 링크로만 걸어두면 독자 눈에 잘 띄지 않아 그냥 지나치는 경우가 많죠?
"어떻게 해야 독자가 클릭하고 싶어지는 예쁜 링크를 만들 수 있을까?"
네이버나 티스토리처럼 자동으로 링크 카드가 뜨지 않는 블로그스팟(Blogger)에서도, 간단한 HTML 코드만 활용하면 시선을 사로잡는 버튼형 및 상자형 링크박스를 손쉽게 구현할 수 있습니다.
오늘 글에서는 클릭률을 높여주는 링크박스 HTML 코드 2가지와 적용 방법을 쉽고 빠르게 정리해 드리겠습니다.
1. 클릭을 유도하는 깔끔한 '버튼형 링크박스'
가장 직관적이고 시선을 사로잡는 형태는 CTA(Call To Action) 디자인의 버튼 형태입니다. 중요한 관련 글로 이동시킬 때 아주 효과적입니다.
🚨 링크박스 적용 3단계 순서
- 모드 전환: 글쓰기 화면 좌측 상단의 연필 모양 아이콘을 눌러 [HTML 보기] 모드로 변경합니다.
- 코드 붙여넣기: 아래 블루 박스의 코드를 복사하여 링크를 넣을 위치에 붙여넣습니다.
- 주소 및 문구 수정:
https://이동할주소.com부분에 실제 링크 주소를 넣고, 버튼 안의 문구를 수정합니다.
💡 바로 복사해서 쓰는 버튼형 링크박스 코드
<div style="margin: 25px 0; text-align: center;">
<a href="https://이동할주소.com" target="_blank" rel="noopener noreferrer" style="background-color: #ff4e50; color: #ffffff; font-weight: bold; padding: 14px 28px; border-radius: 6px; text-decoration: none; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
👉 [추천] 함께 보면 좋은 관련 포스팅 보러가기 (클릭)
</a>
</div>
background-color 값을 변경하면 빨간색 외에도 파란색(#2b6cb0), 초록색(#38a169) 등 내 블로그 테마에 맞게 색상을 자유롭게 변경할 수 있습니다.
2. 요약 설명이 들어가는 '카드형 요약 링크박스'
단순한 버튼보다 링크에 대한 세부 설명이나 가이드 문구를 함께 제공하고 싶을 때는 카드 상자 형태의 링크박스를 추천합니다.
💡 바로 복사해서 쓰는 카드형 링크박스 코드
<div style="border: 1px solid #e2e8f0; border-left: 5px solid #2b6cb0; background-color: #f8fafc; padding: 18px; margin: 20px 0; border-radius: 4px;">
<p style="margin: 0 0 8px 0; font-size: 0.9em; color: #718096; font-weight: bold;">📌 관련 추천 가이드</p>
<h4 style="margin: 0 0 10px 0; font-size: 1.1em;">
<a href="https://이동할주소.com" target="_blank" rel="noopener noreferrer" style="color: #2b6cb0; text-decoration: none;">
[블로그스팟] 이전 편 핵심 포스팅 제목을 입력하세요
</a>
</h4>
<p style="margin: 0; font-size: 0.9em; color: #4a5568;">이 글과 함께 읽으면 블로그스팟 운영과 수익화에 큰 도움이 되는 연관 포스팅입니다.</p>
</div>
카드형 박스는 글 중간에 자연스럽게 녹아들면서도 깔끔한 인상을 주기 때문에 관련 글 링크를 연결(내부 링크 구조화)할 때 매우 유용합니다.
3. 내부 링크와 링크박스가 구글 SEO에 주는 영향
링크박스를 활용해 블로그 내 다른 글로 연결(내부 링크)해 두는 작업은 구글 검색 상위 노출에 있어 매우 핵심적인 역할을 합니다.
| 구분 | SEO 및 블로그 영향 | 주요 효과 |
|---|---|---|
| 이탈률 감소 | 페이지뷰(PV) 및 체류시간 증가 | 글을 다 읽은 독자가 다른 관련 포스팅으로 계속 이동하게 만듦 |
| 구글 크롤링 효율 | 색인 수집 속도 향상 | 구글 로봇(봇)이 링크를 타고 블로그 전체 포스팅을 빠르게 수집함 |
| 클릭률(CTR) 상승 | 시각적 강조 효과 | 밋밋한 텍스트 링크 대비 버튼 형태가 독자의 시선을 끌어 클릭 유도 |
포스팅을 올릴 때마다 관련 있는 기존 포스팅 1~2개를 링크박스로 연결해 두는 습관을 들이시면 블로그 전체 지수를 올리는 데 큰 힘이 됩니다.
❓ 링크박스 만들기 FAQ
Q1. 링크 클릭 시 새 창으로 열리게 하려면 어떻게 하나요?
링크 태그 안에 target="_blank" rel="noopener noreferrer" 속성이 들어가 있으면 자동으로 새 창(새 탭)에서 열립니다. 위 제공해 드린 가속사 반응형 코드에는 이미 적용되어 있습니다.
Q2. 코드를 붙여넣었는데 모양이 이상하거나 깨져 보여요.
블로그스팟 [작성 보기] 모드에서 코드를 직접 붙여넣으면 문자로 인식되어 깨질 수 있습니다. 반드시 좌측 상단 연필 아이콘을 눌러 [HTML 보기] 모드로 전환한 뒤 코드를 넣어주셔야 정상적으로 표시됩니다.
🎯 오늘 글의 핵심 요약
- 텍스트 링크 대신 버튼형/카드형 링크박스를 활용하면 독자의 클릭률이 상승한다.
- HTML 모드에서 제공해 드린 템플릿 코드를 붙여넣고 주소와 문구만 변경하면 손쉽게 완성된다.
- 관련 글 링크박스 배치는 체류시간 증대 및 구글 크롤링 효율 향상(SEO)에 필수적이다.
"클릭을 부르는 예쁜 링크박스로 블로그 체류시간을 극대화해 보세요. 가속사 여러분 화이팅!"