네이버 서치어드바이저 웹마스터 도구에서 앱링크 오류가 발생하는 경우

2019. 12. 17. 09:51 | 댓글 8

네이버 서치어드바이저의 웹마스터도구에서 '페이지와 연동되는 모바일 앱 링크가 존재하지 않습니다.' 오류가 발생하는 경우가 있습니다. 아마 별다른 조치를 하지 않았다면 모든 사이트에서 이 오류가 표시될 것 같습니다.

웹마스터도구에 접속한 다음 검증 > 웹페이지 최적화를 선택하고 웹 페이지 최적화 검증에서 주소를 넣고 "확인"을 누르도록 합니다.

그러면 다음 그림과 같이 모바일 사용성 아래의 '앱링크' 항목에 '페이지와 연동되는 모바일 앱 링크가 존재하지 않습니다.' 경고가 표시될 것입니다.

위와 같은 경고가 표시되는 경우 웹마스터도구의 웹 표준 HTML 마크업 가이드를 참고하여 조치를 취할 수 있습니다. 

여러분의 웹 문서 콘텐츠가 모바일 앱으로도 제공이 가능하다면 앱 링크 정보를 넣어주세요.
앱 링크 기법은 여러분이 제공한 앱을 설치한 사용자가 웹 문서를 방문할 때 앱으로 연결이 가능하도록 도와줍니다.
자세한 내용은 http://applinks.org를 참고하세요.
[출처] 네이버 웹마스터도구 : 웹표준 HTML 마크업 가이드 (2)|작성자 LOG

즉, 웹 문서 콘텐츠가 모바일 앱으로도 제공이 되는 경우에는 다음과 같은 형식으로 <head>...</head> 사이트에 코드를 넣을 수 있습니다. 그러면 여러분이 제공한 앱을 사용자가 설치한 경우 웹 문서를 방문할 때 앱으로 연결이 가능하다고 합니다.

<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> 사이에 추가해도 될 것 같습니다. 그러면 네이버 웹마스터도구에서 오류가 사라지게 됩니다.

워드프레스에서는 여러 가지 방법으로 코드를 넣을 수 있습니다.

  1. 차일드 테마를 만들고 header.php 파일에 코드 추가
  2. 차일드 테마 내의 함수 파일에 코드 추가
  3. 테마에서 Header에 코드를 넣는 것을 허용하는 경우 테마 기능 이용 (예: Divi 테마)
  4. 플러그인 사용

플러그인을 사용하거나 테마의 기능을 사용하고 싶은 경우 "워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: Insert Headers and Footers 플러그인" 글을 참고해보세요.

테마의 함수 파일에 코드를 추가하고 싶은 경우 다음 코드를 차일드 테마 폴더 내의 functions.php 파일에 추가하도록 하시기 바랍니다.

// 앱 링크
function mobileapp_link() {
    ?>
<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">
    <?php
}
add_action('wp_head', 'mobileapp_link');

저장한 후에 다시 웹 페이지 최적화 검증을 실시해보면 X 표시가 없어지고 "웹 페이지와 연동되는 모바일 앱 링크가 존재합니다."로 바뀌어 있을 것입니다.

단순히 '페이지와 연동되는 모바일 앱 링크가 존재하지 않습니다.' 오류가 표시되지 않도록 하고 싶은 경우 시도해볼 수 있습니다. 저는 워드프레스 사이트에 이 방법을 사용하여 SEO에 변화가 발생하는지 체크해볼 생각입니다.

티스토리의 경우:

티스토리의 경우 꾸미기 > 스킨 편집을 클릭합니다.

스킨 편집 화면이 표시되면 "html 편집"을 클릭합니다.

HTML 탭에서 위에 제시된 코드를 <head>...</head> 사이에 복사하여 붙여넣기합니다.

저장한 후에 네이버 웹마스터도구에서 테스트해보면 앱링크 오류가 표시되지 않을 것입니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    인생2막은 EnJoY

    좋은정보 잘보고 공감하고 갑니다~^^

  2. thumbnail
    Deborah

    저 질문이 있어요. 글에 을 쓸때 본문글에 색상이 들어 가게 어떻게 할 수 있죠? 예전에는 그런 기능이 있어서 가능했는데 지금 새로 편집 기능이 바뀌고 난 다음 그 기능이 없어졌어요. 어떻게 하면 글 일부분에 바탕 색을 깔아 놓고 글을 쓸 수가 있지요? 다른 블로그님 몇분들은 그렇게 하고 있어서요. 혹시나 아시나 해서 묻습니다. 물론 본문글과 관계 없는 질문이었네요. ㅠㅠ

  3. thumbnail
    열매맺는나무

    1. 잘 이해가 안됩니다. 다음 처럼 생각하면 될까요?
    1) 블로그를 보여주기 위해 따로 만들어 놓은 앱이 있을 경우, 저 표시가 뜨지 않는다.
    2) 오류처럼 보이는 표시가 보기 싫으면, 앱이 없더라도 나타나지 않게 하는 방법은 있다. (html 편집)

    2. SEO에 어떤 변화가 있었나요?