OGP 설정 (SNS에서 공유 할 때 보여주는 방법) 및 디버거 정보
계기
일에서도 조금 만지는 기회가 있었지만, 프라이빗 쪽으로 성실하게 설정하게 되었으므로, 조사해 보았습니다.
OGP란?
Open graph protocol의 약자입니다. 여기가 본가의 사이트 입니다.
얼른 페이스 북 등의 SNS에 링크를 얹었을 때 아래와 같이 전용 이미지와 설명문 등을 보여주는 구조입니다.
이것을 잘 이용하여, 상품이나 전단지의 화상·설명을 얹어, 흥미를 더 갖게 하기 쉽다고 하는 치수입니다.
이제 방법이 확립되어 있기 때문에, HP가 EC 사이트 나름을 만들었을 경우는 더 이상 필수라고 할 수 있을지도 모릅니다.
샘플 소스
여기에서는 facebook과 twitter card에 대한 샘플을 제공합니다.
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="http://examle.com">
<meta property="og:title" content="">
<meta property="og:description" content="home">
<meta property="og:image" content="http://examle.com/sample.png">
<meta property="fb:app_id" content="[15桁の数字]" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@[ツイッターのアカウント名]">
<meta name="twitter:title" content="home" />
<meta name="twitter:description" content="説明文" />
<meta name="twitter:image" content="http://example.com/test.png" />
</head>
LINE도 og:xxx에 대응하고 있으므로, 상기의 설정으로 갈 수 있는 것 같습니다.
디버거 사이트
설정한 것에 의해, 실제로 어떤 식으로 보이는지를 확인하려면, 디버거 사이트가 편리합니다.
설정 부족이 있는 경우는 그것도 경고해 주므로, 그 의미로 매우 고맙습니다.
사용하기 위해서는 각각 facebook, twitter에 로그인이 필요합니다.
Open graph protocol의 약자입니다. 여기가 본가의 사이트 입니다.
얼른 페이스 북 등의 SNS에 링크를 얹었을 때 아래와 같이 전용 이미지와 설명문 등을 보여주는 구조입니다.
이것을 잘 이용하여, 상품이나 전단지의 화상·설명을 얹어, 흥미를 더 갖게 하기 쉽다고 하는 치수입니다.
이제 방법이 확립되어 있기 때문에, HP가 EC 사이트 나름을 만들었을 경우는 더 이상 필수라고 할 수 있을지도 모릅니다.
샘플 소스
여기에서는 facebook과 twitter card에 대한 샘플을 제공합니다.
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="http://examle.com">
<meta property="og:title" content="">
<meta property="og:description" content="home">
<meta property="og:image" content="http://examle.com/sample.png">
<meta property="fb:app_id" content="[15桁の数字]" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@[ツイッターのアカウント名]">
<meta name="twitter:title" content="home" />
<meta name="twitter:description" content="説明文" />
<meta name="twitter:image" content="http://example.com/test.png" />
</head>
LINE도 og:xxx에 대응하고 있으므로, 상기의 설정으로 갈 수 있는 것 같습니다.
디버거 사이트
설정한 것에 의해, 실제로 어떤 식으로 보이는지를 확인하려면, 디버거 사이트가 편리합니다.
설정 부족이 있는 경우는 그것도 경고해 주므로, 그 의미로 매우 고맙습니다.
사용하기 위해서는 각각 facebook, twitter에 로그인이 필요합니다.
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="http://examle.com">
<meta property="og:title" content="">
<meta property="og:description" content="home">
<meta property="og:image" content="http://examle.com/sample.png">
<meta property="fb:app_id" content="[15桁の数字]" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@[ツイッターのアカウント名]">
<meta name="twitter:title" content="home" />
<meta name="twitter:description" content="説明文" />
<meta name="twitter:image" content="http://example.com/test.png" />
</head>
설정한 것에 의해, 실제로 어떤 식으로 보이는지를 확인하려면, 디버거 사이트가 편리합니다.
설정 부족이 있는 경우는 그것도 경고해 주므로, 그 의미로 매우 고맙습니다.
사용하기 위해서는 각각 facebook, twitter에 로그인이 필요합니다.
facebook의 경우
트위터의 경우
이미지 크기
각 공식 사이트에는 이미지 크기의 최대 및 최소 사양이 있습니다.
meta 태그에 설정한 것이 그 조건에 맞지 않는 경우, 그 페이지내에서 조건에 일치하는 화상이 아무것도 표시되는 것 같습니다. (아마도 첫 분?)
예를 들어 facebook의 경우 200x200이 최소입니다.
og:image로 지정한 이미지의 크기가 100×100이면 조건에 맞지 않으므로 표시되지 않습니다.
그러면 해당 페이지의 img 태그 중 200x200을 초과하는 것이 표시되는 것 같습니다. 크롤러가 처음 발견한 것일지도 모르지만 조금 규칙을 읽을 수 없습니다.
참고 사이트
Reference
이 문제에 관하여(OGP 설정 (SNS에서 공유 할 때 보여주는 방법) 및 디버거 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/n_slender/items/93f0f952e37c8144227d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
