ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 트래픽을 쓸어 담는 검색엔진 최적화 - chapter 3, 테크니컬 SEO
      Book Study 2022. 10. 1. 23:54

      본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다.

       

      480

       

      이전 글 보고 오기

       

      트래픽을 쓸어 담는 검색엔진 최적화 - chapter 2, 다양한 SEO 캠페인

      본문은 서적 '트래픽을 쓸어 담는 검색 엔진 최적화' 를 읽고 남기는 요약본입니다. 더 자세한 정보를 얻기 원하신다면 해당 서적을 구매하시는 것을 추천드립니다. 이전 글 보고 오기 트래픽을

      junheedot.tistory.com

       

      테크니컬 SEO는 웹 사이트의 콘텐츠를 검색엔진에 잘 전달하여 검색엔진이 해당 웹 사이트와 웹 페이지 정보를 이해하고 노출할 수 있도록 처리하는 SEO 프로세스의 한 부분입니다.

       

      과거 테크니컬 SEO는 제목, 메타 디스크립션, 메타 키워드 같은 추가 정보를 제공하여 웹 페이지의 내용과 주제를 검색엔진에 전달하는 방식이었으나 내용과 상관없는 키워드를 많이 넣는 등의 부작용이 많아진 메타 키워드 태그는 검색엔진에서 아예 제외되고 있습니다.

       

      참고로 메타 디스크립션을 포함한 테크니컬 SEO 등 각 요소의 최대 글자 수는 다음 표와 같습니다.

      최적화 요소 영문 최대 글자 수 한글 최대 글자수
      URL(웹 주소) 115 영문 사용 권장
      Title(타이틀) 65 32
      Meta Description    
      (메타 디스크립션) 160 77
      H1 70 35
      H2 70 35
      Image Alt Text    
      (이미지 대체 텍스트) 100 50

      최근 경향은 메타 키워드 같은 추가 정보가 없어도 검색엔진이 웹 페이지 내용을 잘 이해하면서 웹 페이지 속도, 보안 프로토콜 준수, 모바일 최적화와 같은 다양한 기술 요소를 고려하여 순위를 매기는 추세입니다.

      웹 주소

      웹 주소 URL(Uniform Resource Locator)는 웹 페이지, 이미지, 자바스크립트 소스, CSS 파일 등의 위치를 지정하는 주소입니다. 검색 결과 페이지에서 보이는 웹 페이지 주소는 다음과 같은 구조입니다.

      https://abc.example.com/images/seo.html?page=1
      구조 protocol subdomain root domain folder filename extension query string
        https abc example.com images seo html page=1

      모든 웹 페이지는 URL이 있습니다. 동일한 내용의 페이지가 여러 개의 URL이 있는 경우는 검색 엔진에서 어뷰징으로 간주할 수 있습니다.

       

      잘 정리된 구조화된 URL은 검색엔진이 웹 문서를 크롤링하기에 좋은 환경을 제공해줍니다. 사용자에게 친화적이고 쉬운 URL을 제공함으로써 URL을 쉽게 기억할 수 있도록 해줄 뿐만 아니라 콘텐츠가 링크되거나 공유될 때 URL의 일부를 빠트려 잘못된 링크가 공유되는 불편함을 방지할 수 있습니다.

      웹 사이트 속도

      로딩 속도란 해당 웹 페이지 URL을 입력한 후 페이지가 로딩될 때까지의 시간이 얼마나 걸리는지를 의미합니다. 모바일 최적화와 마찬가지로 로딩 시간은 사용자 경험에 많은 영향을 미쳐 구글에서는 로딩 속도가 짧은 웹 사이트에 높은 SEO 점수를 부여합니다.

       

      여러 연구 결과를 정리한 호보 웹을 보면 공통적으로 3초가 마지노선이고 모바일 사용자는 참을성이 PC에 비해 더 부족하다고 이야기합니다. 즉 PC는 3초 미만, 모바일은 2초 미만의 로딩 속도여야 사용자가 불편을 느끼지 않습니다.

       

      SEO 측면에서는 몇 가지 추가로 고려해야 할 사항이 있습니다. 먼저 최소한 경쟁 웹 사이트보다 더 빠른 웹 사이트 속도를 제공해야 합니다. SEO는 기본적으로 비슷한 웹 페이지, 웹 사이트와의 순위 경쟁입니다. 많은 SEO 전문가는 사이트가 느릴수록 더욱 느리게 수집한다고 이야기합니다.

       

      웹 사이트가 느리면 새로운 콘텐츠를 업로드하여도 색인이 더디게 진행되어 검색 결과 페이지에 보여지기까지 많은 시간이 걸립니다. 따라서 경쟁 웹 사이트에 비해 비교적 노출 기회가 줄어들 수밖에 없습니다.

      로봇 파일

      검색엔진의 수집 로봇(검색엔진 크롤러)을 위한 robots.txt는 웹 표준의 하나로, 모든 웹 사이트의 루트 폴더에 위치해야 합니다. 이 파일은 검색엔진 로봇에 웹 사이트의 사이트맵 위치, 접근 가능한 파일과 가능하지 않은 파일 등의 정보를 알려줍니다. robots.txt를 이용하여 수집이 안 되길 원하는 웹 페이지를 지정하거나 반드시 색인되어야 하는 웹 페이지의 웹 주소를 포함한 사이트맵 파일의 위치를 지정하여 검색엔진이 웹 사이트를 더 빠르고 효율적으로 수집할 수 있도록 도와줄 수도 있습니다.

      robots.txt 설정하는 방법

      robots.txt는 html 이 아닌 일반 텍스트 파일로 작성하며 사이트의 루트 디렉토리에 위치해야 합니다. 누구에게나 공개되는 파일로 도메인 주소에 /robots.txt를 입력하면 그 내용을 웹 브라우저에서 다음처럼 확인할 수 있습니다.

      https://junheedot.tistory.com/robots.txt

      User-agent: *
