참고
open graph 태그에 대해 알아보자
Open Graph 메타태그?
Open Graph Meta Tags: Everything You Need to Know
Meta Tags for SEO: A Simple Guide for Beginners
A Guide to Sharing for Webmasters(Facebook for Developers)

meta tag란

메타 태그(meta tag) 혹은 메타 엘리먼트(meta element)란, 웹페이지에 대한 메타데이터(ex.검색 결과에서 보여지기를 바라는 제목, 설명, 이미지 등)를 제공하기 위한 HTML, XHTML의 <meta ...> 형태의 태그를 의미한다. 메타 데이터란, 데이터에 대한 데이터(정보)를 말한다.

<!-- redkiwiapp.com's meta tags -->
<!-- <title>RedKiwi - YouTube-based English Trainer</title> -->
<meta charSet="utf-8" class="jsx-1946936842"/>
<meta http-equiv="Cache-control" content="public" class="jsx-1946936842"/>
<meta name="viewport" content="width=device-width, initial-scale=1" class="jsx-1946936842"/>
<meta name="theme-color" content="#000000" class="jsx-1946936842"/>
<meta name="robots" content="index,follow"/>
<meta name="googlebot" content="index,follow"/>
<meta name="title" content="RedKiwi, YouTUube-based English Trainer"/>
<meta name="description" content="How could you speak English if you cannot understand it? It&#x27;s time to improve your English listening skills! Try RedKiwi right now :)"/>
<!-- <link rel="canonical" href="https://www.redkiwiapp.com"/> -->

로보트 메타태그의 경우,
색인여부(index/noindex), 링크이동여부(follow/nofollow)를 설정할 수 있다.

• index: 크롤러에게 웹 페이지를 읽어가서 색인하도록 허락
• noindex: 크롤러에게 웹 페이지를 읽어가지 않도록 설정
• follow: 크롤러에게 페이지 내의 링크로 연결된 웹 페이지로 이동하는 것을 허락
• nofollow: 크롤러에게 페이지 내의 링크로 연결된 웹 페이지로 이동을 허락하지 않음

meta tag 유의사항

https://blog.spotibo.com/meta-description-length/

• title
  페이지마다 고유하고 명확한 title사용하기
  네이버 - 15자 이내
  구글 - 50-60자 이내

• description
  해당 페이지에 대한 간략한 설명(요약). 사용자들이 해당 페이지를 클릭하도록 유도할 수 있는 설명을 제시할 것.
  네이버 - 45자 이내
  구글 - 160자에서 320자로 늘렸지만 모바일의 경우 120자에서 끊김.

• canonial (참고: 표준 URL 설정하기)

<link rel="canonical" href="https://redkiwiapp.com" />

Open Graph Tag란

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.

페이스북의 오픈 그래프 프로토콜은 HTML문서의 메타데이터를 표기하는 비교적 통일되고 안정된 방법 중 하나로서, 보통 공유된 링크에 생기는 미리보기 제목, 설명, 이미지 등이 오픈 그래프 태그의 내용을 포함한다. 페이스북 뿐만 아니라, 트위터, 링크드인, 카카오, 네이버 등에서 사용되고 있다.

Example

Facebook은 17개의 og tags를 제안하고 있는데, 모두 사용할 필요는 없지만 다음의 5가지는 Facebook이 페이지를 이해하는 데 도움이 되는 기본 태그이며, 필요에 따라 아래 두가지 정도 더 추가할 수 있다.

<!-- 출처: https://developers.facebook.com/docs/sharing/webmasters/-->
<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

<meta property="fb:app_id" content="your_app_id" />
       
<meta property="og:type"               content="article" />
<meta property="og:locale" content="en-US" />

<!-- example og tags for redkiwiapp.com -->
<meta property="og:url" content="https://redkiwiapp.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="RedKiwi, YouTube-based English Trainer" />
<meta property="og:description" content="How could you speak English if you cannot understand it? It's time to improve your English listening skills! Try RedKiwi right now :)" />
<meta property="og:image" content="redkiwi.jpg" />

og:url 의 경우 canonical tag와 유사한 기능을 수행.

link rel="canonical" will be used by search engines where as og:url will be used by facebook. og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"
https://stackoverflow.com/a/21113676

Open Graph의 작동원리

Open Graph 적용 여부 확인: Facebook sharing debugger(공유 디버거)

