SEOを学ぶならweb.devを読むべし

2020-05-17

Headless CMS(Prismic) + Gatsby + Netlifyでブログを作成した でブログを立ち上げました。

今までアプリケーション開発がメインで、SEOに最適なサイト構成は殆ど考慮したことがなかったので、この機会に web.dev をしっかり読み込みました。結果としてSEOに関する知見が深まったので、記録として残します。

SEO audits

SEO audisではコンテンツをどのように検索エンジンにとって最適化すべきか、大きく4つの項目でまとめています。

13コンテンツありますが、今回はブログを作成する上で修正が必要だった項目に絞ります。

Links do not have descriptive text

リンクされるテキストは、リンク先の内容を表す適切な言葉で表す必要があるということです。

Click here ! Lean more !などの文字にhyperlinkを設定していたりするサイトをみかけますが、これはユーザー・検索エンジンのどちらにも、リンク先の内容が不透明となります。

Tap targets are not sized appropriately

タップ(クリック)する対象が小さすぎるとユーザビリティーが低下するため、対象を一定以上のサイズにする必要があります。

タップする対象そのものの大きさを変えられない場合、paddingを大きくして対処する必要があります。

Document doesn't have a <title> element

seo.jsを適切に入れていないcomponentが理由でした。Prismic + Gatsbyの現状でのハマりどころの1つにuseStaticQueryがサポート未対応で使えないことがあげられます。gatsby newしたプロジェクトで作成されるseo.jsはデフォルトでuseStaticQueryを使っています。これを解決するためにStaticQueryを使い以下の通り修正しました。

import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { StaticQuery, graphql } from "gatsby"

const query = graphql`
query {
prismic {
allHomeimages {
edges {
node {
sns_image
}
}
}
}
site {
siteMetadata {
author
description
siteUrl
title
}
}
}
`

const SEO = ({description, lang, meta, title, url}) => (
<StaticQuery
query={`${query}`}
render={data => {
const imageUrl = data.prismic.allHomeimages.edges[0].node.sns_image.url
const metaDescription = description || data.site.siteMetadata.description
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${data.site.siteMetadata.title}`}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
property: `og:site_name`,
content: data.site.siteMetadata.title,
},
{
property: `og:url`,
content: url,
},
{
property: `og:image`,
content: imageUrl,
},
{
name: `twitter:card`,
content: `summary_large_image`,
},
{
name: `twitter:creator`,
content: data.site.siteMetadata.author,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
].concat(meta)}
/>
)
}
}
/>
)

SEO.defaultProps = {
lang: `ja`,
meta: [],
description: ``,
}

SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}

export default SEO

OGP設定も合わせて行いました。

wwwありwwwなしが与える影響

以下のような2つのURLを想定します。

  • https://www.example.com
  • https://example.com

実はこの2つのURLは正規化を行わなければ別物として扱われてしまします。

URLの正規化(サイトの重複するページの中で Google が最も代表的と考えるページの URL)を行わない場合、サイトへのアクセスや被リンクが分散したり、重複したページのクロールに時間を要するなどの弊害が発生します。(参考: 正規 URL の指定が重要な理由)

重複した複数のページから正規ページを指定するには用途に応じて複数の方法がありますが、今回は3つGatsby + Netlifyで簡単に実行出来る3つをまとめます。

  1. canonicalタグでマッピングする
    canonicalは英語の意味の通り「正規化」となります。canonicalタグを挿入することで、URLを正規化することが出来ます。gatsbyにはgatsby-plugin-canonical-urlsというプラグインがあり、簡単にcanonicalタグを作成しURLの正規化が行えます。
  2. サイトマップを作成して Search Consoleから /sitemap.xmlを送信する
    gatsby-plugin-sitemapを使用することで簡単にサイトマップが作成出来ます。
    作成したサイトマップは /sitemap.xml にアクセスして確認する事が可能です。サイトマップが完成すれば Search Consoleのサイトマップから URLを送信して完了となります。
  3. 301リダイレクトを使用する
    Netlifyでカスタムドメインを使用した場合は実は正規化について特に行うことはありません。デフォルトでwwwありのドメインがプライマリー設定となっており、wwwなしのドメインはリダイレクトされるようになっています。注意が必要なことは、wwwなしのドメインを正規化したい場合は、wwwなしのドメインをプライマリー設定する必要があります。

※gatsby-plugin-canonical-urls, gatsby-plugin-sitemapともに siteUrlの指定は wwwが含まれています。wwwなしで指定したい場合はwwwをsiteUrlに記述してはいけません。

まとめ

ブログを1から構築することで、SEOに関する知見が非常に深まりました。

SSGで何か作りたい場合は、マーケティングの知識も深まるブログサイトは非常にお勧めです。