Disallow: /owner
Disallow: /manage
Disallow: /admin
Disallow: /oldadmin
Disallow: /search
Disallow: /m/search
Disallow: /m/admin
Disallow: /like
Allow: /

User-agent: Mediapartners-Google
Allow: /

User-agent: bingbot
Crawl-delay: 30

      일반적으로 모든 웹 사이트 콘텐츠에 대한 모든 웹 크롤러의 접근을 차단하려면 다음과 같이 입력합니다.

      User-agent: *
Disallow: /

      구글봇만 차단시키고 싶다면 User-agent 에 * 부분을 Googlebot으로 변경하여 설정할 수 있습니다.

      User-agent: Googlebot
Disallow: /

      웹 사이트의 모든 컨텐츠에 네이버 검색 로봇의 크롤링을 허용하되 /hello/ 디렉토리 안 페이지에 대한 접근만 차단하려면 다음과 같이 입력합니다.

      User-agent: Yeti
Disallow: /hello/

      자주 쓰이는 검색 로봇의 이름은 다음과 같습니다

      1. 구글 - Googlebot
      2. 네이버 - Yeti
      3. 빙 - Bingbot
      4. 야후 - Slurp
      ## 웹 사이트 내 모든 페이지에 모든 크롤러의 접근을 허용한다.
User-agent: *
Allow: /

## 웹 사이트 내 모든 페이지에 모든 크롤러의 접근을 불허한다.
User-agent: *
Disallow: /

## 특정 서브 폴더에 특정 크롤러의 접근을 불허한다
User-agent: [user-agent name]
Disallow: /example-subfolder/

## 복수의 웹 사이트 서브 폴더에 모든 크롤러의 접근을 불허한다.
User-agent:*
Disallow: /example-subfolder1/
Disallow: /example-subfolder2/
Disallow: /example-subfolder3/

## 특정 페이지에 특정 크롤러의 접근을 불허한다
User-agnet: [user-agent name]
Disallow: /example-subfolder/example-blocked-page

## 다수의 페이지에 모든 크롤러의 접근을 불허한다.
User-agent:*
Disallow: /example-subfolder/example-blocked-page1
Disallow: /example-subfolder/example-blocked-page2
Disallow: /example-subfolder/example-blocked-page3

