Gatsby에 공유 기능, OGP 태그 추가
소개
이 기사는 htps : // / ch-b ぉg. 요시키 오시시. 에서 v / 포 sts / s rt-tsby-b ぉg - 멋지다 /의 교차 게시물 기사입니다.
이 기사는 Gatsby이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번은 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 가려고 생각합니다.
내용
이번에는 WordPress의 공유 버튼 뭔가 자주 SNS에 공유 버튼과 OGP 설정 태그를 추가하는 방법을 설명합니다.
SNS에 공유 버튼 OGP 설정 태그
SNS 공유 버튼 구현
react-share 설치
매우 간단합니다. 우선 라이브러리를 설치.
yarn add react-share
ShareSns.js의 구성 요소 만들기
적절한 디렉토리를 만들고 (여기에서는 ShareSns라고합니다)
export const ShareSns = ({ articleUrl, articleTitle }) => (
<div className={'ShareSns'}>
<div>
<FacebookShareButton url={articleUrl}>
<FacebookIcon size={32} round />
</FacebookShareButton>
<LineShareButton url={articleUrl}>
<LineIcon size={32} round />
</LineShareButton>
<LinkedinShareButton url={articleUrl}>
<LinkedinIcon title={articleTitle} size={32} round />
</LinkedinShareButton>
<TwitterShareButton title={articleTitle} via="yoshiki__0428" url={articleUrl}>
<TwitterIcon size={32} round />
</TwitterShareButton>
</div>
</div>
);
전화하는 방법
조금 호출하는 방법이 엉망이지만, Gatsby build를 할 때 window.location.href가 미정도리이므로 빌드시에 떨어집니다. 따라서 typeof에서 확인해야합니다.
{typeof window !== 'undefined' && window.location.href &&
<ShareSns articleUrl={window.location.href} articleTitle={title} />
}
혹은 호출전에 undifined 체크를 해 값이 존재하는지 사전에 확인해도 좋다고 생각합니다.
const windowUrl = (typeof window !== 'undefined' && window.location.href) ? window.location.href : '';
이제 아래와 같은 버튼이 표시됩니다. 그 밖에도 다양한 SNS 버튼이 있으므로 사용해 보는 것은 어떻습니까. OGP 설정 태그
react-helmet 설치
대부분의 Template에는 들어 있기 때문에 하지 않아도 좋을지도 모릅니다.
yarn add react-helmet
Meta 태그 전용 구성 요소 만들기
사용법은 간단합니다. Helmet 태그를 만들고 거기에 필요한 Meta 태그를 입력하면 괜찮습니다.
이 예에서는 OG와 Twitter의 OGP를 설정합니다. 호출자는 화상 데이터나 타이틀 데이터를 취득할 수 있는 기사 화면에서 호출하면 좋다고 생각합니다. Template에 의해 설계가 마을이므로 환경에 맞추어 적용해 보세요.
<Helmet>
<html lang="kr" />
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:site_name" content={title} />
<meta property="og:image" content={image} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
</Helmet>
OGP 태그 설정 확인 netlify에 업로드하면 설정할 수 있으면 OK입니다. Slack의 채팅 등에 게시해도 확인할 수 있습니다.
요약
어땠습니까? 상당히 간단하게 설정할 수 있었던 것이 아닐까 생각합니다. 여기등의 기능도 블로그를 한다면 필수이므로 꼭 해 둡시다. 그럼 다음 기사에서.
Reference
이 문제에 관하여(Gatsby에 공유 기능, OGP 태그 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yoshiki-0428/items/797adba9d14666c86e1e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
어땠습니까? 상당히 간단하게 설정할 수 있었던 것이 아닐까 생각합니다. 여기등의 기능도 블로그를 한다면 필수이므로 꼭 해 둡시다. 그럼 다음 기사에서.
Reference
이 문제에 관하여(Gatsby에 공유 기능, OGP 태그 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yoshiki-0428/items/797adba9d14666c86e1e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
