セマンティック・ウェブの一つに、構造化データというものがあります。構造化データを記載することで、データの「意味」を、クローラー等に分かりやすく伝えることができます。
場合によっては SEO 対策にもなります。例えば、Google で検索した時に下記のような「リッチスニペット」と呼ばれるものが出てくることがありますが、これは JSON-LD の構造化データを使用しています。
構造化データにもいくつか種類がありますが、今回は JSON-LD に対応してみました。
手法としては、React Helmetで動的にこれらのデータを埋め込んでみました。 React Helmet は、Head タグ内のデータを動的に生成してくれる便利な React コンポーネントです。
今回は各ページに Helmet を設置し、それぞれ適切な情報を出力しています。 （まったく動的になっていないので、改善の余地があります）
<Helmet
script={[
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'http://schema.org',
'@type': 'Corporation',
name: 'Yuuniworks',
url: 'http://www.yuuniworks.com/',
logo: 'https://www.yuuniworks.com/images/logo_for_schema.png',
address: {
postalCode: '697-0000',
addressCountry: 'JP',
addressRegion: '島根県',
addressLocality: '松江市',
streetAddress: '殿町1番地',
},
contactPoint: [
{
'@type': 'ContactPoint',
telephone: '+81-90-1234-5678',
contactType: 'sales',
},
],
founder: {
'@type': 'Person',
givenName: '太郎',
familyName: '山田',
},
foundingDate: '2018-4-11',
description:
'島根県浜田市を拠点に、主にフロントエンド開発のお手伝いをしているフリーランスエンジニアです。',
sameAs: ['https://www.facebook.com/yuuniworks/'],
}),
},
]}
/><script type="application/ld+json" data-react-helmet="true">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://www.yuuniworks.com/blog/2018-04-09-JAMStackなWebサイトの作成/"
},
"headline": "JAM StackなWebサイトの作成",
"image": [
"https://www.yuuniworks.com../../static/blogImages/20180409.png"
],
"datePublished": "2018-04-09T15:00:00+09:00",
"dateModified": "2018-04-16T17:00:00+09:00",
"author": {
"@type": "Person",
"name": "Shota Tamura"
},
"publisher": {
"@type": "Organization",
"name": "Yuuniworks",
"logo": {
"@type": "ImageObject",
"url": "https://www.yuuniworks.com/images/logo_for_schema.png"
}
},
"description": "JS+API+Markupで構成されるサーバレスな枠組みで、自社のWebサイトを構築してみました。"
}
</script>