## 사이트맵의 위치를 포함한다.
User-agent:*
Disallow: [접근 불허 디렉토리 또는 URL]
Sitemap: https://www.example.com/sitemap.xml

      사이트맵 파일

      사이트맵은 웹 사이트 내 모든 리소스의 목록을 나열한 파일로, 책의 목차와 같은 역할을 합니다. 페이지 사이트맵은 검색엔진에 웹 사이트 내 모든 페이지의 목록을 제공합니다. 사이트맵이 검색엔진 랭킹 점수를 높이는 데 직접적인 영향을 주지는 않지만 검색엔진 로봇의 일반적인 크롤링 과정에서 발견되지 않을 수 있는 웹 페이지 정보를 제공해줘 사이트맵을 설정하는 것이 SEO에 긍정적인 영향을 끼칩니다.

      타이틀 태그

      타이틀 태그는 페이지 레벨에 해당하는 테크니컬 SEO 항목이며, 페이지 제목을 나타내는 HTML의와사이에태그입니다.

      <head>
    <title>프론트 엔드 개발자의 기억 저장소<title>
</head>

      검색엔진 크롤러가 웹 페이지 정보를 수집할 때 타이틀 태그를 웹 사이트 타이틀이라고 인식하고 웹 페이지 내용을 이해하는 정보를 얻습니다. 검색 결과 페이지에 표시되는 타이틀 내용을 확인하여 특정 페이지의 주제를 알 수 있습니다.

       

       

      검색 사용자는 HTML 소스를 직접 보지 않고도 검색 결과 페이지에 노출된 타이틀 태그로 해당 페이지 정보를 알 수 있습니다.

      • 제목 글자 수가 공백을 포함하여 영문 65자, 한글 32자 내외여야 한다
      • 제목에는 가장 중요하고 관련이 깊은 키워드를 넣어야 한다. 단 반복은 안 된다
      • 각 페이지는 고유의 제목이 있는 것이 좋다

      메타 디스크립션 태그

      메타 디스크립션 태그는 웹 페이지를 요약한 설명글입니다. 타이틀 태그처럼 HTML의사이에 위치한 태그입니다. 메타 디스크립션 태그는 타이틀 태그와는 달리 한두 개 정도의 짧은 문장을 사용해 웹 페이지 정보를 전달할 수 있습니다. 검색 결과 페이지에서 페이지 제목과 URL 아래에 표시됩니다.

      <head>
