앱링크를 설정하는 방법 - 네이버 웹마스터
아마귀차니스트
·2020. 4. 10. 14:36
네이버 웹마스터에서 이것 저것 만져보다가, 문득 웹페이지 최적화 항목에서 모바일 사용성의 "앱링크"부분이 X표시되어있는 것을 보고 껄끄럽게 생각했습니다. '도대체 앱링크는 뭐지?' 이번 포스팅은 앱링크에 대해서 다룹니다.
앱링크 - HTML과 모바일 앱을 연결하는 링크
앱링크란 말을 구글, 네이버에 아무리 검색해도 정상적인 답변을 찾기가 너무 어려웠습니다. 네이버에서 말하는 앱링크는 "HTML문서와 연결되는 모바일 앱 링크"라는 의미인데, 이 개념이 딥링크와는 또 다른 개념이더라구요. 보통 딥링크라고 하면, 작성해놓은 컨텐츠로 안내하는 링크입니다. 즉 우리가 사용하는 대부분의 링크가 딥링크라고 볼 수 있습니다.
여기서 하나의 힌트를 얻을 수 있습니다. 우리가 블로그에서 흔히 작성하는 딥링크는 보통 HTML문서를 가리키는 "웹링크" 입니다. 모바일 환경에서는 A라는 사이트가 존재하고, A의 모바일 어플리케이션(이하 앱)이 존재할 때, A 사이트의 웹링크를 누르면, A 앱이 실행되어 링크된 컨텐츠를 보여줄 수 있습니다. 즉, 모바일 환경에서 웹브라우저를 통해 접근하는 것 보다 앱을 통해 접근하는 것이 좀 더 쉽고 단순한 경로이기 때문에, A 앱이 설치되어있다면, 직접 A 앱을 실행시켜 내부적으로 파일을 볼 수 있도록 해주는 것이죠.
'이 과정이 왜 필요한가?'를 고민해보면 아래와 같은 문제를 생각해 볼 수 있습니다.
친한 친구에게 괜찮은 런닝화가 올라온 사이트가 있어 링크를 복사해 전달해 주면, 웹 상에서 해당 링크를 보통 열어주게 됩니다. 이 때, 웹브라우저에서는 해당 사이트에 로그인이 되어있는 경우가 흔치 않기 때문에, 로그인을 하고 해당 제품을 다시 봐야하는 번거로움이 있죠. 사이트가 없이 앱으로만 작동되는 컨텐츠라면, App Store나 Play Store에서 해당 앱을 다운 받고, 검색해 공유했던 신발을 찾아야 하는 번거로움이 있습니다.
이런 번거로움을 단번에 해결해주고자 앱링크가 필요하게 됩니다.
사실 앱링크라는 용어보다 딥링크라는 용어가 넓은 범위에서 사용되고 있습니다. 다만, 모바일 환경에서 앱의 설치 유무에 따라 예전 상황에서는 사용자에게 오류가 발생하거나 폴백 페이지가 뜨게 되는 것이죠. 모바일 앱을 제공하는 경우는 쉽게 적용해 사용할 수 있지만, 티스토리에서 앱링크는 HTML로 표현해야 하나 싶은 다소 의아한 요소입니다.
몇몇 티스토리 블로그에서 추천하는 앱링크 리뷰
앱링크에 대해 구글링 하다보면, 몇몇 앱링크 코드를 정리해놓은 것들이 보입니다. 단순히 하단에 앱링크만 <head> 태그 안에 넣어놓으면 네이버 웹마스터에서 앱링크 부분을 정상처리 해주는데, 어떻게 작동하는지 살펴보기로 합니다.
<head>
....
<!--앱링크-->
<meta property="al:ios:url" content="applinks://docs"> //ios에서 앱 url
<meta property="al:ios:app_store_id" content="12345"> //ios 앱스토어 ID
<meta property="al:ios:app_name" content="App Links"> //ios 앱이름
<meta property="al:android:url" content="applinks://docs"> //안드로이드 앱 url
<meta property="al:android:app_name" content="App Links"> //안드로이드 앱이름
<meta property="al:android:package" content="org.applinks"> // 안드로이드 패키지 이름
<meta property="al:web:url" content="http://applinks.org/documentation"> //안드로이이드 앱 url
<!--앱링크끝-->
....
</head>
티스토리 블로그를 운영하는 몇몇 분들이 적용한 앱링크 메타태그 입니다. 물론 저도 적용은 해놨습니다만, 정확히 어떤의미인지 생각해보고자 합니다. meta태그의 property에 al:ios와 al:android는 각각 모바일 앱의 미리보기 설정을 제공합니다.
이렇게 표기된 어플리케이션 태그는 Open Grape 태그와 유사하게 받아들일 수 있습니다. 즉, SNS 상에 OG태그를 적용한 URL을 공유할 때, 미리보기로 컨텐츠에 대해 살짝 볼 수 있게 해주는 것이죠. 이런 설정을 통해 내 블로그 글에 대한 클릭률을 높일 수 있습니다. 마찬가지로 앱링크(al)태그 역시 앱내의 컨텐츠를 살짝 미리보기로 노출시켜 사람들이 호기심을 갖고 접근할 수 있도록 도와주는 링크에 관한 메타 태그라고 보시면 될 것 같습니다.
앱링크에 관한 자세한 설명 - https://applinks.org
페이스북 For 개발자에서 App Link에 관한 자세한 설명이 나타나있습니다. 해당 링크는 위 주소를 복사해서 새창에 여시거나, 아래 링크를 클릭해주세요.
본인이 운영하는 앱이 있고, 그 안에 컨텐츠를 페이스북에 공유한다고 가정해봅시다. 누군가가 내가 올려놓은 컨텐츠를 보고 클릭한다면 메타태그로 걸어둔 앱링크를 따라 ios나 안드로이드 환경에서 내 앱에 접근하기 쉽게 해줍니다.
마치며...
네이버 웹마스터 덕에 쓸데없는 오기가 생겨서 앱링크가 뭔지 찾아보기까지 했네요. 어플리케이션을 소유하고, 그 안에 나만의 데이터를 넣어 사람들을 유입시키고자 하는 상황이라면, 앱링크는 정말 유용할 것 같습니다. 그렇지 않은 티스토리 블로거라면 하등의 쓸데 없는 항목이라는 점을 말씀드리고 싶습니다.
다만 X표시된 부분이 싫다면, 위 태그를 붙여넣어 정상 표시만 되게 만들어 놓을 수 있습니다. 이점 참고하시고, 너무 걱정하지 않으셨으면 좋겠습니다.
'블로그 관리 > 네이버웹마스터' 카테고리의 다른 글
| 네이버 노출을 위한 웹마스터 활용 방법 (5) | 2020.04.09 |
|---|
