SEO란

SEO란 updated_at: 2024-03-19 17:50

메타 태그(Meta Tag)

`<`title`>`

타이틀 태그는 웹페이지를 검색 엔진에 검색했을 때 노출되는 제목으로 이해할 수 있습니다. 타이틀 태그는 단순히 검색 결과에만 노출되는 것이 아니라, 브라우저 탭 상에도 노출되므로 중요도가 높습니다.

title 요소를 정의할 때는 너무 긴 텍스트를 사용하거나 모든 웹페이지의 title에 단일한 제목을 사용하지 않도록 유의해야 합니다.

<title>즐거움이 가득한 곳, 온스토리</title>

`<`keywords`>`

타이틀 태그 다음으로 중요한 것이 바로 <keywords> 태그입니다. 키워드 태그는 현재 페이지를 가장 잘 표현할 수 있는 키워드로 나열합니다. 나열은 ',' 를 사용합니다.

<meta name="keywords" content="meta, tag, seo, funny, 검색앤진 최적화">

`<`description`>`

메타 디스크립션(Meta Description)이라고도 부르는데, 해당 웹페이지의 설명을 요약한 한 두 줄의 문장을 뜻합니다. 대부분의 유저는 메타 디스크립션을 보고 해당 웹페이지에 자신이 찾고 있던 정보가 담겨있는지 아닌지를 판단합니다. 따라서 읽는 입장에서 최대한 잘 읽히는 문장으로 작성하는 것이 좋습니다. 또한 되도록 페이지별 메타 디스크립션은 반복적이지 않은, 다른 내용의 키워드로 작성되는 편이 좋습니다.

<meta name="description" content="인터넷의 유용한 정보는 이곳에 다 있습니다. 정보를 누려라, 재미를 누려라">

title, keywords, description은 웹페이지를 검색엔진에 알리는데 매우 중요한 역활을 함으로 이 3개는 반드시 표시해두어야 한다.

`<`robots`>`

참조 문서 : https://developers.google.com/search/docs/advanced/robots/robots_meta_tag?hl=ko 메타 태그 중 로봇 태그는 웹페이지 별 검색 로봇의 접근 여부를 설정할 때 활용할 수 있는 태그입니다. 일반적으로 각 검색 엔진에는 웹페이지를 크롤링하는 검색로봇이 있습니다. 여기서 크롤링의 의미는, 검색 로봇들이 내 웹페이지를 돌아다니며 데이터를 수집하는 행위를 뜻합니다. 일반적으로 검색 결과에 노출되는 콘텐츠들은 크롤링 과정과 색인(indexing, 크롤링한 데이터를 기반으로 검색 결과에 표시될 수 있도록 하는 것)을 거칩니다.

이때 ‘로봇 태그의 속성을 어떻게 정의하느냐’에 따라, 이 검색 로봇이 웹페이지를 크롤링하고 색인할 수 있는 권한을 받거나 받지 못할 수 있습니다.

<meta name="robots" content="noodp">

로봇이 해당 페이지를 검색결과에 표시하지 않도록 지시

<meta name="robots" content="noindex">

특정 로봇에 대해 검색결과에 표시하지 않도록 지시

<meta name="AdsBot-Google" content="noindex">
<meta name="googlebot" content="noindex">

`<`canonical`>`

캐노니컬태그는 여러 URL을 가진 웹페이지가 있을 때, 해당 페이지의 대표 URL을 설정할 수 있는 태그입니다. 한 페이지의 대표되는 URL을 지정함으로써, 검색 로봇이 웹페이지를 크롤링할 때 중복 URL로 인한 페널티가 적용되게 하지 않게끔 도와주는 역할을 합니다. 각 페이지 별 다른 정보를 담고 있는 경우에는 캐노니컬 태그를 적용하면 안 됩니다.

예를 들어 구글은 다른 URL을 가지고 있는 웹페이지가 같은 내용을 담고 있는 경우, 이를 어뷰징 행위로 보고 페널티를 부과합니다. 그렇게 페널티를 받으면 웹페이지의 색인이 불가능해지거나 저품질 콘텐츠로 평가받을 위험이 커집니다. 일반적으로는 앞과 같은 불상사를 방지하기 위해 캐노니컬 태그를 활용하게 됩니다.

<link rel="canonical" href="https://onstory.fun/document.html"/>

오픈 그래프(Open Graph)

