본문 바로가기
카테고리 없음

SEO (검색엔진최적화) - title, metadata 작성법

by iroiro365 2023. 4. 22.

title 작성 법

검색엔진에서는 title > metadata > heading 순으로 중요하게 본다. 다음은 SEO를 위한 좋은 title 작성 법이다.

  1. 짧고 명료하게 작성하기
    페이지 타이틀은 페이지 내용을 간략하게 요약한 것이므로, 짧고 명료하게 작성해야 합니다.  반복된 키워드는 피하고 구체적인 키워드를 앞으로 배치합니다.
  2. 핵심 키워드 포함하기
    페이지 타이틀에는 페이지와 관련된 핵심 키워드를 포함하는 것이 좋습니다. 이렇게 하면 검색 엔진이 해당 페이지를 더 잘 인식하고 검색 결과에 노출시키기 쉽습니다.

  3. 회사 또는 브랜드 이름을 포함하기
    회사 또는 브랜드 이름을 페이지 타이틀에 포함하는 것은 검색 결과에서 회사나 브랜드의 신뢰도를 높이는 데 도움이 됩니다.

  4. 모든 페이지마다 고유한 타이틀 작성하기
    모든 페이지마다 고유한 타이틀을 작성하는 것이 좋습니다. 이렇게 하면 검색 엔진이 페이지를 구분하고 검색 결과에 노출시키기 쉽습니다.

다음은 모범적인 페이지 타이틀의 예시입니다:

[브랜드명] - [서비스/제품명] | [사이트명]
[서비스/제품명] - [브랜드명] | [사이트명]
[키워드] - [브랜드명] | [사이트명]
[지역명] [키워드] - [브랜드명] | [사이트명]

* Galaxy S23 Series - 삼성닷컴 - 할인 혜택
* 배송 조회/예약 | CJ대한통운 - CJ Logistics

예를 들어, "Nike Running Shoes | Nike.com" 또는 "New York Pizza - Joe's Pizza | joespizza.com" 과 같은 형태로 페이지 타이틀을 작성할 수 있습니다. 이렇게 작성하면 검색 엔진이 해당 페이지를 더 잘 인식하고 검색 결과에 노출시키기 쉬워집니다.)

 

키워드 구분자는 아래를 이용할것 

  • 대시 ( - ) ✅추천
  • 파이프 ( | )
  • 콜론 ( : )

Metadata - html, head

👉 lang속성

<html lang="ko">

html태그에 lang 속성을 꼭 넣는게 좋습니다. lang 속성은 문서의 언어를 지정하는 속성으로, 검색 엔진이 페이지의 언어를 인식하고 색인화하는 데 도움을 줍니다. 검색 엔진은 해당 언어를 사용하는 사용자에게 보다 적합한 검색 결과를 제공하고, 검색 결과 페이지에서도 사용자의 언어에 맞는 페이지를 더 잘 노출시킵니다.

또한, 웹 접근성 측면에서도 lang 속성을 사용하는 것이 중요합니다. lang 속성을 사용하면 스크린 리더 등의 보조 기술을 사용하는 사용자가 해당 페이지의 언어를 인식할 수 있어 웹 사이트에 접근하는 데 더욱 용이합니다.

 

👉 charset

<head>
  <meta charset="UTF-8">
  <title>웹 페이지 제목</title>
</head>

charset은 문서 인코딩을 지정하는 메타데이터 중 하나입니다. 문서 인코딩은 웹 페이지의 문자 코드를 결정하며, charset 속성이 정확하게 지정되어 있지 않으면 해당 페이지가 잘못 인식될 수 있습니다.

검색 엔진은 문서 인코딩이 잘못 지정되어 있을 경우, 페이지의 내용을 올바르게 읽지 못할 가능성이 있으며, 이로 인해 페이지의 검색 엔진 최적화(SEO)가 저하될 수 있습니다.

따라서, charset 속성은 SEO 측면에서 중요한 역할을 합니다. 모범적인 charset 속성은 UTF-8 입니다. UTF-8은 대부분의 언어를 지원하며, 특수 문자 및 기호도 지원하기 때문에 웹 페이지의 인코딩을 정확하게 지정할 수 있습니다.

 

👉 description

