SEO
검색엔진이 내가 작성한 문서들을 더 잘 이해하고 잘 가져가도록 하기 위한 행위입니다.
인터넷에서 검색이 잘 되기 위한 목적으로 글을 작성하는 것이기에
웹사이트 관리자의 의도대로 검색엔진이 잘 이해하고 크롤링을 해갈 수 있게
문서를 작성해줘야 합니다
title
<title>
은 검색엔진에서 제목으로 사용된다.
index title 작성방법
<title>Site/Company Name · Small keyword rich, catchy phrase · City, Country</title>
페이지별 작성방법
<title>Page Title · Site/Company Name</title>
유니크한 title 이 들어가야지 검색엔진이 인식합니다
meta description
사용예제
<meta name="description" content="A short sentence describing the purpose and content of this individual page.">
페이지별로 유니크해야 합니다
Max 80자 이내가 좋습니다. (네이버 검색엔진이 max 80 자를 요구함)
그밖에 중요사항
<h1>
은 한페이지에 1개 이어야 합니다. 중복되면 검색엔진이 싫어합니다<a>
(internal & outbound) 링크 태그는 a 태그를 사용하세요<img alt="" width="" height="">
이미지는 alt, width, height 가 있는 것을 검색엔진이 요구합니다.<strong>
,<em>
- Page responsiveness 모바일 반응형도 검색엔진이 확인합니다
- Page speed 페이지 스피드를 검사해서 개선하세요
- HTTPS 보안 포트 사용하세요
- 정기적인 업데이트가 되어야 검색엔진이 indexing 을 해갑니다.
- Domain & URLs
링크내 관계
<a>
태그 내에 rel
속성을 이용해서 관계를 표시하는데
대부분 검색엔진에서 제외를 하기 위해서
rel="nofollow"
— When search engines should ignore the link for rankings
를 많이 사용합니다.
나머지는 이런게 있다는 참고만 하세요
rel="me"
— When a link is about yourel="spouse"
— When a link is about your partnerrel="friend"
— When a link is about your friendrel="external"
— When a link points to another websiterel="enclosure"
— When a link points to a downloadrel="license"
— When a link points to the license filerel="nofollow"
— When search engines should ignore the link for rankings
SNS 관련된 metadata
Open Graph
Facebook, Instagram, Pinterest, LinkedIn 같은 곳에서 사용하는 태그 입니다.<head>
태그 하위로 추가합니다.
<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="Title of this page, same as title tag">
<meta property="og:url" content="http://fullurl.com/to-this/page/">
<meta property="og:image" content="http://fullurl.com/to-this/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page, same as meta description">
Twitter Cards<head>
태그 하위로 추가합니다.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:title" content="Title of this page, same as title tag">
<meta name="twitter:url" content="http://fullurl.com/to-this/page/">
<meta name="twitter:description" content="Description of this page, same as meta description">
<meta name="twitter:image" content="http://fullurl.com/to-this/image.jpg">
Geotagging & location data
위치 기반 서비스할 때 사용하는 meta 입니다
<meta name="ICBM" content="45.416667,-75.7">
<meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">
Metadata
There are many different Schema.org formats: use Microdata to embed with HTML & JSON-LD for separate details
HTML 방식으로 추가
<div itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Sir John A. Macdonald</h1>
<span itemprop="jobTitle">Prime Minister of Canada</span>
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">24 Sussex Dr.</span>
<br>
<span itemprop="addressLocality">Ottawa</span>,
<span itemprop="addressRegion">ON</span>,
<span itemprop="addressCountry">Canada</span>
<br>
<span itemprop="postalCode">K1A 0A3</span>
</p>
<dl>
<dt>E-mail:</dt>
<dd><a href="mailto:primeminister@canada.ca" itemprop="email">primeminister@canada.ca</a></dd>
<dt>Tel:</dt>
<dd><a href="tel:+16139416900" itemprop="telephone">613-941-6900</a></dd>
<dt>Website:</dt>
<dd><a href="http://canada.ca/" itemprop="url">http://canada.ca/</a></dd>
</dl>
</div>
JSON-LD Person
<script type="application/jd+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Sir John A. Macdonald",
"jobTitle": "Prime Minister of Canada",
"address": {
"@type": "PostalAddress",
"streetAddress": "24 Sussex Dr.",
"addressLocality": "Ottawa",
"addressRegion": "ON",
"addressCountry": "CA",
"postalCode": "K1A 0A3"
},
"email": "primeminister@canada.ca",
"tel": "+16139416900",
"website": "http://canada.ca/"
"sameAs": [
"https://www.facebook.com/sir_john_a_macdonald",
"https://www.youtube.com/channel/sir_john_a_macdonald"
"https://www.instagram.com/sir_john_a_macdonald/",
"https://twitter.com/sir_john_a_macdonald",
]
}
</script>
JSON-LD CreativeWork
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CreativeWork",
"name": "Branding for Dino ’R’ Us",
"author": {
"@type": "Person",
"name": "Thomas J Bradley"
},
"image": "https://thomasjbradley.ca/images/dinos-r-us-logo.jpg",
"url": "https://thomasjbradley.ca/dino-r-us/",
"dateCreated": "2017-11-23",
"description": "A massive rebrand for the Dinos ’R’ Us company.",
"keywords": "dinosaurs, graphic, design, brand, logo"
}
</script>
그밖의 파일들
robots.txt
검색엔진이 검색할 수 있도록 허용여부를 작성하는 파일
User-Agent : 검색엔진 명시
allow, Disallow 로 대상 페이지 지정
# www.robotstxt.org
Sitemap: http://thomasjbradley.ca/sitemap.xml
User-Agent: *
Disallow:
sitemap.xml
페이지들이 언제 업데이트 되는지 중요도는 어떤지 작성해두면 검색엔진이 참고해서 indexing 한다고 함
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://thomasjbradley.ca/</loc>
<lastmod>2058-11-23</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
'IT > HTML' 카테고리의 다른 글
CSS Cheatsheet (0) | 2022.06.28 |
---|---|
언어코드 (Language Code) (0) | 2022.06.28 |
국가코드 (Country Code) (0) | 2022.06.28 |
색상명 (Color Names) (0) | 2022.06.27 |
하이퍼링크(Hyperlink) 작성법 (0) | 2022.06.27 |
HTML TEXT 작성법 (0) | 2022.06.27 |
HTML HEAD 작성법 (0) | 2022.06.27 |
HTML 주요태그 (0) | 2022.06.27 |