검색엔진 최적화에서 빠질 수 없는 것이 오픈그래프(OG) 태그입니다.

오픈 그래프 태그는 웹페이지의 링크가 SNS에서 공유될 때 어떻게 노출될지를 정의해 주는 역할을 합니다. 단순히 SNS에 효과적으로 공유될 수 있게 하는 목적뿐만 아니라, 검색엔진 최적화 과정에서 해당 웹페이지가 SNS에서 얼마나 공유되고 있는지(혹은 얼마만큼의 트래픽이 일어나고 있는지) 판단하는 기준이 되어 검색 상위 노출을 위한 품질 평가에도 영향을 주기 때문에 중요한 역할을 한다고 볼 수 있습니다.

필수 og 태그

<!-- 필수는 og 태그 -->
<meta property="og:type" content="website"> <!-- 웹페이지 유형 -->
<meta property="og:url" content="..."> <!-- 웹페이지 주소 -->
<meta property="og:title" content="Content Title">  <!-- 웹페이지 제목 -->
<meta property="og:image" content="..."> <!--  웹페이지 카드에 나타나는 썸네일 (주로 권장되는 사이즈는 1200x630입니다.) -->
<meta property="og:description" content="Description Here"> <!-- 웹페이지 상세 설명 -->
<meta property="og:site_name" content="..."> <!-- site name -->
<meta property="og:locale" content="en_US"> <!-- ko_KR -->
 
<!-- 필수는 아니지만, 추천하는 og 태그 -->
<meta property="og:image:width" content="1200"> <!--  웹페이지 카드에 나타나는 썸네일 (주로 권장되는 사이즈는 1200x630입니다.) -->
<meta property="og:image:height" content="630"> <!--  웹페이지 카드에 나타나는 썸네일 (주로 권장되는 사이즈는 1200x630입니다.) -->

트위터 미리보기 설정

카카오톡이나 네이버 블로그의 경우 위의 필수 og 태그를 사용하지만 트위터는 아래와 같이 별도로 사용한다.

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" /> <!-- summary -->
<meta name="twitter:title" content="콘텐츠 제목" /> 
<meta name="twitter:description" content="웹페이지 설명" /> 
<meta name="twitter:image" content="표시되는 이미지 " />

// 기타 트위터 관련
<meta name="twitter:card" content="" />
<meta name="twitter:site" content="@" />
<meta name="twitter:url" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:app:name:iphone" content="" />
<meta name="twitter:app:id:iphone" content="" />
<meta name="twitter:app:name:ipad" content="" />
<meta name="twitter:app:id:ipad" content="" />
<meta name="twitter:app:url:iphone" content="" />
<meta name="twitter:app:url:ipad" content="s" />
<meta name="twitter:app:name:googleplay" content="" />
<meta name="twitter:app:id:googleplay" content="" />
<meta name="twitter:app:url:googleplay" content="" />
<meta name="twitter:player" content="" />
<meta name="twitter:player:width" content="" />
<meta name="twitter:player:height" content="" />

모바일 미리보기 설정

모바일 앱이 존재하는 경우 앱으로 연결 시 노출 (현재 컨텐츠가 앱에도 존재할 경우 앱으로의 경로를 적어준다.)

<--iOS-->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" /> 
<meta property="al:ios:app_name" content="ios 앱 이름" /> 
 
<--Android-->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="YouTube" /> <!-- 안드로이드 앱 이름 -->
<meta property="al:android:package" content="com.google.android.youtube" /> <!-- 안드로이드 패키지 이름 -->
<meta property="al:web:url" content="안드로이드 앱 URL" />

<!--Web -->
<meta property="al:web:url" content="" />

동영상 관련

<meta property="og:type" content="video.other" />
<meta property="og:video:url" content="" />
<meta property="og:video:secure_url" content="" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="" />
<meta property="og:video:height" content="" />
<meta property="og:video:tag" content="온스토리" /> <!-- 태그는 여러개를 사용 -->
<meta property="og:video:tag" content="onstory" />

기타 메타테그

<meta name="theme-color" content="rgba(255, 255, 255, 0.98)" />
<meta property="fb:app_id" content="87741124305" />

스키마 마크업 (Schema Markup)

참조 : https://schema.org

Article 예제

참조 : https://schema.org/Article

Validator

참조 : https://validator.schema.org/
참조 : https://search.google.com/test/rich-results

인코딩 방식 방식

Microdata