https://developers.facebook.com/tools/debug/

다이나믹 og tag?

https://stackoverflow.com/a/34284383
페이스북은 javascript를 파싱하지 않기 때문에 다이나믹 태그를 위해 javascript를 사용할 수는 없다. 하지만 다이나믹 태그를 위한 방법이 아예 없는 것은 아니다.

다이나믹 og tag 설정방법
https://www.michaelbromley.co.uk/blog/enable-rich-social-sharing-in-your-angularjs-app/
http://www.webpaper.kr/show/92

트위터 카드(twitter cards)

참고: 트위터 카드 개발자 문서, twitter cards 사용하기

트위터 카드는 트위터의 트윗에서 페이스북의 오픈 그래프 태그와 유사한 동작을 한다.

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website.

next-seo를 사용하는 경우에는 twitter:title, image, description은 중복을 방지하기 위해 생략하고 나머지 메타 태그들만 추가한다.

A note on Twitter Tags
Twitter will read the og:title, og:image and og:description tags for their card. next-seo omits twitter:title, twitter:image and twitter:description to avoid duplication.

<!-- example twitter cards tags for redkiwiapp.com -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="RedKiwi, YouTube-based English Trainer" />
<meta name="twitter:description" content="How could you speak English if you cannot understand it? It's time to improve your English listening skills! Try RedKiwi right now :)" />
<meta name="twitter:image" content="redkiwi.jpg" />

트위터 카드 Validator

https://cards-dev.twitter.com/validator
트위터 카드의 메타 태그들이 제대로 작동하는지 확인할 수 있음

더 고려할 사항

트위터 카드 - 앱 카드 -> 바로 다운로드 버튼을 만들 수 있음!!

소셜 미디어 분석을 위한 태그

social media analytics

<!-- meta tag for Facebook Domain Insights -->
<meta property="fb:app_id" content="your_app_id" />

<!-- meta tag for Twitter Card Analytics -->
<meta name="twitter:site" content="@website-username">

해당 분석툴을 사용하지 않을 경우에는 생략해도 된다.

구글 검색결과 제목과 설명(스니펫) 구성

구글에서 인식하는 특수태그
검색결과에 적절한 제목과 스니펫 만들기(중요!)

하이네이티브와 케이크 비교해보기
궁금증1. 구글 검색에 그냥 meta tag정보가 반영되는지, og정보가 반영되는지
-> 구글 공식문서에 따르면 <og:description .../> 이 아니라 <meta name=description ... />의 내용이 반영됨. -> 근데 케이크를 보면 og title이 반영되고 있는듯..? (구글 뿐만 아니라 카카오, 페이스북 모두 캐시를 삭제하고 다시 크롤링을 해야 새로운 변경사항이 적용된다! 케이크는 왜그런지 모르겠지만 레드키위닷컴 웹사이트만 제대로 작동하면 된다!)
궁금증2. 왜 케이크는 설명이 구글 페이지에 제대로 반영되지 않는지

하이네이티브, 케이크, 레드키위 비교하기

<!-- HiNative -->
<title>HiNative | 외국어 학습자를 위한 Q&amp;A 커뮤니티.</title>
<meta name="description" content="HiNative는 전세계의 원어민들에게 언어와 문화에 대해 질문할 수 있는 글로벌 Q&amp;A 플랫폼입니다. 110개 이상의 언어를 지원합니다.">
<meta property="og:title" content="HiNative | 외국어 학습자를 위한 Q&amp;A 커뮤니티.">
<meta property="og:description" content="HiNative는 전세계의 원어민들에게 언어와 문화에 대해 질문할 수 있는 글로벌 Q&amp;A 플랫폼입니다. 110개 이상의 언어를 지원합니다.">

<!-- Cake -->
 <title>Cake - 신개념 무료 영어학습</title>
 <meta name="description" content="트렌디한 영상으로 공부하는 살아있는 영어!"/>
 <meta property="og:title" content="신개념 무료 영어학습, 케이크!"/>
 <meta property="og:description" content="트렌디한 영상으로 공부하는 살아있는 영어!"/>

<!-- -->

Next-seo로 meta tags, open graph tags, twitter cards tags 적용하기

Next-seo 적용하기 참고

참고

카카오톡 Open Graph 캐시 삭제
https://developers.kakao.com/tool/clear/og

메타태그들을 한번에 테스트할 수 있는 사이트
https://metatags.io/