<meta name="description" content="프론트 엔드 개발자로 살아 남기 위한 기억 저장소입니다.">
</head>

      검색 결과 페이지에 노출되는 메타 디스크립션 태그

       

      웹 페이지 내용과 전혀 다른 메타 디스크립션을 작성해 적용하거나 모든 페이지에 중복되는 메타 디스크립션을 적용해서는 안 됩니다. 각 페이지에 맞는 설명을 디스크립션으로 넣고 주요 키워드를 포함해 검색 사용자의 클릭을 자연스럽게 유도하는 것이 중요합니다. 또한 본문의 내용을 잘 요약하고 있는지 확인해봐야 합니다. 검색 사용자는 메타 디스크립션으로 콘텐츠 내용을 미리 확인하고 웹 사이트 방문을 결정합니다. 최대한 서술적으로 작성하는 것이 매우 중요합니다.

      메타 디스크립션 태그 작성 시 체크 포인트

      1. 메타 디스크립션의 길이가 77자를 넘지 않는지 살펴봐야 합니다
      2. 타깃 키워드를 포함하고 있는지 체크해야 합니다
      3. 본문의 내용을 잘 요약하고 있는지 확인해봐야 합니다
      4. 콘텐츠와 메타 디스크립션의 관련이 깊은지도 체크해봐야 합니다
      5. 콜 투 액션(CTA)을 포함하는지 봐야 합니다

      CTA란 사용자의 액션을 유도하는 문구를 뜻합니다. CTA를 메타 디스크립션에 포함하여 검색 사용자가 해당 페이지를 방문했을 때 무엇을 얻을 수 있는지 알려주는 것이 중요합니다. ‘더 알아보세요’, ‘배워보세요’, ‘물어보세요’ 같은 행동을 유도하는 단어로 검색 사용자의 관심과 클릭을 유도할 수 있습니다.

      이미지 대체 텍스트

      이미지 대체 텍스트는 이미지가 표시되지 못하는 환경에서 이미지 정보를 보여주는 기능으로 시작되었습니다. 시각 장애를 가진 검색 사용자에게는 TTS를 사용해 이미지 내용을 전달하거나 인터넷이 느려 이미지가 로딩되지 않을 때 검색 사용자에게 이미지 내용을 전달할 수 있습니다. SEO에서는 이미지 정보를 검색인진에 전달하는 역할을 합니다.

      <img src="IMG-1234.jpg" alt="photo">

      검색엔진 상위 랭킹에 큰 영향을 미치는 요소는 아니지만 중요한 부분도 있습니다. 검색엔진을 통한 검색은 콘텐츤뿐만 아니라 이미지를 찾기 위한 이미지 검색도 포함되며, 이미지 검색에서 이미지가 더 많이 노출되기를 원한다면 이미지 대체 텍스트는 필수입니다.

      이미지 대체 텍스트에 타깃 키워드를 포함하면서 해당 이미지 정보를 명확하고 간결하게 작성하는 것이 SEO 측면에서 좋은 이미지 대체 텍스트입니다.

      <img src="IMG-1234.jpg" alt="twinword-ideas-keywords-suggestion-result-page">

      오픈 그래프

      오픈 그래프는 페이스북과 페이스북 사용자의 데이터 그리고 웹 사이트를 결합하는 기능입니다. 웹 페이지 링크를 공유할 때 소셜 미디어에 해당 웹사이트의 상세한 정보를 제공할 수 있습니다.

      HTML 문서의 메타 정보를 쉽게 표시하기 위한 기능으로 링크를 넣을 떄 미리보기에 나오는 제목, 설명글, 이미지 등을 설정하는 역할을 맡습니다.

      오픈 그래프를 설정하지 않으면 크롤러는 자동으로 웹 사이트의 제목, 요약 내용, 대표 이미지를 설정합니다. 하지만 크롤러가 정보 의미를 100% 인식하는 것이 불가능해 해당 콘텐츠에 맞지 않는 제목이나 이미지가 설정될 수 있습니다. 따라서 오픈 그래프와 메타 태그를 이용해 전달하고자 하는 정보를 직접 전달하는 것이 중요합니다.

      OG 태그 웹 마스터용 공유 가이드

      태그 설명
      og:url 페이지의 표준 URL입니다. 세션 변수, 사용자 식별 매개변수 또는 카운터가 포함되지 않은 그대로의 URL이어야 합니다. 이 URL에 대한 좋아요 및 공유는 이 URL에서 집계됩니다. 예를 들어, 여러 버전의 페이지에서 좋아요와 공유를 집계하기 위해 모바일 도메인 URL은 표준 URL로 지정된 데스크톱 버전의 URL을 가리켜야 합니다.
      og:title 사이트 이름과 같은 브랜드가 없는 기사의 제목입니다.
      og:description 일반적으로 2~4개의 문장으로 이루어진 콘텐츠의 간략한 설명입니다. 이 설명은 Facebook의 게시물 제목 아래에 표시됩니다.
      og:image 사용자가 Facebook에 콘텐츠를 공유할 때 표시되는 이미지의 URL입니다. 자세한 내용은 아래를 참조하고, 고품질 미리 보기 이미지를 지정하는 방법에 대해 알아보려면 모범 사례 가이드를 확인하세요.
      fb:app_id Facebook 인사이트를 사용하려면 페이지에 앱 ID를 추가해야 합니다. 인사이트를 통해 Facebook에서 개발자 사이트로 보내는 트래픽의 분석 결과를 확인할 수 있습니다. 앱 대시보드에 앱 ID가 있습니다.

      콘텐츠 배포를 늘리고 참여도를 높이기 위해 다음 두 개의 태그를 추가할 수도 있습니다.

      태그 설명
      og:type 콘텐츠의 미디어 유형입니다. 이 태그는 콘텐츠가 피드에 표시되는 방식에 영향을 미칩니다. 유형을 지정하지 않는 경우 기본값은 website입니다. 각 URL은 단일 개체여야 하므로, 여러 og:type 값을 사용할 수 없습니다. 모든 개체 유형 리스트는 개체 유형 참고 자료에서 확인할 수 있습니다.
      og:locale 리소스의 로캘입니다. 기본값은 en_US입니다. 다른 언어 번역이 가능한 경우 og:locale:alternate도 사용할 수 있습니다. 현지화 문서에서 지원되는 로캘에 대해 알아보세요.

      미디어 콘텐츠 유형

      콘텐츠에 오디오, 동영상 또는 위치 정보가 포함되는 경우 더 많은 마크업을 추가할 수 있습니다. 모든 표준 개체 속성은 개체 유형 참고 자료를 참조하세요.

      동영상

      모든 콘텐츠 유형에 대해 og:video를 사용할 수 있습니다. 이 섹션에서는 추가 태그를 사용하여 Facebook에서 동영상 화면을 최적화하는 방법을 설명합니다. Facebook에서는 mp4와 Flash 동영상을 모두 지원합니다.

       

      og:video:url과 og:video:secure_url 태그에 모두 보안 URL을 사용하여 동영상을 피드에서 즉시 재생할 수 있도록 합니다. 다양한 요인에 따라 동영상이 즉시 재생되지 않을 수도 있습니다.

      메타 태그 설명
      og:video 동영상의 URL입니다. 피드에서 즉시 동영상을 재생하려면 가능한 한 https:// URL을 사용해야 합니다.
      og:video:url og:video와 같습니다.
      og:video:secure_url 동영상의 보안 URL입니다. og:video에 보안 URL을 설정한 경우에도 이 URL을 포함합니다.
      og:video:type 동영상의 MIME 유형입니다. application/x-shockwave-flash 또는 video/mp4입니다.
      og:video:width 동영상의 너비입니다(단위: 픽셀). 이는 동영상의 필수 속성입니다.
      og:video:height 동영상의 높이입니다(단위: 픽셀). 이는 동영상의 필수 속성입니다.
      og:image 피드에서 고품질 미리 보기를 위한 이미지를 지정합니다.

      이미지

      두 개 이상의 이미지를 포함하는 콘텐츠에 이 속성 세트를 사용합니다. og:image를 가장 효율적으로 사용하는 방법에 대한 가이드는 공유 모범 사례를 참조하세요.

      메타 태그 설명
      og:image 이미지의 URL입니다. 이미지를 게시한 후 업데이트하려면 새 이미지에 대해 새 URL을 사용합니다. 이미지는 URL을 기반으로 캐시되며, URL을 변경하지 않는 한 업데이트되지 않습니다.
      og:image:url og:image와 같습니다.
      og:image:secure_url 이미지의 https:// URL입니다.
      og:image:type 이미지의 MIME 유형입니다. image/jpeg, image/gif, image/png 중 하나입니다.
      og:image:width 이미지 너비입니다(단위: 픽셀). 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.
      og:image:height 이미지 높이입니다(단위: 픽셀). 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.

      메터태그 예시

      URL - https://velog.io/velog/public/index.html

      <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <meta name="theme-color" content="#000000">
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/favicons/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicons/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicons/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicons/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicons/favicon-16x16.png">
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>velog</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>
      <title>velog<title>

