반응형
html 시작하기
네이버 서치어드바이저 : https://searchadvisor.naver.com/guide/markup-content
html 기본 구조
<!-- html5 문서라는 것을 알려줌 -->
<!DOCTYPE html>
<!-- html 문서의 시작 -->
<html>
<!-- html 문서의 설정 -->
<head>
<!-- 문자 인코딩 설정 -->
<meta charset="utf-8" />
<!-- 문서의 제목 -->
<title>HTML 기본 구조</title>
<!-- 문서의 설명 -->
<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>
<!-- html 문서의 본문 -->
<body>
<!-- 제목 -->
<h1>HTML 기본 구조</h1>
<!-- 본문 -->
<p>HTML 기본 구조를 알아봅시다.</p>
</body>
</html>head 태그 - 검색 엔진 최적화, 페이지 정보
문자 인코딩
meta charset="utf-8"- 한글을 사용하기 위해서는 반드시 필요한 설정
- utf-8은 한글 외에도 다양한 언어를 지원하는 문자 인코딩 방식
title 태그 - 문서의 제목
사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 한다.
페이지 제목 작성 TIP
- 사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 합니다. 사이트의 개설 목적에 맞는 브랜드 키워드를 활용하는 것이 좋으며 상호명, 서비스명, 제품명 등의 고유명사를 사용하는 것을 권장합니다. 또한, 검색 노출만을 위하여 제목을 자주 변경하는 경우, 제목이 과도하게 길어서 사용자가 쉽게 사이트를 파악하지 못하는 경우는 검색 노출에 불이익을 받을 수 있습니다.
- 개별 페이지의 title 태그는 페이지의 콘텐츠 주제를 명확하게 설명할 수 있는 문구를 기입해야 합니다. 별도의 글자 수 제한은 없지만 검색 결과에서 표현이 가능한 수준으로 제목의 길이를 제한하여 작성해 주세요. 과도한 길이의 제목은 검색 사용자의 사용성을 저해할 수 있습니다. 2회 이상 반복적인 키워드, 스팸성 키워드, 콘텐츠와 연관이 없는 키워드가 나열되어 있는 경우 검색 노출에 불이익을 받을 수 있으니 유의하세요.
- 사이트 내의 모든 페이지를 동일한 제목으로 넣지 마세요. 페이지 콘텐츠에 맞는 고유한 제목을 기입해야 검색 사용자가 여러분의 콘텐츠를 찾을 가능성이 높아집니다.
- 검색 노출에 사용되는 제목은 검색엔진이 해당 페이지 내의 정보중 가장 적절한 것을 자동 추출하여 선택합니다. 그러므로 페이지 제목 태그와 더불어 아래의 오픈그래프 태그의 경우도 일관된 문구를 기입하는 것을 권장합니다.
페이지 설명
meta 태그는 문서의 정보를 나타내는 태그로 빈 태그로서 시작 태그만 존재하고 head 태그 내부에 작성한다.
<head>
<meta name="description" content="페이지 설명" />
</head>페이지 설명문 작성 TIP
- 페이지의 description 태그는 페이지의 콘텐츠에 대한 간략한 설명으로 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익을 받을 수 있습니다. 또한, 검색 노출만을 위하여 사이트 메인 페이지의 description 태그 내용을 자주 변경하거나 과도하게 길어서 사용자가 쉽게 사이트를 파악하지 못하는 경우도 검색 노출의 불이익 대상에 포함됩니다.
- 간혹 페이지 내의 전체 내용을 복사해서 붙여넣거나 키워드만 나열하는 경우가 있습니다. 이런 경우 검색 노출에 불이익을 받을 수 있으니 콘텐츠에 맞는 필요한 문구만을 간추려서 넣어주세요.
- 검색 노출에 사용되는 설명문은 검색엔진이 해당 페이지 내의 정보중 가장 적절한 것을 자동 추출하여 선택합니다. 그러므로 페이지 설명 태그와 더불어 아래의 오픈그래프 태그의 경우도 일관된 문구를 기입하는 것을 권장합니다.
오픈 그래프 태그 - SNS 공유 시 노출되는 정보
오픈 그래프 태그는 SNS 공유 시 노출되는 정보를 설정하는 태그
- 사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보이다.
- 사이트의 제목, 설명과 더불어서 사이트를 대표하는 이미지도 같이 넣어주는 것이 좋다.
- http://ogp.me 참고
<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>body 태그 - 본문
body 태그는 문서의 본문을 나타내는 태그
- 제목, 본문, 이미지, 링크 등의 정보를 담는다.
- body 태그 내부에는 다양한 태그를 사용할 수 있다.
<body>
<!-- 제목 -->
<h1>HTML 기본 구조</h1>
<!-- 본문 -->
<p>HTML 기본 구조를 알아봅시다.</p>
</body>반응형
'Publishing > HTML' 카테고리의 다른 글
| 이미지와 하이퍼링크 - html 배우기 (0) | 2023.11.18 |
|---|---|
| 텍스트 관련 태그 - html 배우기 (0) | 2023.11.18 |
| html include/import (0) | 2023.07.24 |
| 사이트 기본 setting (0) | 2020.08.11 |
| Event Page 코딩하기 (0) | 2020.08.04 |