あなたがあなたのGatsbyブログのために知っている必要があるすべて

18547 ワード
react gatsby blog テキストリンク
あなたが世界にあなたのギャツビーのブログを共有するとき、あなたは良い第一印象を与えることを確認したいと思います.With react-helmet そして、メタタグ、私たちはあなたのポストがこのようにGoogleで現れるのを確実にすることができます:

そしてTwitterでこんな風に

メタタグとは


メタタグはすべてのWebページのヘッダーに住んでいます.
<html>
    <head>
        <title>Emma Goto</title>
    </head>
</html>
これは、Google、Twitterや他のサイトは、あなたのウェブサイトのプレビューをレンダリングするときに使用されます.
あなたのメタタグを右に得ることは重要です、あなたがユーザーにリンクをクリックして欲しいので!彼らは、それが派手なイメージまたは関連説明からであるかどうかにかかわらず、彼らが彼らを陰謀的に見るならば、彼らはこれをする傾向があります.

ギャツビーのための反応ヘルメットプラグインをインストールしてください


Gatsbyブログのメタタグから始めるには、インストールする必要がありますgatsby-plugin-react-helmet .
あなたのようなテンプレートを使用してブログを作成する場合gatsby-starter-blog , おそらくこのプラグインがインストールされているでしょう.
そうでない場合は、次のコマンドを実行します.
yarn add gatsby-plugin-react-helmet
// or
npm install gatsby-plugin-react-helmet
それから、プラグインのリストに追加してください.
// gatsby-config.js
const config = {
    plugins: [
        // ... all your other plugins
        'gatsby-plugin-react-helmet',
    ]
}

コンポーネントを作成する


プラグインをインストールした後、あなたの反応するヘルメットコンポーネントを作成できます.
// src/components/seo/index.js
import React from 'react';
import Helmet from 'react-helmet';

const SEO = () => (
    <Helmet
        htmlAttributes={{
            lang: 'en',
        }}
    />
);
必ずあなたのブログのすべてのページにこのコンポーネントをレンダリングしてください!

小道具を渡してusestaticqueryフックを使ってください