<meta data-rh="true" name="description" content="개발자들을 위한 블로그 서비스. 어디서 글 쓸지 고민하지 말고 벨로그에서 시작하세요.">
<meta data-rh="true" property="fb:app_id" content="203040656938507">
<meta data-rh="true" property="og:image" content="https://images.velog.io/velog.png">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="origin-trial" content="A+cA2PUOfIOKAdSDJOW5CP9ZlxONy1yu+hqAq72zUtKw4rLdihqRp6Nui/jUyCyegr+BUtH+C+Elv0ufn05yBQEAAACFeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjY5NzY2Mzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
<meta http-equiv="origin-trial" content="A+zsdH3aNZT/bkjT8U/o5ACzyaeNYzTvtoVmwf/KOilfv39pxY2AIsOwhQJv+YnXp98i3TqrQibIVtMWs5UHjgoAAACLeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjY5NzY2Mzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
<meta http-equiv="origin-trial" content="AxceVEhIegcDEHqLXFQ2+vPKqzCppoJYsRCZ/BdfVnbM/sUUF2BXV8lwNosyYjvoxnTh2FC8cOlAnA5uULr/zAUAAACLeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjY5NzY2Mzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">

      URL - https://velog.io/@sj_dev_js/Next.js-에-대한-거의-모든-것

      <Helmet>
  <title>{post.title}</title>
  <meta name="description" content={plainTextBody} />
  <link rel="canonical" href={url} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="article" />
  <meta property="og:title" content={post.title} />
  <meta property="og:description" content={plainTextBody} />
  {post.thumbnail && <meta property="og:image" content={post.thumbnail} />}
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={post.title} />
  <meta name="twitter:description" content={plainTextBody} />
  {post.thumbnail && <meta name="twitter:image" content={post.thumbnail} />}