<div itemscope itemtype="https://schema.org/Article">
  <span itemprop="name">How to Tie a Reef Knot</span>
  by <span itemprop="author">John Doe</span>
  This article has been tweeted 1203 times and contains 78 user comments.
  <div itemprop="interactionStatistic" itemscope itemtype="https://schema.org/InteractionCounter">
    <div itemprop="interactionService" itemscope itemid="http://www.twitter.com" itemtype="https://schema.org/WebSite">
      <meta itemprop="name" content="Twitter" />
    </div>
    <meta itemprop="interactionType" content="https://schema.org/ShareAction"/>
    <meta itemprop="userInteractionCount" content="1203" />
  </div>
  <div itemprop="interactionStatistic" itemscope itemtype="https://schema.org/InteractionCounter">
    <meta itemprop="interactionType" content="https://schema.org/CommentAction"/>
    <meta itemprop="userInteractionCount" content="78" />
  </div>
</div>

RDFa

<div vocab="https://schema.org/" typeof="Article">
  <span property="name">How to Tie a Reef Knot</span>
  by <span property="author">John Doe</span>
  This article has been tweeted 1203 times and contains 78 user comments.
  <div property="interactionStatistic" typeof="InteractionCounter">
    <div property="interactionService" typeof="WebSite">
      <meta property="url" content="http://www.twitter.com"/>
      <meta property="name" content="Twitter" />
    </div>
    <meta property="interactionType" content="https://schema.org/ShareAction"/>
    <meta property="userInteractionCount" content="1203" />
  </div>
  <div property="interactionStatistic" typeof="InteractionCounter">
    <meta property="interactionType" content="https://schema.org/CommentAction"/>
    <meta property="userInteractionCount" content="78" />
  </div>
</div>

JSON-LD

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "author": "John Doe",
  "interactionStatistic": [
    {
      "@type": "InteractionCounter",
      "interactionService": {
        "@type": "WebSite",
        "name": "Twitter",
        "url": "http://www.twitter.com"
      },
      "interactionType": "https://schema.org/ShareAction",
      "userInteractionCount": "1203"
    },
    {
      "@type": "InteractionCounter",
      "interactionType": "https://schema.org/CommentAction",
      "userInteractionCount": "78"
    }
  ],
  "name": "How to Tie a Reef Knot"
}
</script>

Thing > Thing > CreativeWork > Article https://schema.org/Thing https://schema.org/CreativeWork https://schema.org/Person https://schema.org/Article

Types

CreativeWork
- AmpStory
- ArchiveComponent
- Article
  - AdvertiserContentArticle
  - NewsArticle
  - Report
  - SatiricalArticle
  - ScholarlyArticle
  - SocialMediaPosting
  - TechArticle
- Atlas
- Blog
- Book
- Chapter
- Claim
- Clip
- Collection
- ComicStory
- Comment
- Conversation
- Course
- CreativeWorkSeason
- CreativeWorkSeries
- DataCatalog
- Dataset
- DefinedTermSet
- Diet
- DigitalDocument
- Drawing
- EducationalOccupationalCredential
- Episode
- ExercisePlan
- Game
- Guide
- HowTo
- HowToDirection
- HowToSection
- HowToStep
- HowToTip
- HyperToc
- HyperTocEntry
- LearningResource
- Legislation
- Manuscript
- Map
- MathSolver
- MediaObject
- MediaReviewItem
- Menu
- MenuSection
- Message
- Movie
- MusicComposition
- MusicPlaylist
- MusicRecording
- Painting
- Photograph
- Play
- Poster
- PublicationIssue
- PublicationVolume
- Quotation
- Review
- Sculpture
- SheetMusic
- ShortStory
- SoftwareApplication
- SoftwareSourceCode
- SpecialAnnouncement
- Statement
- TVSeason
- TVSeries
- Thesis
- VisualArtwork
- WebContent
- WebPage
- WebPageElement
- WebSite
Thing
- Intangible
  - ItemList
Thing
- Action
  - SearchAction

저는 RDFa를 개인적으로 좋아함으로 이 부분에 대해 좀더 상세 설명을 남기겠습니다.

type 정의

<div vocab="https://schema.org/" typeof="Article">

두개 이상을 정의하여도 사용가능

<div vocab="https://schema.org/" typeof="ItemList CreativeWork">

Article

<div vocab="https://schema.org/" typeof="Article">
    <h2 property="name">이름</h2>
    <div property="text">
        텍스트 내용
    </div>
