웹 표준 HTML 마크업 가이드
1. 기본 정보
HTML 문서의 <head> 태그내에 있는 <link> 태그를 활용합니다
<head>
<link rel="canonical" href="http://www.mysite.com/article/article1.html">
</head>동일 콘텐츠를 여러 개의 URL로 표현이 가능할 경우 가장 선호되는 대표 URL을 지정합니다. 예를 들어 아래 세 개의 URL이 동일한 페이지를 보여준다면, 선호 URL을 http://www.mysite.com/article/article1.html 로 지정하는 것이 좋습니다. 또한, URL 표현시에는 상대 경로가 아닌 절대 경로를 사용해야 합니다.
http://www.mysite.com/article/article1.html
http://www.mysite.com/article/article1.html?type=1&code=a
http://www.mysite.com/article/article1.html?type=2&code=b사이트의 메인 페이지의 경우는 link 태그를 활용한 선호 URL 지정보다는 HTTP redirect를 사용하여 사이트를 방문하는 사용자에게 혼동을 주지 않는 것이 좋습니다. 자세한 내용은 웹 표준 최적화 기본 가이드를 참고하세요.
HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다
<head>
<meta name="robots" content="명령어">
</head>로봇 메타 태그는 페이지 별로 검색로봇의 접근 여부를 제어할 수 있는 정보입니다. 명령어에 noindex를 사용하면 해당 페이지는 검색 결과에서 제외되며, nofollow를 사용하면 검색로봇이 해당 페이지 내의 링크를 수집하지 않도록 설정할 수 있습니다.
- 색인 대상으로 처리, 페이지 내 링크 미 수집<head>
<meta name="robots" content="index,nofollow">
</head> - 색인 대상에서 제외, 페이지 내 링크 수집<head>
<meta name="robots" content="noindex,follow">
</head> - 색인 대상에서 제외, 페이지 내 링크 미 수집<head>
<meta name="robots" content="noindex,nofollow">
</head>
검색로봇에 대하여 특별한 제약조건이 없다면 웹 페이지가 검색 결과에서 제외되지 않도록 로봇 메타 태그를 삭제하거나 아래와 같이 기본 설정인 index, follow로 설정하시는 것을 권장합니다.
<head>
<meta name="robots" content="index,follow">
</head>자세한 내용은 http://www.robotstxt.org를 참고하세요.
- 색인 대상으로 처리, 페이지 내 링크 미 수집
2. 콘텐츠
HTML 문서의 <head> 태그내에 있는 <title> 태그를 활용합니다
<head>
<title>페이지 제목</title>
</head>사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 합니다. 사이트의 개설 목적에 맞는 브랜드 키워드를 활용하는 것이 좋으며 상호명, 서비스명, 제품명 등의 고유명사를 사용하는 것을 권장합니다. 또한, 검색 노출만을 위하여 제목을 자주 변경하는 경우, 제목이 과도하게 길어서 사용자가 쉽게 사이트를 파악하지 못하는 경우는 검색 노출에 불이익을 받을 수 있습니다.
개별 페이지의 title 태그는 페이지의 콘텐츠 주제를 명확하게 설명할 수 있는 문구를 기입해야 합니다. 별도의 글자 수 제한은 없지만 검색 결과에서 표현이 가능한 수준으로 제목의 길이를 제한하여 작성해 주세요. 과도한 길이의 제목은 검색 사용자의 사용성을 저해할 수 있습니다. 2회 이상 반복적인 키워드, 스팸성 키워드, 콘텐츠와 연관이 없는 키워드가 나열되어 있는 경우 검색 노출에 불이익을 받을 수 있으니 유의하세요.
사이트 내의 모든 페이지를 동일한 제목으로 넣지 마세요. 페이지 콘텐츠에 맞는 고유한 제목을 기입해야 검색 사용자가 여러분의 콘텐츠를 찾을 가능성이 높아집니다.
검색 노출에 사용되는 제목은 검색엔진이 해당 페이지 내의 정보중 가장 적절한 것을 자동 추출하여 선택합니다. 그러므로 페이지 제목 태그와 더불어 아래의 오픈그래프 태그의 경우도 일관된 문구를 기입하는 것을 권장합니다.
HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다
<head>
<meta name="description" content="페이지 설명">
</head>페이지의 description 태그는 페이지의 콘텐츠에 대한 간략한 설명으로 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익을 받을 수 있습니다. 또한, 검색 노출만을 위하여 사이트 메인 페이지의 description 태그 내용을 자주 변경하거나 과도하게 길어서 사용자가 쉽게 사이트를 파악하지 못하는 경우도 검색 노출의 불이익 대상에 포함됩니다.
간혹 페이지 내의 전체 내용을 복사해서 붙여넣거나 키워드만 나열하는 경우가 있습니다. 이런 경우 검색 노출에 불이익을 받을 수 있으니 콘텐츠에 맞는 필요한 문구만을 간추려서 넣어주세요.
검색 노출에 사용되는 설명문은 검색엔진이 해당 페이지 내의 정보중 가장 적절한 것을 자동 추출하여 선택합니다. 그러므로 페이지 설명 태그와 더불어 아래의 오픈그래프 태그의 경우도 일관된 문구를 기입하는 것을 권장합니다.
HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다
<head>
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/myimage.jpg">
<meta property="og:url" content="http://www.mysite.com">
</head>오픈 그래프 태그는 사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보입니다. 사이트의 제목, 설명과 더불어서 사이트를 대표하는 이미지도 같이 넣어주세요. 자세한 내용은 http://ogp.me를 참고하세요.
HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다
<head>
...
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="http://www.mysite.com/article/article1_featured_image.jpg">
<meta property="og:url" content="http://www.mysite.com/article/article1.html">
...
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="http://www.mysite.com/article/article1.html">
<meta name="twitter:domain" content="사이트 명">
...
</head>페이지의 메타 정보에 소셜 미디어에서 제공하는 다양한 부가정보를 넣어주세요. 검색뿐만이 아니라 소셜 미디어 내에서 공유될 콘텐츠의 정보를 여러분 스스로 결정함으로써 사용자의 페이지 방문을 높일 수 있습니다.
3. 모바일 사용성
HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다
<head>
<meta name="viewport" content="width=device-width">
</head>반응형 웹은 웹 브라우저가 웹문서의 가로폭을 기기의 스크린 크기에 맞게 자동적으로 조절하는 기법입니다. 반응형 웹은 다양한 크기를 지원하는 모바일 환경에서 사용자가 페이지의 확대/축소 없이 여러분의 웹 콘텐츠를 보다 쉽게 소비할 수 있도록 도와줍니다.
HTML 문서의 <head> 태그내에 있는 <link> 태그를 활용합니다
여러분의 사이트가 동일한 콘텐츠에 대하여 데스크톱 사이트에 대응하는 별도의 모바일 사이트가 있다면 모바일 사이트의 페이지에 1:1로 대응되는 데스크톱 사이트의 URL을 명시적으로 지정하는 것을 권장합니다. 이 작업은 네이버의 검색로봇이 여러분의 데스크톱 및 모바일 사이트에 방문할 때 콘텐츠가 중복으로 처리되지 않도록 알려주는 역할을 합니다. 또한, 데스크톱 및 모바일 사이트 모두 웹마스터도구에 등록하여 네이버 검색로봇이 모바일 사이트의 존재를 알 수 있도록 처리해 주세요.
예를 들어 여러분이 데스크톱 사이트로 http://www.mysite.com이 있고 그와 대응하는 모바일 사이트인 http://m.mysite.com이 있다고 가정한다면 http://m.mysite.com 내의 페이지에 아래와 같이 데스크톱의 URL을 명시하는 것이 좋습니다.
모바일 사이트의 메인 페이지 - 예) http://m.mysite.com/
<head>
<link rel="canonical" href="http://www.mysite.com/">
</head>모바일 사이트의 개별 웹 페이지 - 예) http://m.mysite.com/article/article1.html
<head>
<link rel="canonical" href="http://www.mysite.com/article/article1.html">
</head>사이트 방문자의 웹 브라우저 환경에 맞게 자동 redirect 처리
모바일 기기에서 여러분의 데스크톱 사이트로 접근시 모바일 사이트로 redirect 처리해주세요. 마찬가지로 데스크톱에서 모바일 사이트로 접근시는 데스크톱 사이트로 redirect 처리하는 것도 고려해야 합니다. 모든 웹 브라우저는 자신만의 이름(User Agent Name)을 가지고 있으므로 기술적으로 사이트 방문자의 웹브라우저가 모바일 환경인지 데스크톱 환경인지 구분할 수 있습니다.
예를 들어 데스크톱에서 http://m.mysite.com/ 으로 접근시 http://www.mysite.com 으로 redirect 처리하며, 모바일 기기에서 http://www.mysite.com 에 접근시 http://m.mysite.com 으로 redirect 처리합니다.
사용자의 웹 브라우저 환경에 맞게 redirect 처리 시는 자바스크립트가 아닌 HTTP redirect를 사용해주시기 바랍니다. 네이버 검색로봇은 HTTP redirect는 감지하지만 자바스크립트 redirect는 경우에 따라서 감지를 못하는 경우가 있습니다. 만약, 기술적인 문제로 HTTP redirect 사용이 어렵다면 자바스크립트 redirect를 사용하시되 HTML 본문은 비워두는 것을 권장합니다.
HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다
<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>여러분의 웹 문서 콘텐츠가 모바일 앱으로도 제공이 가능하다면 앱 링크 정보를 넣어주세요. 앱 링크 기법은 여러분이 제공한 앱을 설치한 사용자가 웹 문서를 방문할 때 앱으로 연결이 가능하도록 도와줍니다. 자세한 내용은 http://applinks.org를 참고하세요.