글 작성자: 써니루루

 * 본 게시글은 NAVER 웹마스터도구 도움말 – 검색엔진 최적화 HTML 마크업 가이드 문서를 참고했습니다.

참고 주소: http://webmastertool.naver.com/guide/basic_markup.naver#chapter1.3

 

검색엔진 최적화 HTML 마크업 가이드

 

1. 사이트 홈

 

사이트 제목

HTML 문서의 <head> 태그내에 있는 <title> 태그를 활용합니다

<head>

<title>사이트 이름</title>

</head>

사이트 홈의 title 태그는 사이트를 대표하는 브랜드명으로 볼 수 있습니다. 사이트의 개설 목적에 맞는 브랜드 키워드를 활용하는 것이 좋으며 상명, 서비스명, 제품명 등의 고유명사를 사용하는 것을 권장합니다.

 

사이트 설명

HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다

<head>

<meta name="description" content="사이트 설명">

</head>

사이트 홈의 description 태그는 사이트의 브랜드에 대한 간략한 설명으로 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익일 받을 수 있으니 유의하세요.

 

오픈 그래프

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://mysite.com/myimage.jpg">

<meta property="og:url" content="http://mysite.com">

</head>

사이트 홈의 오픈 그래프 태그는 사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보입니다. 사이트의 제목, 설명과 더불어서 사이트를 대표하는 이미지도 같이 넣어주세요. 자세한 내용은 http://ogp.me를 참고하세요.

 

2. 개별 페이지

 

페이지 제목

HTML 문서의 <head> 태그 내에 있는 <title> 태그를 활용합니다

<head>

<title>페이지 제목</title>

</head>

페이지의 title 태그는 페이지의 콘텐츠 주제를 정확하게 설명할 수 있는 문구를 적어야 합니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 콘텐츠와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익일 받을 수 있으니 유의하세요.

사이트 내의 모든 페이지를 동일한 title 로 넣지 마세요. 페이지 콘텐츠에 맞는 고유한 title 태그를 사용해야 사용자가 검색을 통해서 여러분의 콘텐츠를 찾을 가능성이 높아집니다.

 

페이지 설명

HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다

<head>

<meta name="description" content="콘텐츠 설명">

</head>

페이지의 description 태그는 페이지의 콘텐츠에 대한 간략한 설명입니다. 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익일 받을 수 있으니 유의하세요.

간혹 페이지 내의 전체 내용을 복사해서 붙여넣거나 키워드만 나열하는 경우가 있습니다. 이런 경우 검색 노출에 불이익을 받을 수 있으니 콘텐츠에 맞는 필요한 문구만을 간추려서 넣어주세요.

 

소셜 미디어

HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다

<head>

...

<meta property="og:type" content="article">

<meta property="og:title" content="페이지 제목">

<meta property="og:description" content="페이지 설명">

<meta property="og:image" content="http://mysite.com/article/article1_featured_image.jpg">

<meta property="og:url" content="http://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://mysite.com/article/article1.html">

<meta name="twitter:domain" content="사이트 명">

...

</head>

페이지의 메타 정보에 소셜 미디어에서 제공하는 다양한 부가정보를 넣어주세요. 검색뿐만이 아니라 소셜 미디어 내에서 공유될 콘텐츠의 정보를 여러분 스스로 결정함으로써 사용자의 페이지 방문을 높일 수 있습니다.

 

선호 URL

HTML 문서의 <head> 태그내에 있는 <link> 태그를 활용합니다

<head>

<link rel="canonical" href="http://mysite.com/article/article1.html">

</head>

동일 콘텐츠를 여러 개의 URL로 표현이 가능할 경우 가장 선호되는 대표 URL을 지정합니다. 예를 들어 아래 세 개의 url이 동일한 페이지를 보여준다면, 선호 URL을 http://mysitem.com/article/article1.html 로 지정하는 것이 좋습니다.

http://mysitem.com/article/article1.html

http://mysitem.com/article/article1.html?type=1&code=a

http://mysitem.com/article/article1.html?type=2&code=b

 

3. 모바일 사용성

 

반응형 웹

HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다

<head>

<meta name="viewport" content="width=device-width">

</head>

반응형 웹은 웹 브라우저가 웹문서의 가로폭을 기기의 스크린 크기에 맞게 자동적으로 조절하는 기법입니다. 반응형 웹은 다양한 크기를 지원하는 모바일 환경에서 사용자가 페이지의 확대/축소 없이 여러분의 웹 콘텐츠를 보다 쉽게 소비할 수 있도록 도와줍니다.

 

모바일 앱 연결

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를 참고하세요.

 

 

 

저작자표시 비영리 변경금지

티스토리툴바