글을 쓴다는 것은 참 힘든 일이다. 배워야 할 일이 너무나 많기 때문이다. 어렵게 시간을 할애하고 정성을 다하여 작성한 글이지만 글이 검색 노출이 안되면 소용이 없어 실망하게 되니까 설정해야 하는 HTML 콘텐츠 마크업 Content Markup도 기본적으로 알아야 한다.
사이트 페이지 제목 페이지 설명의 작성 및 팁과 오픈그래프 태그에 대한 콘텐츠 마크업 Content Markup에 대하여 정리하였다.
1. 페이지 제목 title 은 HTML문서의 head 태그 내 title 태그를 활용한다.
<head>
<title> 페이지 제목 </title>
</head>
메인 페이지 타이틀 태그는 사이트 목적에 맞고 사이트 성격을 잘 나타내는 상호, 서비스, 제품과 같은 고유 명사의 키워드를 사용하는 것이 좋다.
개별 페이지 타이틀 태그는 콘텐츠 주제를 명확하게 설명할 수 있는 문구를 기입하되 검색 사용자의 사용성이 저해되지 않도록 검색 결과에 표현 가능한 수준의 제목 길이가 좋다고 하고 있다.
→ 검색 노출 불이익 대상
- 제목을 자주 변경하는 경우
- 제목이 과도하게 길어서 사용자가 쉽게 파악하지 못하는 경우
- 2회 이상 반복적인 키워드
- 스팸성 키워드
- 콘텐츠와 연관이 없는 키워드가 나열되어 있는 경우
모든 페이지는 콘텐츠에 맞는 동일제목의 중복 없이 고유 제목을 기입해야 검색 사용자가 콘텐츠를 찾을 가능성이 높아질 것이며 검색노출에 사용되는 제목은 검색엔진이 해당 페이지 내 가장 적절한 것을 자동추출 선택하므로 페이지 제목 태그와 오픈그래프 태그도 일관된 문구 기입이 권장되고 있다.
2. 페이지 설명 description 은 HTML문서의 head태그 내 meta 태그를 활용한다.
<head>
<meta name="description" content="페이지 설명">
</head>
페이지의 description 태그는 페이지의 콘텐츠에 대한 간략한 설명으로 1-2개의 문장으로 콘텐츠에 맞는 필요한 문구만을 간추려서 구성된 짧은 단락을 사용할 것을 요구하고 있다..
→ 검색 노출 불이익 대상
- 검색 노출만을 위해 메인 페이지의 description 태그 내용 자주 변경
- 설명문이 과도하게 길어서 사용자가 쉽게 사이트를 파악하지 못하는 경우
- 2회 이상 반복적인 키워드
- 스팸성 키워드 :
- 사이트와 연관이 없는 키워드가 있는 경우
- 페이지 내의 전체 내용을 복사해서 붙여 넣거나 키워드만 나열하는 경우
검색노출에 사용되는 설명문은 검색 엔진이 페이지 내 가장 적절한 정보를 자동 추출하여 선택하므로 페이지 설명 태그와 오픈 그래프 태그도 일관된 문구 기입을 권장하고 있다.
3. 오픈 그래프 open graph 은 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.xxxxxx.com/myimage.jpg">
<meta property="og:url" content="http://www.xxxxxx.com">
</head>
사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보로서 사이트제목 설명 사이트 대표 이미지를 넣으라고 하고 있다. 보다 자세한 내용은 http://ogp.me 에서 참고할 수 있을 것이다.
4. 소셜 미디어는 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.xxxxxx.com/article/articlel_featured_image.jpg">
<meta property="og:url" content="http://www.xxxxxx.com/article/articlel.html">
.............
<meta name="band:card" content="summary">
<meta name="band:title" content="페이지 제목">
<meta name="band:description" content="페이지 설명">
<meta name="band:image" content="http://www.xxxxxx.com/article/articlel.html">
<meta name="band:domain" content="사이트명">
</head>
소셜미디어에서 제공하는 다양한 부가 정보를 넣는 것으로 검색이나 소셜미디어 내 공유될 콘텐츠 정보를 스스로 결정함으로써 사용자의 페이지 방문을 높일 수 있다고 한다.
이상 참조한곳 [https://searchadvisor.naver.com/guide/markup-content]
블로그에 오픈그래프 타이프와 이미지를 생략하고 적용한 예이다.
티스토리를 운용 중이라면 오픈그래프 적용을 위해서는 관리페이지의 블로그 관리홈 메뉴의 꾸미기 스킨 편집으로 들어가서 상단 html편집을 크릭 하여 html적용을 하면 된다.
<! doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale-1.0, minimum-scale=1.0, width=device-width">
<!-- type와 image생략 -->
<meta property="og:title" content="you can do it">
<meta property="og:description" content="무작정이야 배워야 할 일이 너무나 많아">
<meta property="og:url" content="https://글쓰기 힘들다. com">
<title> article </title>
</head>
<body>
........
em : <em> 글자의 특정 부분을 강조 </em>
i : <i> 단순 기울어진 것을 나타냄 </i>
u : <u> 밑줄 </u>
ins : <ins> 새롭게 추가함을 의미 </ins>
del : <del> 삭제함을 의미 </del>
s : <s> 중간선 </s>
b : <b> 텍스트를 굵게 표현 </b>
strong : <strong> 중요하다는 의미 </strong>
.......
<!--article는 특정 부분을 그룹화할 때 사용-->
<article>
<h1> 무작정이야 배워야 할 일이 너무나 많아 </h1>
<h3> 글쓰기 힘들지만 열심히 </h3>
</article>
........
</body>
</html>
'IT' 카테고리의 다른 글
| 드론 자격증 4종 시험 항공안전법 (0) | 2023.02.14 |
|---|---|
| 드론 자격증 4종 취득 나도 드론 조종사 (0) | 2023.02.13 |
| Open Graph 제목 설명이 없습니다. (0) | 2022.12.28 |
| 실패한 크롤링 서버 오류 수정 (0) | 2022.11.30 |
| 핸드폰 잠금 자동 해제 갤럭시 노트 10 스마트락 (0) | 2022.10.26 |
댓글