<head>
  <title>여행사이트 - 최저가 항공권 및 호텔 예약</title>
  <meta name="description" content="여행사이트에서는 최저가 항공권 및 호텔 예약 서비스를 제공합니다. 지금 바로 여행을 떠나보세요!">
</head>

description은 해당 페이지의 내용을 간략하게 요약한 것으로, 검색 결과 페이지에서 페이지 설명으로 사용됩니다. 페이지와 관련된 핵심 키워드를 포함하고, 페이지의 고유한 내용을 강조하는 것이 좋습니다.

 

👉 viewport

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>웹 페이지 제목</title>
</head>

viewport는 모바일 기기에서 웹 페이지를 볼 때 화면의 크기와 배치를 제어하는 메타데이터 중 하나입니다. viewport를 제대로 설정하지 않으면 모바일 기기에서 웹 페이지가 정상적으로 표시되지 않거나, 사용자 경험이 저하될 수 있습니다.

검색 엔진은 모바일 기기에서 웹 페이지가 어떻게 표시되는지 확인하고, 사용자 경험을 개선하는 페이지를 선호합니다. 따라서, viewport 설정은 SEO 측면에서도 중요한 역할을 합니다.

위 예시에서, <meta> 태그의 name 속성이 viewport이며, content 속성에는 width와 initial-scale이 설정되어 있습니다. 이를 통해, 해당 페이지가 모바일 기기에서 화면의 크기에 맞춰 표시되도록 지정하고, 초기 배율을 1로 설정함으로써 사용자가 페이지를 확대 또는 축소하지 않아도 정상적으로 표시되도록 보장합니다.

따라서, viewport 설정은 검색 엔진 최적화(SEO) 및 모바일 기기 사용자 경험 개선 측면에서 모두 중요한 요소입니다.

 

👉 Canonical tag

<head>
  <link rel="canonical" href="https://www.example.com/category/example-page">
</head>

Canonical tag는 중복 컨텐츠가 있는 경우, 검색 엔진이 어떤 페이지를 우선으로 인식해야 하는지 알려주는 태그입니다. 이를 통해 중복 컨텐츠로 인한 검색 엔진 패널티를 방지할 수 있습니다.

 

👉 Robots meta tag

<head>
  <meta name="robots" content="[value]">
</head>

Robots meta tag는 검색 엔진 로봇이 웹 페이지를 크롤링하고 색인화할 때, 어떤 동작을 수행해야 하는지 알려주는 메타데이터입니다. Robots meta tag를 사용하여 검색 엔진에 대해 페이지의 로봇 접근을 허용하거나 차단할 수 있으며, 색인화할 수 있는 콘텐츠의 범위를 지정할 수도 있습니다.

 

value는 다음과 같은 값 중 하나 또는 여러 개를 포함할 수 있습니다.

- index : 해당 페이지를 색인화합니다.
- noindex : 해당 페이지를 색인화하지 않습니다.
- follow : 해당 페이지에서 링크를 따라가서 해당 페이지를 색인화합니다.
- nofollow : 해당 페이지에서 링크를 따라가지 않습니다.
- none : noindex와 nofollow를 모두 적용합니다.
- all : 모든 동작을 허용합니다.
- noarchive : 해당 페이지를 웹 아카이브에 보관하지 않습니다.
- nosnippet : 해당 페이지의 스니펫을 표시하지 않습니다.
- max-snippet : 해당 페이지의 스니펫에서 표시할 최대 문자 수를 지정합니다.
- max-image-preview : 해당 페이지에서 표시할 최대 이미지 미리보기 크기를 지정합니다.


모범적인 Robots meta tag 예시:

 

<head>
  <meta name="robots" content="index,follow">
  <title>웹 페이지 제목</title>
</head>

위 예시에서, <meta> 태그의 name 속성이 robots이며, content 속성에는 index와 follow가 설정되어 있습니다. 이를 통해 해당 페이지를 색인화하고, 페이지에서 링크를 따라가서 해당 페이지를 색인화하도록 검색 엔진에 지시합니다.

Robots meta tag는 검색 엔진 최적화(SEO) 측면에서 중요한 역할을 합니다. 따라서, Robots meta tag를 사용하여 검색 엔진이 페이지를 올바르게 색인화하도록 설정하는 것이 좋습니다.

 

👉 Open Graph protocol (카카오톡, 라인, 페이스북 등 동일)