</div>

Persion

https://schema.org/Person

<div vocab="https://schema.org/" typeof="Person">
    <span property="name">이름</span>
    <span property="additionalName">부가적인 이름</span>
    <span property="birthDate">1999-09-09</span>
    <span property="gender">남</span>
    <span property="jobTitle">프로그래머</span>
</div>

Review | AggretageRation (별점주기)

구글에서 리뷰 스니펫은 특정 유형에서만 가능합니다.
https://developers.google.com/search/docs/appearance/structured-data/review-snippet

  <div property="aggregateRating" typeof="AggregateRating">
    <span property="ratingValue">4</span> stars -
    based on <span property="ratingCount">250</span> reviews
  </div>

<div property="aggregateRating"
    typeof="AggregateRating">
    <span property="ratingValue">87</span>
    out of <span property="bestRating">100</span>
    based on <span property="ratingCount">24</span> user ratings
  </div>

<div vocab="https://schema.org/" typeof="CreativeWork">
    <img property="image" alt="Fall of Man cover art" src="videogame.jpg" />
    <span property="name">Resistance 3: Fall of Man</span>
    <span property="author">Sony</span>
    <span property="contentRating">컨텐츠 등급(Mature..)</span>
    <span property="aggregateRating">
      <span property="ratingValue">4</span> 
      stars - based on <span property="reviewCount">250</span> reviews
    </span>
</div>

ItemList

<div vocab="https://schema.org/" typeof="ItemList">
  <h2 property="name">Top 10 laptops</h2><br>
  <link property="itemListOrder" href="https://schema.org/ItemListOrderDescending" />
  <p>1. <span property="itemListElement">HP Pavilion dv6-6013cl</span></p>
  <p>2. <span property="itemListElement">Dell XPS 15 (Sandy Bridge)</span></p>
  <p>3. <span property="itemListElement">Lenovo ThinkPad X220</span></p>
  ...
</div>

<div vocab="https://schema.org/" typeof="ItemList">
    <link property="itemListOrder" href="https://schema.org/ItemListOrderDescending" />
    <meta property="numberOfItems" content="14">
    <span property="itemListElement"> item 1 </span>
</div>

SearchAction

https://schema.org/SearchAction

<div itemscope itemtype="https://schema.org/WebSite">
  <meta itemprop="url" content="https://www.example.com/"/>
  <form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
      <meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>
      <input itemprop="query-input" type="text" name="search_term_string" required/>
      <input type="submit"/>
  </form>
</div>

아래방식으로 에러가 발생

<div vocab="https://schema.org/" typeof="WebSite">
    <link property="url" href="http://www.example.com/"/>
    <form property="potentialAction" typeof="https://schema.org/SearchAction">
      <meta property="target" content="http://www.example.com/search?q={query}"/>
      <input property="query" type="text" name="query">
      <input type="submit">
    </form>
</div>

Pagination

rel=first, prev, rel:next, rel:last

<div vocab="https://schema.org/" typeof="Article">
    <span  property="pagination">
      //  for example, "1-6, 9, 55" or "10-12, 46-49".
    </span>
</div>

다양한 테스팅 Tools

Mobile-Friendly Test : https://search.google.com/test/mobile-friendly?hl=en
SiteMap 자동 생성기 : https://www.xml-sitemaps.com/

평점을 남겨주세요

평점 : 4.0

총 투표수 : 4 개

SEO란 updated_at: 2024-03-19 17:50

검색엔진 최적화(SEO) 관련 정리

메타 태그(Meta Tag)

`<`title`>`

`<`keywords`>`

`<`description`>`

`<`robots`>`

`<`canonical`>`

오픈 그래프(Open Graph)

필수 og 태그

트위터 미리보기 설정

모바일 미리보기 설정

동영상 관련

기타 메타테그

스키마 마크업 (Schema Markup)

Article 예제

Validator

인코딩 방식 방식

Microdata

RDFa

JSON-LD

Types

type 정의

Article

Persion

Review | AggretageRation (별점주기)

ItemList

SearchAction

Pagination

다양한 테스팅 Tools

Table of contents 목차

질문 및 답글

SEO란 updated_at: 2024-03-19 17:50

<title>

<keywords>

<description>

<robots>

<canonical>

Table of contents 목차

질문 및 답글

`<`title`>`

`<`keywords`>`

`<`description`>`

`<`robots`>`

`<`canonical`>`