티스토리 뷰

컴퓨터생활

웹사이트 구조를 모바일 사용성에 최적화하기

제이피알 2017. 9. 19. 10:53

모바일사용성

 

안녕하세요 웹마스터도구를 이용해서 내가만든 웹사이트를 최적화 시키는 방법에 대해서 포스팅 중인데요 그중에

모바일 사용성을 최적화 시키는 방법에 대해서 금일 포스팅을 해볼까 합니다.

 

현황

 

웹마스터도구로 사이트주소를 넣고 해당 페이지로 이동하신후에 로그인을 하고 내 웹사이트를 선택하신후에 현황 - 사이트최적화 메뉴를 클릭하시면 사이트 구조를 보실수가 있는데요~세번재에 모바일 사용성에 대해서 알아

보도록 하겠는데요 보통 반응형으로 제작된 웹의 경우에는 자동으로 최적화되기 때문에 따로 수정을 하지 않으

셨으면 개선사항이 없습니다. 그러나 X표기가 표시되면서 개선사항이 발생할경우에는 수정하는 방법에 대해서

알아보도록 하겠습니다. 동그라미안에 ?표를 클릭하시면 웹표준 html마크업 가이드를 다시 클릭합니다.

 

반응형웹

우선적으로 <head>태그안에 <meta>태그를 활용하면 되는데요 반응형웹이란 웹브라우저가 웹문서의 가로폭에 맞게 자동적으로 조절해주는 형태인데요 <meta name="viewport" content="width-device-width"> 명령어를 넣어

주면 됩니다.

 

확인및수정

 

자그럼 확인해보도록 하겠습니다. 우선 FTP프로그램을 열고 내 웹사이트로 접속을 하신 후에 오른쪽에 리모트

사이트의 위치를 잡아주신후에 <head>태그가 있는 파일을 열어 그누보드5일 경우에는 head.sub.php파일입니다

마우스오른쪽을 눌러 보기/편집을 클릭하면 에디터가 나오는데요 <head>태그내에 찾아보시면 <meta>태그로

찾으실수가 있는데요 이것이 없다면 이 위치에다가 적어주시고 저장해주면 됩니다.

 

별도의모바일주소

 

별도의 모바일 url 제공이 될경우 메인사이트 주소를 적어주시는것이 좋은데요 <head>태그 위치내에

<link>태그를 이용해서 URL을 명시해주는것이 좋습니다 예를들어 http://j3pr.woobi.co.kr이 데스크탑

페이지이고 http://m.j3pr.woobi.co.kr/이 모바일 URL일 경우 모바일 페이지의 <head>태그내에다가

<link rel="canonical" href="http://j3pr.woobi.co.kr">이라고 적어주시면 되구요 개별페이지도 마찬

가지로 해당 개별페이지에다가 데스크탑 주소를 <head>태그에 <link>태그로 적어주시면 됩니다.

redirect처리는 현재 접속하는 브라우저의 환경에 맞게 자동으로 재연결시켜주시면 되는데요 보통

반응형 웹에서는 자동으로 지원해줍니다.

 

모바일앱연결

 

모바일에서 사용하는 앱으로 연결할때 설정을 해주시면되는데요 <meta>태그를 활용해서 위의 그림과 같이

앱링크정보를 넣어주시면되는데요 <head>태그내에 꼭 기입해주시면됩니다.

 

저작자표시

'컴퓨터생활' 카테고리의 다른 글

내켬퓨터의 인터넷주소(ip) 변경하는 방법  (0) 2017.09.22
웹마스터도구의 사이트활성화 개선방안  (0) 2017.09.20
사이트 최적화를 위한 링크관리 개선  (4) 2017.09.16
html구조 개선해서 내사이트 최적화하기  (3) 2017.09.15
제목이 동일한 웹페이지 개선방법  (0) 2017.09.14
공유하기 링크
댓글