이번시간에는 메타 태그에 대해서 알아보겠습니다.
메타라고 하는것은 어떤 데이터가 있으면 그 데이터를 설명하는 것을 메타 데이터라고 합니다. 그래서 예를 들면 html에 있는 태그들은 그 태그가 감싸고 있는 컨텐츠를 설명한다는 점에서 meta data라고 할 수 있겠죠.
자 그런데 우리가 웹페이지를 만들면 그 웹페이지 전체를 설명하는 정보를 필요로 하는 경우가 있어요. 예를 들면 그 웹페이지의 제목이 무엇인지? 이런 것들도 meta Data죠. 이것을 title이라고 하는 태그로 하는 것이고, 이 웹페이지의 저자는 누구인가? 또 이 웹페이지는 어떤 내용을 담고 있는가? 에 대한 요약, 이 웹페이지에 사용되고 있는, 이 웹페이지를 검색할 때 사용할 수 있는 키워드는 무엇이 있는가? 이러한 정보들은 글의 본문에 표현되진 않지만, 그 웹페이지 또는 글의 본문을 설명하는 상당히 중요한 정보들이라고 할 수 있습니다. 왜냐면 그러한 정보들을 통해서 검색이나 분류 등을 할 수 있기 때문이죠. 바로 그때 사용하는 태그가 meta 태그 입니다.
이번 시간에는 meta 태그에 대해서 알아보도록 하겠습니다.
<meta charset="utf-8">
meta 태그에 charset이라고 하는 것의 속성값으로 'utf-8'이라고 주었습니다. 컴퓨터에 저장할 때 인코딩 방식을 "utf-8" 으로 하겠다는 것입니다.
<meta name="description" content="meta소개페이지">
화면에 표시되지는 않지만 요약된 자료로 사용될 수 있고, 검색엔진에서 요약자료로 사용될 가능성이 상당히 높습니다.
<meta name="keywords" content="코딩,coding,프로그래밍,html,css,javascript">
웹페이지를 잘 설명하는 키워드를 적어 둘 수도 있습니다. 검색엔진에서 쪼개서 알아서 사용할 수 있습니다.
<meta name="author" content="blockmeta" >
저자를 표시할 수 있습니다.
<meta http-equiv="referesh" content="30" >
이 페이지는 30초 간격으로 자동 refresh가 됩니다.
OG (Open Graph)
콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것
사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리보기 화면을 생성해 준다.
태크사용법
이미지의 경우 최소한 600 x. 315픽셀은 되어야 하며, 1200 x 630 픽셀 크기를 권장
기본적으로 웹에 설정해줘야 하는 og 메타태그
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US"> <!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Naver블로그, 카카오톡 미리보기 설정
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" />
트위터 미리보기 설정
<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />
<meta name="twitter:title" content="콘텐츠 제목" />
<meta name="twitter:description" content="웹페이지 설명" />
<meta name="twitter:image" 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="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" />
<meta property="al:web:url" content="안드로이드 앱 URL" />
Reference
https://www.youtube.com/watch?v=zO5zHxX2lNI
https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
댓글