본문 바로가기

고풍 재테크/애드센스

네이버 웹마스터도구 웹 페이지 최적화 모바일 앱 링크 문제 해결!

이번 포스팅은 네이버 웹마스터도구의 웹 페이지 최적화를 위한 모바일 앱 링크 문제 해결이라는 주제의 포스팅입니다.


블로거들의 숙제 중 하나인 웹마스터도구 문제 해결이 매우 어렵죠.

저도 매일 머리아플정도로 해결책을 찾느라 고생하고 있습니다.


저 같은 경우 웹 페이지 최적화에서 모바일 앱 링크에서만 문제가 생겨서 직접 해결해보기로 하였습니다.


네이버 웹마스터도구의 모바일 앱 링크 문제를 해결하는 절차를 요약하면 다음과 같습니다.

Step 1. 네이버 웹마스터도구 로그인 → 검증 → 웹 페이지 최적화 클릭

Step 2. 웹 페이지 최적화 검증 → 확인

Step 3. 최적화 되지 않은 곳 찾기

Step 4. 모바일 사용성 → 앱링크의 물음표 부분 클릭

Step 5. 웹 표준 HTML 마크업 가이드 클릭

Step 6. HTML 문서의 <head>, </head>를 제외한 메타태그 복사

Step 7. 티스토리 블로그관리 홈의 HTML/CSS편집 

Step 8. HTML의 <head>부분 어딘가에 복사한 메타태그 삽입 후 저장

Step 9. 네이버 웹마스터도구로 돌아가 모바일 사용성 앱 링크 존재 확인!



그럼 지금부터 하나하나 자세히 웹 페이지 최적화를 위한 네이버 웹마스터도구의 모바일 앱 링크 문제를 해결해보겠습니다.



Step 1. 네이버 웹마스터도구 로그인 → 검증 → 웹 페이지 최적화 클릭

웹 페이지 최적화웹 페이지 최적화


우선 문제를 해결하기 위해 네이버 웹 마스터도구로 들어가 위의 화면처럼 검증의 웹 페이지 최적화를 클릭합니다.



Step 2. 웹 페이지 최적화 검증 → 확인

웹 페이지 최적화 검증웹 페이지 최적화 검증


웹 페이지 최적화를 클릭하고 위의 화면의 확인을 클릭하면 본인 블로그의 웹 페이지 최적화 상태를 확인할 수 있습니다.

본인의 블로그 주소 뒤에 아무것도 입력하지 않고 그냥 확인만 누르시면 됩니다.



Step 3. 최적화 되지 않은 곳 찾기

최적화 확인최적화 확인


검색 로봇 수집과 콘텐츠 부분은 최적화가 잘 되어 있는 것을 확인하실 수 있습니다.

최적화가 되지 않은 곳에서의 문제만 해결해주시면 됩니다.



Step 4. 모바일 사용성 → 앱링크의 물음표 부분 클릭

앱 링크 문제앱 링크 문제


최적화가 되지 않은 곳을 발견했네요.

바로 모바일 사용성의 앱링크 부분입니다.


페이지와 연동되는 모바일 앱 링크가 존재하지 않는다고 빨간네모박스안에 표시되어 있네요.



그럼 지금부터 문제를 알았으니 해결을 해나가야겠죠.

앱링크 옆에 파란네모박스안의 물음표 부분을 클릭해서 자세히 살펴봅니다.



Step 5. 웹 표준 HTML 마크업 가이드 클릭

웹 표준 HTML 마크업 가이드웹 표준 HTML 마크업 가이드


앱링크 옆에 물음표를 클릭하면 위와 같은 화면이 나옵니다.

여기에서 자세한 내용은 웹 표준 HTML 마크업 가이드를 참고하라고 나오네요.

참고하라니 참고를 해봐야겠죠.

위의 빨간네모박스안의 웹 표준 HTML 마크업 가이드를 클릭해서 들어갑니다.



Step 6. HTML 문서의 <head>, </head>를 제외한 메타태그 복사

메타태그 복사메타태그 복사


문제해결의 실마리가 여기에 있네요.

모바일 앱을 연결하기 위해서는 HTML 문서의 <head> 태그내에 메타태그를 활용하라고 하네요.

활용하라고 했으니 당연히 활용해서 문제를 해결해야죠.


위의 빨간네모박스안에 메타태그 내용들을 복사합니다.

여기에서 <head>와 </head>부분은 제외하고 복사를 해줍니다.

<head>부분은 실제로 티스토리 블로그 안에 존재하는 큰 틀이기 때문에 안에 내용인 메타태그 알맹이만 복사해서 옮겨주면 됩니다.

  


Step 7. 티스토리 블로그관리 홈의 HTML/CSS 편집

HTML/CSS 편집HTML/CSS 편집


이제 메타태그를 복사했으니 티스토리 블로그에 옮겨서 붙여넣기를 해줘야겠네요.

티스토리 블로그의 블로그 관리홈으로 들어가 위의 빨간네모박스안의 HTML/CSS편집을 클릭해줍니다.



Step 8. HTML의 <head>부분 어딘가에 복사한 메타태그 삽입 후 저장

메타태그 삽입 후 저장메타태그 삽입 후 저장


보기만해도 머리아픈 티스토리블로그의 HTML입니다.

여기에서 위의 화면의 빨간네모박스안의 복사한 메타태그를 <head>부분 어딘가에 붙여넣기를 해줍니다.

그리고 오른쪽 위의 저장을 눌러줍니다.

 이러면 모든 작업은 끝나게 됩니다.



Step 9. 네이버 웹마스터도구로 돌아가 모바일 사용성 앱 링크 존재 확인!

모바실 앱 링크 문제해결모바일 앱 링크 문제해결


메타태그를 복사해서 티스토리 블로그에 붙여넣기하고 저장까지 완료를 했습니다.

하지만 한가지 더 해야할 것이 있죠.

바로 네이버 웹마스터도구로 돌아가서 문제가 해결되었는지까지 확인을 해주어야합니다.


위의 화면을 보시면 모바일 사용성 부분에서 빨간네모박스안의 앱링크 문제가 해결된 것을 확인하실 수 있으실겁니다.

최적화 작업에 한 걸음 더 다가가서 매우 뿌듯하네요.



앞으로도 공부하고 연구해서 최상위 블로그로 만들기 위해 노력해야겠네요.

혹시라도 하시다가 모르시는 부분 있으신 분은 댓글 달아주시면 알려드리겠습니다.


그럼 이상으로 네이버 웹마스터도구의 웹 페이지 최적화를 위한 모바일 앱 링크 문제 해결 포스팅을 마치도록 하겠습니다.

다음에도 웹마스터도구의 문제가 있을시에 다른 포스팅으로 찾아뵙도록 하겠습니다!


도움이 되셨다면 공감버튼 꾸~~욱!! 눌러주세요!