</Helmet>
      <title>Next.js 에 대한 거의 모든 것</title>

<meta data-rh="true" property="fb:app_id" content="203040656938507">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="origin-trial" content="A+cA2PUOfIOKAdSDJOW5CP9ZlxONy1yu+hqAq72zUtKw4rLdihqRp6Nui/jUyCyegr+BUtH+C+Elv0ufn05yBQEAAACFeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjY5NzY2Mzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
<meta http-equiv="origin-trial" content="A+cA2PUOfIOKAdSDJOW5CP9ZlxONy1yu+hqAq72zUtKw4rLdihqRp6Nui/jUyCyegr+BUtH+C+Elv0ufn05yBQEAAACFeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjY5NzY2Mzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
<meta http-equiv="origin-trial" content="AxceVEhIegcDEHqLXFQ2+vPKqzCppoJYsRCZ/BdfVnbM/sUUF2BXV8lwNosyYjvoxnTh2FC8cOlAnA5uULr/zAUAAACLeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjY5NzY2Mzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">

<meta name="description" content="Next.js 에 대해 있을 건 다 있고 없을 건 없는 문서. 목차가 어마어마하니 주의 하세요." data-rh="true">
<meta property="og:url" content="https://velog.io/@sj_dev_js/Next.js-에-대한-거의-모든-것" data-rh="true">
<meta property="og:type" content="article" data-rh="true">
<meta property="og:title" content="Next.js 에 대한 거의 모든 것" data-rh="true">
<meta property="og:description" content="Next.js 에 대해 있을 건 다 있고 없을 건 없는 문서. 목차가 어마어마하니 주의 하세요." data-rh="true">
<meta property="og:image" content="https://velog.velcdn.com/images/sj_dev_js/post/f1ba1d3c-ee11-4048-ad34-e8fc1b7e0b35/image.png" data-rh="true">