メタタグから始める前に、ポストタイトルとスラッグのように、関連するデータを小道具として渡すことを確認します.
const SEO = ({ description, title, slug }) => {
また、使用することができますuseStaticQuery フックのサイトのメタデータを取得します.
// src/components/seo/index.js
import { useStaticQuery, graphql } from 'gatsby';

const SEO = ({ description, title, slug }) => {
    const { site } = useStaticQuery(
        graphql`
            query {
                site {
                    siteMetadata {
                        title
                        description
                        author
                        siteUrl
                    }
                }
            }
        `,
    );
これは、設定ファイルに保存されているサイトメタデータをすべて取得します.
// gatsby-config.js
const config = {
  siteMetadata: {
    title: `Emma Goto`,
    description: `Front-end development and side projects.`,
    author: `Emma Goto`,
    siteUrl: `https://www.emgoto.com`,
  },
  // ...
}

ページのタイトルの追加


今、我々は情報の最も重要な部分から始めることができます-あなたのページのタイトル.これは、あなたのブラウザのページのタイトルとして見るものと同様に、Googleであなたのポストのタイトルとして現れるものです.
<Helmet
    title={title}
    titleTemplate={`%s · ${site.siteMetadata.title}`}
    defaultTitle={site.siteMetadata.title}
/>
私たちがここで通ることができる3つの別々のタイトル小道具があります.論理は以下の通りです.
  • If the title 値が存在する場合、titleTemplate 値
  • そうでなければ、それは戻ってdefaultTitle 値
    • 私のブログを例として、ブログ記事のページにあるならばtitle 小道具として.私のタイトルは次のようになります.
    Name of the blog post · Emma Goto
    私がホームページにいるならばtitle 値は未定義で、代わりにdefaultTitle を使用します.
    Emma Goto

    ページの説明の追加


    あなたのタイトルの後、2番目に重要なことはあなたの説明です.これはGoogle検索結果のタイトルの下に表示できるものです.
    タイトルと同様に、私は私のポスト(propとして渡される)に特有の記述を持っています、あるいは、私は私のデフォルト記述を示します:
    <Helmet
    //...
    meta={[
        {
            name: 'description',
            content: description || site.siteMetadata.description,
        },
    ]}
/>

    ポストの説明を得る


    あなたの記事の特定の説明をしたい場合は、手動でそれらを書くことができますし、ポストのフロント問題に格納します.
    あなたがカスタム説明なしでポストの巨大なバックログを持っているか、あなた自身で彼らを記述したくないならば、各々のポストの最初の140文字は、Aexcerpt 値
    query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      excerpt
      frontmatter {
        slug
        title
      }
    }
}

    オープングラフメタタグの追加


    ソーシャルメディア固有のメタタグを追加するにはOpen Graph メタタグ.これらのメタタグはもともと作成され、Facebookによって使用されますが、今もTwitterのような他のソーシャルメディアサイトで使用されます.
    {
    property: `og:title`,
    content: title || site.siteMetadata.title,
},
{
    property: 'og:description',
    content: description || site.siteMetadata.description,
},
{
    property: `og:type`,
    content: `website`,
},
    あなたがこれらを使わないならば、ソーシャルメディアサイトはあなたのデフォルトタイトルと説明値に戻るかもしれません.しかし、私はちょうど安全な側にあるように、彼らを含みます.

    You’ll notice that we are using property instead of name for the meta tag name here. This is something you’ll need to do specifically when using Open Graph meta tags.


    Twitter固有のメタタグの追加


    デフォルトでは、Twitterはオープングラフのメタタグを使用します.しかし、あなたがTwitterのためだけに特定のメタタグを持っていたいならば、Twitterはまた、開いたグラフものを越えるでしょう
    {
    name: 'twitter:title',
    content: title || site.siteMetadata.title,
},

    私はTwitterを作成する必要があります：作成者とTwitter：サイトメタタグ？


    出会ったのかもしれないtwitter:site and twitter:creator :
    {
    name: `twitter:creator`,
    content: '@emma_goto',
},
{
    name: `twitter:site`,
    content: '@emma_goto',
},
    過去には、Twitterのリンクプレビューは、あなたのTwitterのハンドルが含まれますが、私が言うことができる限り、これらの値はもはや使用されていません.
    メタタグはまだドキュメントに記載されています.ですから、まだそれらをインクルードしたいなら、そうするために傷つけません.

    あなたのリンクプレビューにイメージを加えること


    Twitterでブログのリンクを共有する際にイメージを追加するには、オープングラフのイメージメタタグが必要です.
    {
    property: 'og:image',
    content: 'image-url-here',
},
    Twitterのリンクプレビュー画像を2つの方法でレンダリングできます.240 x 240の正方形のイメージのいずれかです.

    閉じるこの動画はお気に入りから削除されています.
    ときに画像を選択すると、また、Twitterはあなたが使用しているサイズを知っているようにする必要があります.大きなイメージでは、次のようにする必要があります.
    {
    name: 'twitter:card',
    content: 'summary_large_image',
},
    そして、小さい、正方形のイメージのために、あなたはこれを加える必要があります:
    {
    name: 'twitter:card',
    content: 'summary',
},

    プロのヒント：カバーイメージ


    あなたがあなたのGatsbyポストに転勤するならば、あなたはDEVで使われる1000 x 420カバーイメージを提供することができます.
    あなたのDEVポストがTwitterで共有されるならば、この同じイメージは使われます－そして、Twitterイメージはあなたのdevカバーイメージの端が800 pxの幅を持つので、切られます.あなたのdevカバーイメージが十分な量のパディングを両側に持っていることを確認したいので、重要な何もカットされません.
    参考として、これはdevで使用するカバーイメージです.

    faviconの追加


    あなたのウェブサイトの名前の横に表示するアイコンを取得するには、favicon値を含める必要があります.
    import favicon from '../../images/favicon.png';

<Helmet
    link={[
        {
            rel: 'shortcut icon',
            type: 'image/png',
            href: `${favicon}`,
         },
    ]}
/>
    私のfaviconは192 x 192 PNGイメージです.

    どのように、私はGoogle検索結果に現れるために、日付を得ますか？


    あなたがGoogleを検索するときに、いくつかの記事が公開された日付が表示されることに気づいたかもしれません.これは、明示的に制御したり、メタタグを設定することはできません.あなたが明らかに日付をあなたのポストに提出する限り、Googleはそれを拾うことができなければなりません.

    あなたのリンクプレビューをテストするためのツール


    ソーシャルメディアで共有されていればサイトがどのように見えるかをテストしたい場合は、TwitterやFacebookは独自のプレビューツールを提供します.

  • Facebook sharing debugger

    • 結論


    このポストは、あなたのGatsbyブログにメタタグを加えるためにあなたが知っている必要があるすべてを与えなければなりません.私のサイトのSEOコンポーネントの完全なコードを見るにはGithub .
    あなたのSEOのコンポーネント(別のページ上のメタタグの異なるセットのような)に任意のロジックを追加している場合はまた、いくつかの単体テストを追加することをお勧めします!チェックアウトできますthe unit tests for my SEO component いくつかのインスピレーション.
    読書ありがとう!
    初めてのLTで意識したこと、やってよかったこと
    [202-04-12月]TIL