블로그 전화번호 링크 넣는법

블로그 글 보다가 전화번호 부분 눌렀는데 아무 반응 없어서 번호를 따로 복사해 저장해본 경험, 다들 있으실 겁니다. 특히 모바일에서 블로그로 유입된 방문자는 바로 전화 걸기를 원하는 경우가 많은데, 텍스트로만 적힌 전화번호는 클릭이 안 됩니다. 이 글에서는 네이버 블로그, 티스토리, 워드프레스 각각에서 전화번호를 클릭 시 바로 통화 연결되게 만드는 방법을 정리합니다.

원리부터 짚고 갑니다 — tel: 프로토콜

웹에서 전화 연결 링크는 특별한 기술이 아니라 tel:이라는 프로토콜을 쓰는 것뿐입니다. 일반적인 링크가 http://나 https://로 시작한다면, 전화 연결 링크는 주소창 자리에 tel:전화번호를 넣으면 됩니다.

<a href="tel:01012345678">전화 걸기</a>

이 코드가 있는 텍스트나 버튼을 모바일에서 누르면 전화 다이얼러가 바로 뜨고, 통화 버튼만 누르면 연결됩니다. 플랫폼마다 다른 건 이 tel: 링크를 “어디에 어떻게 넣느냐”의 차이일 뿐입니다.

플랫폼별 적용 방법

네이버 블로그 (스마트에디터)

본문에 전화번호 텍스트를 입력합니다. (예: 010-1234-5678)
해당 텍스트를 드래그해서 선택합니다.
툴바에서 링크 삽입 아이콘을 누릅니다.
URL 입력란에 http:// 대신 tel:01012345678 형식으로 입력합니다.
확인 후 발행하면 끝입니다.

네이버 블로그는 직접 HTML 삽입이 막혀 있어서 반드시 에디터의 “링크 삽입” 기능을 거쳐야 합니다. 하이픈은 없어도 되고 있어도 대부분 인식되지만, 저는 숫자만 붙여서 tel:01012345678로 넣는 걸 기본으로 하고 있습니다. 하이픈이 포함된 상태로 안 먹는 경우를 몇 번 봤기 때문입니다.

티스토리

기본 에디터에서 전화번호 텍스트를 드래그합니다.
링크 아이콘(사슬 모양)을 클릭합니다.
링크 주소란에 tel:번호를 입력하고 적용합니다.

티스토리는 HTML 모드 전환이 가능하니, 마크다운/HTML 편집기를 쓴다면 아래처럼 직접 코드를 넣어도 됩니다.

<a href="tel:01012345678">010-1234-5678</a>

워드프레스

워드프레스는 두 가지 방법이 있습니다.

1) 구텐베르크 에디터에서 링크 삽입
텍스트를 선택하고 링크(체인 아이콘) 버튼을 누른 뒤, 주소창에 tel:01012345678을 입력하면 됩니다. URL 형식 검증 때문에 가끔 경고가 뜨는 테마도 있는데, 무시하고 적용해도 정상 작동합니다.

2) 커스텀 HTML 블록으로 직접 삽입
버튼 형태로 만들고 싶으면 HTML 블록에 아래처럼 넣습니다.

<a href="tel:01012345678" style="display:inline-block;padding:10px 20px;background:#0aa06e;color:#fff;border-radius:6px;text-decoration:none;">
  전화 걸기
</a>

워드프레스 사이트를 여러 개 운영하다 보니, 문의 전환이 중요한 사이트는 본문 중간과 하단에 이 버튼형 링크를 반복 배치해두는 편입니다. 텍스트 링크보다 버튼이 눈에 잘 띄어서 클릭 유도가 확실히 낫더군요.

적용할 때 주의할 점

PC에서는 안 눌립니다. tel: 링크는 전화 기능이 있는 기기(스마트폰) 기준으로 동작하는 프로토콜입니다. PC에서 클릭하면 브라우저가 연결된 프로그램이 없다는 안내를 띄우거나 아무 반응이 없을 수 있는데, 이건 정상입니다. 모바일 방문자를 노린 장치로 이해하면 됩니다.
번호 형식은 테스트해보고 정하기. 하이픈 포함(tel:010-1234-5678)과 숫자만(tel:01012345678) 둘 다 대부분 동작하지만, 에디터나 테마에 따라 하이픈이 있을 때 링크로 인식을 안 하는 경우가 있었습니다. 저장 후 실제 모바일로 한 번 눌러보고 확인하는 게 제일 확실합니다.
지역번호·대표번호는 그대로. 02, 1588 같은 번호도 형식은 동일합니다. tel:15881234 이런 식으로 넣으면 됩니다.
번호 노출이 부담되면 별도 서비스도 있습니다. 전화번호를 그대로 노출하지 않고 고유 링크로 감싸주는 ‘블로그텔’ 같은 서비스도 있는데, 명함이나 SNS 프로필에 쓰기엔 편하지만 블로그 본문에는 굳이 안 거쳐도 위 방법만으로 충분합니다.

정리

결국 핵심은 tel:전화번호 하나입니다. 이걸 네이버 블로그는 링크 삽입 기능으로, 티스토리와 워드프레스는 링크 삽입 또는 HTML 코드로 넣어주면 끝입니다. 사업 문의를 블로그로 받는 입장이라면, 텍스트로 번호만 적어두는 것과 클릭 한 번에 전화가 걸리게 해두는 것 사이에 방문자가 실제로 행동하기까지의 문턱 차이가 꽤 큽니다. 5분이면 끝나는 작업이니 지금 운영 중인 블로그 글에 하나씩 적용해보면 됩니다.

이 글은 AI(인공지능)의 도움을 받아 작성되었습니다.

[태그:] 블로그 전화번호 링크 넣는법