<head>
  <meta property="og:title" content="여행사이트 - 최저가 항공권 및 호텔 예약">
  <meta property="og:description" content="여행사이트에서는 최저가 항공권 및 호텔 예약 서비스를 제공합니다. 지금 바로 여행을 떠나보세요!">
  <meta property="og:image" content="https://www.example.com/images/example-image.jpg">
  <meta property="og:url" content="https://www.example.com/category/example-page">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Example">
</head>

Open Graph protocol은 소셜 미디어에서 해당 페이지가 공유될 때, 제목, 설명, 이미지 등을 정의하는 메타데이터입니다. 이를 통해 소셜 미디어에서 더 잘 노출될 수 있습니다.

위 예시는 Open Graph protocol을 사용하여 해당 페이지의 제목, 설명, 이미지, URL, 타입을 지정하는 방법을 보여줍니다.

이 외에도 다양한 메타데이터 태그가 있지만, 위 예시들은 HTML 문서에서 자주 사용되는 것들입니다. SEO를 위해서는 이러한 메타데이터 태그들을 적절히 활용하고, 페이지 내용과 일치하는 키워드를 사용하며, 중복되는 내용을 피하는 것이 중요합니다.

 

* 페이스북 공유 디버거

 

👉 트위터 metadata 

<head> 
  <meta name="description" content="A brief description of my web page">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="My Page Title">
  <meta name="twitter:description" content="A brief description of my web page">
  <meta name="twitter:image" content="https://www.example.com/images/my-image.jpg">
  <meta name="twitter:site" content="@example">
  <meta name="twitter:creator" content="@myusername">
</head>
  • twitter:card : 트위터에서 카드 형식으로 보여줄 컨텐츠 유형을 지정합니다.
  • twitter:title : 웹 페이지의 제목을 정의합니다. 이 메타 데이터는 트위터 공유 시 제목으로 사용됩니다.
  • twitter:description : 웹 페이지에 대한 간단한 설명을 제공합니다. 이 메타 데이터는 트위터 공유 시 설명으로 사용됩니다.
  • twitter:image : 웹 페이지에서 사용할 대표 이미지를 정의합니다. 이 메타 데이터는 트위터 공유 시 썸네일로 사용됩니다.
  • twitter:site : 트위터 계정의 사용자 이름을 정의합니다.
  • twitter:creator : 웹 페이지의 작성자를 나타내는 트위터 사용자 이름을 정의합니다.

twitter:card는 트위터에서 웹 페이지를 공유할 때 보여질 카드의 유형을 지정하는 데 사용되는 메타데이터입니다. 트위터 카드는 웹 페이지의 제목, 설명, 이미지 등을 포함하는 미리보기 뷰를 제공합니다. twitter:card에 지정할 수 있는 유형은 다음과 같습니다.

  • summary: 웹 페이지의 제목, 설명 및 썸네일 이미지를 포함하는 작은 카드입니다. 이 유형은 기본값입니다.
  • summary_large_image: 웹 페이지의 제목, 상세 설명 및 큰 썸네일 이미지를 포함하는 큰 카드입니다.
  • app: 모바일 앱을 다운로드할 수 있는 링크를 포함하는 카드입니다.
  • player: 동영상 또는 오디오 클립의 재생을 위한 미리보기를 제공하는 카드입니다.

트위터 카드는 공유할 페이지의 내용에 따라 적절한 유형을 선택해야 합니다. 적절한 유형을 선택하고 twitter:card 메타데이터를 적용하면, 공유된 웹 페이지가 더욱 독창적이고 시각적으로 풍부해질 수 있습니다.

 

* 트위터 SEO 지침

* 트위터 카드 유효성 검사

👉 keywords tag

<head>
  <title>여행사이트 - 최저가 항공권 및 호텔 예약</title>
  <meta name="keywords" content="여행, 항공권, 호텔, 예약">
</head>

keywords tag는 해당 페이지와 관련된 키워드를 제공하는 것으로, 검색 엔진이 페이지와 관련된 키워드를 파악하는 데 사용됩니다. 그러나, 최근 검색 엔진은 이 태그를 더 이상 사용하지 않습니다. (입력해 상관은 없음)

 

 

👉 Robots.txt 파일

