익스프레스엔진(xpressengine) 에는 자체적으로도 기능이 설정이 되어있고 SEO모듈을 통해 더 자세하게 메타태그 정보가 표현될수있도록 도와주고 있습니다.
게다가 통합적으로 한가지 내용만 나오는것이 아니라 게시물마다 제목과 글내용으로 메타태그를 정리해서 표현해주니 잘만 활용하면 방문자를 늘리는데 크게 도움이 될것이라 생각이 됩니다.
워드프레스는 기본적으로는 지원이 안되더군요. 플러그인을 찾아보면 구현될수있도록 하는게 있을지도 모르겠네요. (대충 검색해보니 나옵니다.)
요즘 대부분의 블로그들은 기본적으로 소속되어있는 포털에 포함시키기위해 다양하고 자세한 메타태그가 자동으로 삽입되게 되어있거나
없어도 자체적으로 쉽게 발행이 되도록 편리한 기능이 있으니 별로 신경안쓰셔도 되지만
자신이 집적 구축한 웹사이트에는 일일이 설정해주어야합니다.
사용자들이 더 직관적으로 정보를 확인하고 열람할수있도록 해주는 중요한 작업이며
동시에 검색엔진에 더 쉽게 상위로 올라올수 있게 도와주는 꼭 필요한 작업이 되겠습니다.
물론 그보다 우선적으로 중요한건 컨텐츠의 질이겠지만요.
아래의 내용중에 필요한 정보를
<head> </head>
사이에 넣어주시면 됩니다.
1. 사이트 홈
- 사이트 제목
< title>사이트 이름</title>
< /head>
사이트 홈의 title 태그는 사이트를 대표하는 브랜드명으로 볼 수 있습니다. 사이트의 개설 목적에 맞는 브랜드 키워드를 활용하는 것이 좋으며 상명, 서비스명, 제품명 등의 고유명사를 사용하는 것을 권장합니다.
사이트 설명
< meta name="description" content="사이트 설명">
< /head>
사이트 홈의 description 태그는 사이트의 브랜드에 대한 간략한 설명으로 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익일 받을 수 있으니 유의하세요.
오픈 그래프
< 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를 참고하세요.
og:image 에는 아래처럼 가로 세로 이미지 크기를 지정해 줄 수도 있습니다.
<meta property="og:image:width" content="140" />
< meta property="og:image:height" content="140" />
2. 개별 페이지
- 페이지 제목
< title>페이지 제목</title>
< /head>
페이지의 title 태그는 페이지의 콘텐츠 주제를 정확하게 설명할 수 있는 문구를 적어야 합니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 콘텐츠와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익일 받을 수 있으니 유의하세요.
사이트 내의 모든 페이지를 동일한 title 로 넣지 마세요. 페이지 콘텐츠에 맞는 고유한 title 태그를 사용해야 사용자가 검색을 통해서 여러분의 콘텐츠를 찾을 가능성이 높아집니다.
페이지 설명
< meta name="description" content="콘텐츠 설명">
< /head>
페이지의 description 태그는 페이지의 콘텐츠에 대한 간략한 설명입니다. 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익일 받을 수 있으니 유의하세요.
간혹 페이지 내의 전체 내용을 복사해서 붙여넣거나 키워드만 나열하는 경우가 있습니다. 이런 경우 검색 노출에 불이익을 받을 수 있으니 콘텐츠에 맞는 필요한 문구만을 간추려서 넣어주세요.
소셜 미디어
...
< 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
< 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?type=1&code=a
http://mysitem.com/article/article1.html?type=2&code=b
3. 모바일 사용성
- 반응형 웹
< meta name="viewport" content="width=device-width">
< /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를 참고하세요.
그 외, 작성일, 수정일, 저작자등등 더 많은것들을 표기해주는것들이 있는데 그렇게 꼭 필요한것도 아니고 귀찮으니 생략하셔도 됩니다.
참고링크
네이버 웹마스터 도구
'유틸리티, 정보 > WEB TIP' 카테고리의 다른 글
| 웹디자인을 위한 빈티지 페이퍼, 구겨진종이 템플릿 180여개 (0) | 2016.04.06 |
|---|---|
| 반응형 웹페이지로 디자인하는 간단한 팁 (0) | 2016.04.02 |
| 마우스 커서를 지정 변경시켜주는 태그 (0) | 2016.04.01 |
| 웹에서 간단하게 이미지를 아이콘으로 ico 파일로 만들기 (0) | 2016.03.30 |
| 웹에서 간단히 CSS,JS코드 압축하는 CSS JS Online CSS Minifier/Compressor 사이트 (0) | 2016.03.13 |
| Google Tag Assistant를 사용하여 구글 에널리틱스(google analytics)가 제대로 설정되는지 확인하기 (0) | 2016.03.12 |
| 티스토리 초대장이 9장 있습니다. 혹시 필요하신분 있으시면 댓글을 남겨주세요. (10) | 2016.03.11 |
| 구글검색에서 원치않는 페이지 노출 색인 삭제하는 방법 (0) | 2016.03.11 |
| 구글 애드센스 콘텐츠 불충분 승인을 위한 자세한 방법 (22) | 2016.03.03 |