메타태그 재입문 ~ OGP를 설정해 보자! ~
소개
메타 태그 설정을 생각한 적이 있습니까?
컨텐츠의 외형이나 움직임에 의식이 가 버려, 메타 태그는 초기 설정 그대로라든지 있다고 생각합니다!
이번에는 그런 메타 태그에 초점을 맞추고 해설했습니다!
동영상으로 확인하고 싶은 분은 이쪽을 부디!
【YouTube 동영상】 다시 공부하는 HTML의 Meta 태그의 세계.
필수 항목
유무를 말하지 않고 설정을 하는 것이 좋은 항목을 소개합니다!
메타태그 이외도 포함되어 있습니다.
기본 언어
우선 메타 태그는 아니지만 ... 언어 설정은합시다!
<html lang='ja'>
title 태그
검색 결과에 표시되는 부분이므로 설정해 둡시다!
<title>Yassun</title>
키워드
검색으로 히트할지 여부가 바뀌므로 설정합시다!
<meta name='keywords' content='Yassun, YouTube'>
description
검색할 때 제목 아래에 표시되는 항목입니다.
사이트 설명을 작성!
<meta name='description' content='ほげほげー'>
charset
charset은 깨지지 않도록 utf-8을 설정합시다!
<meta charset='utf-8'>
viewport
장치의 크기가 변경되어도 올바르게 표시되도록 viewport를 설정해 둡시다!
CSS 미디어 쿼리와 결합하면 보다 유연하게 디스플레이를 변경할 수 있습니다.
<meta name='viewport' content='width=device-width, initialscale=1'>
OGP
OGP는 링크를 붙일 때 제목, 이미지, 개요를 표시하는 표준입니다!
↓이런 느낌입니다.
Twitter나 다른 사이트에서도 똑같이 보이게 하려면 링크 원본 사이트에서 OGP를 설정해야 합니다.
덧붙여서 Qiita에서는 다음과 같이 설정되어 있습니다 (검증 도구로 볼 수 있습니다).
내 사이트에서 설정하는 방법
메타 태그를 추가하기 때문에 간단합니다!
예를 들면 다음과 같이 설정합니다.
컨텐츠 타입은 웹사이트라면 website, 기사라면 article등으로 설정합니다.
Qiita는 article을 설정하고 있네요.
<meta property='og:type' content='<コンテンツタイプ>'>
<meta property='og:title' content='<タイトル>'>
<meta property='og:description' content='<概要>'>
<meta property='og:url' content='<サイトURL>'>
<meta property='og:image' content='<画像URL>'>
<meta property='og:title' content='<タイトル>'>
다만, twitter로 표시할 때는 특수로, 별도 이하와 같이 설정할 필요가 있습니다.
card의 표시 형식은 card_image, summary, player 등이 있습니다.
Qiita는 summary_large_image를 사용합니다.
<meta name='twitter:card' content='<cardの表示形式>'>
<meta name='twitter:site' content='<twitterのアカウント名>'>
OGP Checker
실제 설정 후 확인은 OGP Checker를 사용합니다.
Facebook의 경우 다음
htps : //에서 ゔぇぺぺrs. 후세보오 k. 이 m/과 ls/데부 g/
Twitter의 경우는 아래에서 확인할 수 있습니다.
htps : // 또는 rds-에서 v. 라고 r. 이 m / ゔ ぃ이면 r
필수는 아니지만, 그 밖에도 메타태그 있어!
그 외에도 전화번호를 자동 인식하기 위한 메타태그
<meta name='format-detection' content='telephone=no'>
안드로이드에서 볼 때 테마 색상을 지정할 수있는 메타 태그
<meta name='theme-color' content='#FFFFFF'>
등이 있습니다.
동영상에서는, 좀 더 예를 내고 있으므로, 신경이 쓰이는 분은 동영상도 확인해 주시면 기쁩니다!
【YouTube 동영상】 다시 공부하는 HTML의 Meta 태그의 세계.
요약
이번에는 무시하기 쉬운 메타 태그에 대해 소개했습니다!
꼭, Body 태그내뿐만 아니라, 메타 태그의 것도 신경 써 주시면 기쁩니다!
Reference
이 문제에 관하여(메타태그 재입문 ~ OGP를 설정해 보자! ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yassun-youtube/items/7becef19cdbd5fac752b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
유무를 말하지 않고 설정을 하는 것이 좋은 항목을 소개합니다!
메타태그 이외도 포함되어 있습니다.
기본 언어
우선 메타 태그는 아니지만 ... 언어 설정은합시다!
<html lang='ja'>
title 태그
검색 결과에 표시되는 부분이므로 설정해 둡시다!
<title>Yassun</title>
키워드
검색으로 히트할지 여부가 바뀌므로 설정합시다!
<meta name='keywords' content='Yassun, YouTube'>
description
검색할 때 제목 아래에 표시되는 항목입니다.
사이트 설명을 작성!
<meta name='description' content='ほげほげー'>
charset
charset은 깨지지 않도록 utf-8을 설정합시다!
<meta charset='utf-8'>
viewport
장치의 크기가 변경되어도 올바르게 표시되도록 viewport를 설정해 둡시다!
CSS 미디어 쿼리와 결합하면 보다 유연하게 디스플레이를 변경할 수 있습니다.
<meta name='viewport' content='width=device-width, initialscale=1'>
OGP
OGP는 링크를 붙일 때 제목, 이미지, 개요를 표시하는 표준입니다!
↓이런 느낌입니다.
Twitter나 다른 사이트에서도 똑같이 보이게 하려면 링크 원본 사이트에서 OGP를 설정해야 합니다.
덧붙여서 Qiita에서는 다음과 같이 설정되어 있습니다 (검증 도구로 볼 수 있습니다).
내 사이트에서 설정하는 방법
메타 태그를 추가하기 때문에 간단합니다!
예를 들면 다음과 같이 설정합니다.
컨텐츠 타입은 웹사이트라면 website, 기사라면 article등으로 설정합니다.
Qiita는 article을 설정하고 있네요.
<meta property='og:type' content='<コンテンツタイプ>'>
<meta property='og:title' content='<タイトル>'>
<meta property='og:description' content='<概要>'>
<meta property='og:url' content='<サイトURL>'>
<meta property='og:image' content='<画像URL>'>
<meta property='og:title' content='<タイトル>'>
다만, twitter로 표시할 때는 특수로, 별도 이하와 같이 설정할 필요가 있습니다.
card의 표시 형식은 card_image, summary, player 등이 있습니다.
Qiita는 summary_large_image를 사용합니다.
<meta name='twitter:card' content='<cardの表示形式>'>
<meta name='twitter:site' content='<twitterのアカウント名>'>
OGP Checker
실제 설정 후 확인은 OGP Checker를 사용합니다.
Facebook의 경우 다음
htps : //에서 ゔぇぺぺrs. 후세보오 k. 이 m/과 ls/데부 g/
Twitter의 경우는 아래에서 확인할 수 있습니다.
htps : // 또는 rds-에서 v. 라고 r. 이 m / ゔ ぃ이면 r
필수는 아니지만, 그 밖에도 메타태그 있어!
그 외에도 전화번호를 자동 인식하기 위한 메타태그
<meta name='format-detection' content='telephone=no'>
안드로이드에서 볼 때 테마 색상을 지정할 수있는 메타 태그
<meta name='theme-color' content='#FFFFFF'>
등이 있습니다.
동영상에서는, 좀 더 예를 내고 있으므로, 신경이 쓰이는 분은 동영상도 확인해 주시면 기쁩니다!
【YouTube 동영상】 다시 공부하는 HTML의 Meta 태그의 세계.
요약
이번에는 무시하기 쉬운 메타 태그에 대해 소개했습니다!
꼭, Body 태그내뿐만 아니라, 메타 태그의 것도 신경 써 주시면 기쁩니다!
Reference
이 문제에 관하여(메타태그 재입문 ~ OGP를 설정해 보자! ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yassun-youtube/items/7becef19cdbd5fac752b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<meta property='og:type' content='<コンテンツタイプ>'>
<meta property='og:title' content='<タイトル>'>
<meta property='og:description' content='<概要>'>
<meta property='og:url' content='<サイトURL>'>
<meta property='og:image' content='<画像URL>'>
<meta property='og:title' content='<タイトル>'>
<meta name='twitter:card' content='<cardの表示形式>'>
<meta name='twitter:site' content='<twitterのアカウント名>'>
그 외에도 전화번호를 자동 인식하기 위한 메타태그
<meta name='format-detection' content='telephone=no'>
안드로이드에서 볼 때 테마 색상을 지정할 수있는 메타 태그
<meta name='theme-color' content='#FFFFFF'>
등이 있습니다.
동영상에서는, 좀 더 예를 내고 있으므로, 신경이 쓰이는 분은 동영상도 확인해 주시면 기쁩니다!
【YouTube 동영상】 다시 공부하는 HTML의 Meta 태그의 세계.
요약
이번에는 무시하기 쉬운 메타 태그에 대해 소개했습니다!
꼭, Body 태그내뿐만 아니라, 메타 태그의 것도 신경 써 주시면 기쁩니다!
Reference
이 문제에 관하여(메타태그 재입문 ~ OGP를 설정해 보자! ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yassun-youtube/items/7becef19cdbd5fac752b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(메타태그 재입문 ~ OGP를 설정해 보자! ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yassun-youtube/items/7becef19cdbd5fac752b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