Robots.txt 파일은 검색 엔진 로봇이 웹 사이트를 크롤링할 때, 어떤 페이지를 크롤링하고 어떤 페이지를 크롤링하지 않아야 하는지 지시하는 파일입니다. Robots.txt 파일을 작성하여 검색 엔진 로봇의 접근을 허용하거나 차단하며, 웹 사이트의 콘텐츠를 보호하고 검색 엔진 최적화(SEO)를 위한 지침을 제공할 수 있습니다. Robots.txt 파일은 웹 사이트의 루트 디렉토리에 위치하며, 다음과 같은 구문을 사용하여 작성됩니다.

User-agent: [bot name]
Disallow: [directory or file path]
  • User-agent : robots.txt 파일에 적용할 로봇 이름을 지정합니다. '*'을 사용하면 모든 로봇에 적용됩니다.
  • Disallow : 해당 디렉토리 또는 파일을 로봇에게 차단합니다. '/'을 사용하면 모든 페이지에 적용됩니다.

robots.txt 파일 예시:

User-agent: *
Disallow: /admin/
Disallow: /private/
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /test/
Disallow: /examples/

robots.txt 더 알아보기

 

👉 Sitemap 파일

Sitemap은 웹 사이트의 페이지 구조를 검색 엔진에게 제공하는 XML 파일입니다. Sitemap은 검색 엔진 로봇이 웹 사이트의 모든 페이지를 크롤링하고 인덱싱하는 데 도움을 주며, 검색 엔진 최적화(SEO)를 향상시키는 데 도움이 됩니다.

Sitemap을 작성하는 방법은 다음과 같습니다.

  • Sitemap XML 파일 생성: sitemap.xml 파일을 생성합니다.
  • 페이지 URL 추가: 각 페이지의 URL을 sitemap.xml 파일에 추가합니다.
  • Sitemap XML 파일 제출: Sitemap XML 파일을 검색 엔진에 제출합니다.

Sitemap 예시:

<!-- xml파일임 -->

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://example.com/</loc>
      <lastmod>2022-04-22T00:00:00+00:00</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>http://example.com/about</loc>
      <lastmod>2022-04-22T00:00:00+00:00</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
   </url>
   <url>
      <loc>http://example.com/contact</loc>
      <lastmod>2022-04-22T00:00:00+00:00</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
   </url>
</urlset>

위 예시에서, <urlset> 태그는 Sitemap의 루트 태그입니다. <url> 태그는 각 페이지의 URL을 정의합니다. <loc> 태그는 페이지의 URL을 포함하며, <lastmod> 태그는 페이지가 마지막으로 업데이트된 날짜와 시간을 나타냅니다. <changefreq> 태그는 검색 엔진에게 페이지가 얼마나 자주 업데이트되는지 알려줍니다. <priority> 태그는 페이지의 우선순위를 나타냅니다.

Sitemap을 검색 엔진에 제출하면, 검색 엔진이 웹 사이트의 모든 페이지를 쉽게 찾을 수 있으므로 검색 엔진 최적화에 큰 도움이 됩니다.

 

sitemap 더 알아보기

 

 

그래서 Metadata 어떻게 작성하면 되나요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="이 페이지는 SEO 메타데이터 예시입니다.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메타데이터 예시</title>

    <!-- Open Graph -->
    <meta property="og:title" content="메타데이터 예시">
    <meta property="og:description" content="이 페이지는 SEO 메타데이터 예시입니다.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://example.com">
    <meta property="og:image" content="http://example.com/image.jpg">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="메타데이터 예시">
    <meta name="twitter:description" content="이 페이지는 SEO 메타데이터 예시입니다.">
    <meta name="twitter:image" content="http://example.com/image.jpg">
</head>
<body>
    <!-- 내용 -->

    <!-- 네이버 연관채널 등록 용 스크립트 : body 종료 직전에 추가 -->
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "Person",
     "name": "My Site Name",
     "url": "http://www.mysite.com",
     "sameAs": [
       "https://www.facebook.com/myfacebook",
       "http://blog.naver.com/myblog",
       "http://smartstore.naver.com/mystore"
     ]
    }
    </script>

</body>
</html>

* 네이버의 SEO (연관채널 등록) 관련 문서

 

 

 

저작자표시 (새창열림)

티스토리툴바