SEO 요약 (Search Engine Optimization)

Posted on 2021-06-02 Edited on 2024-01-24 In programming , html Word count in article: 754 Reading time ≈ 3 mins.

SEO

검색엔진이 내가 작성한 문서들을 더 잘 이해하고 잘 가져가도록 하기 위함이다

title

<title> 은 검색엔진에서 제목으로 사용된다.

index title 작성방법

1	<title>Site/Company Name · Small keyword rich, catchy phrase · City, Country</title>

페이지별 작성방법

1	<title>Page Title · Site/Company Name</title>

유니크한 title 이 들어가야지 검색엔진이 인식합니다

meta description

사용예제

1	<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 you
rel="spouse" — When a link is about your partner
rel="friend" — When a link is about your friend
rel="external" — When a link points to another website
rel="enclosure" — When a link points to a download
rel="license" — When a link points to the license file
rel="nofollow" — When search engines should ignore the link for rankings

See more social relationships

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">

Open Graph Protocol
Twitter Card Documentation

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">

ICBM address
Geotagging

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:[email protected]" itemprop="email">[email protected]</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": "[email protected]",
    "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>

SEO