본문으로 바로가기
  1. Home
  2. 워드프레스/사용 팁
  3. 네이버 서치어드바이저 웹마스터 도구에서 앱링크 오류가 발생하는 경우

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

· 댓글 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> 사이에 복사하여 붙여넣기합니다.

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

참고:

💬 댓글 8
logo

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

logo

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

logo

안녕하세요? 새 에디터를 사용하시나요?

글자 색깔과 배경색을 바꾸는 옵션이 있습니다.

다음 그림을 참고해보세요.

https://www.screencast.com/t/Qlt9yE4aor9D

logo

다른 블로그의 참고할 수 있는 링크를 알려주시겠어요?

logo

아 저도 그렇게는 하는데요. 글 색의 배경만 색깔을 넣을수 있더라고요. 전 박스안에 다 색을 넣고 싶어서 물어 본거에요.

https://deborah.tistory.com/2059
이해가 안가신다면 저의 예전 글을 보시면 네모박스안에 다른색이 보이죠. 이렇게 글을 작성하고 싶어서 물어 보는겁니다. 몇몇 이웃분들 그렇게 작성 하셔서 어떻게 해야 하나 궁금해서 물어 봅니다.

logo

다음 글을 참고해보세요:

https://avada.tistory.com/1579

logo

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

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

logo

사실 별 의미는 없는 것 같습니다. 다만, 네이버 웹마스터도구에서 이 오류를 수정하고 싶다는 분이 계셔서 정리해보았습니다. 네이버 SEO에서는 조금 도움이 되지 않을까 생각되지만, 실질적으로는 모르겠습니다.

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

서비스를 생각한다면 삼성이⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

저도 노트북에 모니터 연결하⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

무거운 게임 안 하고 주로 사⋯

💬무찌마

저는 삼성하고 엘지 것이 제⋯

💬★이카루스★

감사합니다~ 즐거운 하루 보⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 시작 가이드

워드프레스 시작하기
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드