<meta name="twitter:card" content="summary_large_image" data-rh="true">
<meta name="twitter:title" content="Next.js 에 대한 거의 모든 것" data-rh="true">
<meta name="twitter:description" content="Next.js 에 대해 있을 건 다 있고 없을 건 없는 문서. 목차가 어마어마하니 주의 하세요." data-rh="true">
<meta name="twitter:image" content="https://velog.velcdn.com/images/sj_dev_js/post/f1ba1d3c-ee11-4048-ad34-e8fc1b7e0b35/image.png" data-rh="true">

      트위터 카드

      트위터 카드는 140자까지 쓸 수 있는 트위터의 제약을 확장할 수 있는 기능으로, 트위터 내에서 링크를 공유할 때 그 링크에 대한 추가적인 글과 이미지를 미리보기처럼 보여줍니다.

      카드 타입 기능
      Summary 기본형, 제목, 설명, 섬네일 포함
      Summary + Large image 기본형, 이미지 강조
      Player 비디오나 오디오 같은 미디어 포스팅 기능
      App 애플리케이션 다운로드 기능

      트위터 카드를 사용하기 위해서는 해당 웹 페이지에 메타 태그를 등록해야 합니다. 트위터에 웹 페이지의 링크가 공유되었을 때 트위터 카드에 사용할 정보가 담긴 데이터입니다.

       

      메터 태그의 종류와 기능은 다음과 같습니다.

      메타 태그 기능
      Twitter:card Summary, photo. Player의 값
      Twitter:url 트위터 카드를 사용하는 URL
      Twitter:title 카드에 나타날 제목
      Twitter:description 카드에 나타날 요약 설명
      Twitter:image 카드에 보여줄 이미지 
      <!-- Summary -->
<head>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content="@website username"/>
    <meta name="twitter:title" content="example title"/>
    <meta name="twitter:description" content="example description"/>
    <meta name="twitter:image" content="https://www.example.com/exmaple.png/"/>
</head>
      <!-- Summary + Large Image -->
<head>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:site" content="@website username"/>
    <meta name="twitter:title" content="example title"/>
    <meta name="twitter:description" content="example description"/>
    <meta name="twitter:image" content="https://www.example.com/exmaple.png/"/>
</head>
      <!-- Player -->
<head>
    <meta name="twitter:card" content="player"/>
    <meta name="twitter:site" content="@website username"/>
    <meta name="twitter:title" content="example title"/>
    <meta name="twitter:player" content="HTTPS URL to iFrame player"/>
    <meta name="twitter:player:width" content="0000"/>
    <meta name="twitter:player:height" content="0000"/>
    <meta name="twitter:image" content="https://www.example.com/exmaple.png/"/>
    <meta name="twitter:image:alt" content="example image alt text"/>
</head>

      캐노니컬 태그

      캐노니컬 태그란 rel=”canonical” 이라는 속성을 가진 HTML의태그를 뜻합니다. 웹 페이지 HTML 코드에 캐노니컬 태그를 지정하면 검색엔진 크롤러에 선호 URL이 무엇인지 명시하는 역할을 합니다. 이 태그는 현재 웹 페이지의 대표 URL 주소를 검색엔진에 알려줍니다. 이것을 URL 표준화라고 합니다.

       

      검색엔진의 크롤러는 똑똑하지만 완벽하지는 않아 중복되는 내용을 가진 여러 페이지를 세세히 구분하지는 못합니다. 만약 동일한 내용의 페이지가 여러개 URL을 가진다면 본래의 URL을 알기 어렵습니다. 그렇기 때문에 웹 사이트 운영자는 검색되길 원하는 하나의 URL 주소를 설정해야 합니다.

      예시

       

      다음 매거진과 같이 ?ac=ge587glq 등의 query string이 붙는 경우, 검색 엔진의 색인 작업이 도움이 되지 않는다.

      https://example.com/photos/155?ac=ge587glq 
      https://example.com/photos/155

      따라서 해당 URL 에 대표 URL을 적용하기 위해서는 캐노니컬 태그를 적용해야 한다

      <Helmet>
    <link rel="canonical" href="https://example.com/photos/155"/>
</Helmet>
      저작자표시

      'Book Study' 카테고리의 다른 글

      트래픽을 쓸어 담는 검색엔진 최적화 - chapter 5, 온서프 SEO  (0) 2022.10.02
      트래픽을 쓸어 담는 검색엔진 최적화 - chapter 4, 콘텐츠 SEO  (0) 2022.10.02
      트래픽을 쓸어 담는 검색엔진 최적화 - chapter 2, 다양한 SEO 캠페인  (0) 2022.09.28
      트래픽을 쓸어 담는 검색엔진 최적화 - chapter 1, SEO를 하는 이유  (0) 2022.09.28
      모던 자바스크립트 Deep Dive - 제너레이터와 async - await  (0) 2022.09.03

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바