본문 바로가기
IT/HTML

SEO(Search Engine Optimization) 요약

by DOSGamer 2022. 6. 27.
반응형

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

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

관련글

티스토리툴바