Life & Story

반응형

네이버 웹마스터 도구의 웹 페이지 최적화 검증을 하는 경우 다른 항목은 모두 잘 인식되고 있는데 모바일 상용성의 앱링크 부분만 붉은색 엑스자가 뜨면서 '페이지와 연동되는  모바일 앱 링크가 존재하지 않습니다'라고 뜨는 경우가 있습니다. 

 

이 부분은 실제 연동된 앱이 없기 때문에 당연히 빨간색으로 엑스가 뜨는 것이 정상입니다. 그럼에도 모두 그린 라이트인데 한 가지라도 빨간불이면 찝찝한 기분이 남기 때문에 이 부분을 해결해하는 방법을 알아보겠습니다.

 

이 부분을 해결하기 위해서 먼저 앱링크의 물음표를 클릭해 봅니다. 그러면 두 가지 경우가 나옵니다. 

 

먼저 위와 같이 나오는 경우 아래 매타 태그 소스를 복사합니다. 

 

<meta property="al:ios:url" content="applinks://docs" /> 
<meta property="al:android:url" content="applinks://docs" />

 

복사를 완료 했다면 티스토리 블로그 관리탭으로 옵니다. 꾸미기 탭에서 스킨 편집을 누루고 html 편집에 들어가 <head> 아래 적당한 곳에 복사한 태그 소스를 붙여 넣습니다.

 

head 부분에는 메타태그가 많기 때문에 구분을 할 수 있도록 해주는 것이 헷갈리지 않고 나중에 찾기 쉽습니다. 

 

 

적용을 누루고 창을 닫고 나오면 앱링크 오류 해결 작업이 완료된 것입니다. 

 

앱링크에 관한 자세한 정보는 https://applinks 에서 확인할 수 있습니다. 

 

혹시라도 'HTML 문서와 연결되는 모바일 앱링크입니다. 자세한 내용은 웹표준 HTML 마크업 가이드를 참고하세요' 라고 나오는 경우 라면 '웹 표준 HTML 마크 업 가이드' 부분에 밑줄이 있는 것을 확인할 수 있을 것입니다. 

 

 

이경우네는 '웹표준 HTML 마크업 가이드' 부분을 클릭해 들어갑니다. 

 

클릭을 하면 다음과 같은 화면으로 연결되며 '모바일 앱 연결' 항목에 다음과 같은 코드가 나올 것입니다. 

<head>
    <meta property="al:ios:url" content="applinks://docs">
    <meta property="al:ios:app_store_id" content="12345">
    <meta property="al:ios:app_name" content="App Links">
    <meta property="al:android:url" content="applinks://docs">
    <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">
</head>

 

<head>부터 </head>까지의 사이에 있는 태그를 모두 복사합니다.

 

다음으로 티스토리 블로그 관리항목으로 와서 꾸미기-스킨 편집 클릭해 줍니다. 스킨 편집을 클릭하고 다시 html 편집을 클릭한 다음 메타태그들이 있는 <head>와 </head> 적당한 곳에 붙여 넣습니다. 적용을 눌러주면 작업이 완료된 것입니다. 

 

다음으로 다시 네이버 웹마스터 도구로 돌아와 웹페이지 최적화 검증에서 확인을 누르면 앱링크 부분이 그린으로 바뀐 것을 확인할 수 있을 것입니다. 

 

이로써 앱링크의 '웹 페이지와 연동되는 모바일 앱 링크가 존재하지 않습니다'라는 오류를 해결할 수 있습니다. 

반응형

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band