最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressサイトにGoogle Web Storiesを追加する方法

Instagram、Facebook、Snapchatで、注意を引き付け、訪問者をスクロールさせ続ける魅力的なビジュアルストーリーに気づいたことがあるでしょう。Google Web Storiesを使用すると、この同じタイプの魅力的なコンテンツをWordPressウェブサイトに追加できます。

Google Web Storiesは、オーディエンスとつながるための魅力的な方法を提供します。モバイルフレンドリーな形式で、短いコンテンツ、製品のハイライト、舞台裏の様子などを共有できます。

この記事では、Google Web StoriesをWordPressサイトに追加する簡単な手順を説明します。これにより、訪問者の注意を引き付け、エンゲージさせることができます。

WordPressにGoogle Web Storiesを追加する

この記事では、以下のトピックを扱います。

Google Webストーリーとは何ですか?

Google Web Storiesは、Instagram、Facebook、Snapchat、YouTubeなどのソーシャルメディアプラットフォームで使用されているストーリー形式に似た、人気のショートフォームコンテンツスタイルです。

それらは常に同じ名前で呼ばれるとは限りませんが、すべて同じことをします。

画像、音楽、動画などのリッチメディアコンテンツを備えた、タップ可能でインタラクティブなスライドです。これらの要素すべてが、高いエンゲージメントを生み出します。

Google Webストーリー

Google Web Storiesを使用する理由

Google Web Storiesを使用すると、インタラクティブなストーリー形式を独自のウェブサイトに導入できます。これにより、より多くの制御と柔軟性が得られ、オーディエンスに表示するためにサードパーティプラットフォームのアルゴリズムに依存する必要がなくなります。

以下に、Google Web Storiesを使用するその他の理由をいくつか挙げます。

  • Google Web Storiesを使用すると、ストーリー形式をウェブサイトに導入できます。独自のサイトで、インタラクティブでモバイル対応のストーリーを作成および公開できます。
  • 非常にエンゲージメントが高く、エンゲージメントの高いユーザーは、WordPressウェブサイトでのコンバージョンや滞在時間が増える可能性が高くなります。これは、ビジネスとブランドにとって、より多くの売上、コンバージョン、成長を意味します。
  • AMPフォーマットを使用し、構造化データをサポートしており、Google AdSenseを使用して収益化することも可能です。
  • Google Webストーリーはインデックス化され、Google検索結果やDiscoverに表示される可能性があります。
Google Discoverでのストーリー

それでは、WordPressサイトにGoogle Web Storiesを簡単に追加する方法を見てみましょう。

WordPressにGoogle Web Storiesを追加する方法は?

無料のWeb Storiesプラグインを使用することで、WordPressにGoogle Web Storiesを追加できます。Googleによって作成されたこのプラグインを使用すると、美しいWeb Storiesをデザイン・作成し、サイトに簡単に公開できます。

まず、Web Storiesプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

Web StoriesはGoogleによって開発および保守されている無料のプラグインです。Web Stories形式を普及させ、自己ホスト型の独立したウェブサイトにもたらすことを目的としています。

プラグインのアクティベーション後、Stories » Dashboardページに移動して最初のストーリーを作成します。

ストーリーの開始点としてテンプレートの1つを選択するか、「新しいストーリーを作成」ボタンをクリックして最初から始めることができます。

新しいストーリーを作成

テンプレートから始めることをお勧めします。これにより、良いスタートを切ることができ、初心者にとってずっと簡単になります。

テンプレートを選択すると、プラグインによってストーリービルダーインターフェイスが起動します。これは、WordPressで人気のドラッグアンドドロップページビルダープラグインと同様に機能します。

ストーリービルダー

要素をクリックするだけで編集したり、左側の列から新しい要素を追加したりできます。

音声、動画、画像、テキスト、見出し、ステッカー、絵文字などを追加できます。

ウェブストーリーに要素を追加する

テンプレートを使用している場合、テンプレートによって生成された追加ページが下部に表示されます。

クリックすることでページ間を移動できます。必要に応じてページを削除したり、新しいページを追加したりすることもできます。

ストーリー内のページを管理する

ページをクリックして背景色やメディアを設定することもできます。

ページの背景色を選択する際、コールトゥアクションボタンを追加するオプションも見つかります。

背景色とコールトゥアクションボタン

URLを追加するだけで、ダークまたはライトテーマを選択できます。

オプションで、コールトゥアクションボタンにアイコンを追加し、リンクをスポンサー付き/ノーフォローにすることもできます。

同様に、WooCommerceがインストールされている場合は、商品を表示することもできます。

Webストーリーに商品を追加する

ただし、まずプラグイン設定でWooCommerce連携を有効にする必要があります(記事の後半でその方法を説明します)。

ストーリーに満足したら、左側の列にある「ドキュメント」タブに切り替えて、公開設定を構成できます。

ここから、発行元ロゴ(ウェブサイトのロゴまたはサイトアイコンで問題ありません)とストーリーのポスター画像をアップロードする必要があります。

ドキュメント設定

理想的には、ポスター画像は3:4の比率で、最小640 x 853ピクセルであるべきです。

ストーリーのタイトルと説明を提供することを忘れないでください。これにより、ストーリーのSEOが最適化され、発見性が向上します。

その下で、ページの進め方をどのようにしたいかを選択できます。デフォルトでは、ページは7秒で変更されます。これを変更するか、ユーザーが手動でタップしてページを変更できるようにすることができます。

追加のストーリー設定

最後に、ストーリーのカテゴリとタグを選択できます。

このステップは任意ですが、ストーリーをカテゴリに割り当てたり、タグを追加したりすると、SEOに役立ちます。

ストーリーエディターの右下隅にある「M」というラベルのボタンに気づくでしょう。それをクリックすると、ウェブサイトにインストールされているプラグインによって WordPress に追加されたメタボックスが表示されます。

ストーリーにカスタムメタデータを追加する

たとえば、All in One SEO for WordPressプラグインを使用している場合は、SEO設定が表示されます。

ここから、ウェブストーリーのSEOタイトル、メタディスクリプション、スキーマ設定を入力できます。

WebストーリーにSEOメタデータを追加する

同様に、WPCodeプラグインがインストールされている場合は、このストーリーが表示されたときに実行したいカスタムコードスニペットを追加できます。

これは、ストーリーにカスタムトラッキングピクセルを使用したい場合に便利です。

WPCodeメタボックス

これで、ウェブストーリーを公開する準備が整いました。

画面右上にある「公開」ボタンをクリックするだけです。

ストーリーを公開

公開前のチェックリストが表示されます。すべて問題がなければ、公開ボタンをクリックしてストーリーを公開します。

WordPressでWeb Storyを表示する

このプラグインを使用すると、公開時にストーリーを新しいブログ投稿に追加できます。

ストーリーを投稿またはページに追加する

ただし、ストーリーを既存の投稿、ページ、またはサイドバーに追加することもできます。

ストーリーを表示したい投稿またはページを編集し、投稿エディターにWeb Storiesブロックを追加するだけです。

Webストーリーブロック

ブロック設定の下で、複数のストーリー、最新のストーリー、または単一のストーリーを選択できます。

最新のストーリーまたは複数のストーリーオプションを選択した場合、ストーリーを円形、カルーセル、リスト、またはグリッドで表示するための追加の表示オプションも表示されます。

ストーリーブロックの設定

投稿に満足したら、「更新」または「公開」ボタンをクリックして変更を保存します。

これで、WordPressブログにアクセスして、Web Storiesが実際に機能していることを確認できます。

こちらは、テストサイトのホームページで、複数のストーリーカルーセル形式で表示されたものです。

Web Storiesモバイルプレビュー

Web StoriesはWordPress内の独自のカスタム投稿タイプです。これは、WordPressの他のページや投稿と同じように表示できることを意味します。

たとえば、訪問者のランディングページとして使用できるアーカイブページがあります。または、WooCommerceの商品(これもカスタム投稿タイプを使用して表示されます)のように個別に強調表示することもできます。

Google Web Storiesにインテグレーションを追加する

Web Storiesプラグインには、使用できるいくつかの組み込み連携機能があります。

これらのインテグレーションは、Stories » Settings ページで見つけることができます。

GoogleアナリティクスをWebストーリーに追加する

まず、ここにGoogle AnalyticsプロファイルIDを追加できます。これにより、Google Analyticsレポートでストーリーの表示回数を追跡できます。

Google Analytics測定IDを追加する

MonsterInsightsを使用している場合は、Google AnalyticsのトラッキングIDをInsights » Settingsページで見つけることができます。

測定IDは、ウェブサイトプロフィールセクションに表示されます。

MonsterInsightsでGoogle Analyticsの測定IDを見つける

MonsterInsightsを使用していない場合は、Google AnalyticsでトラッキングIDを見つけることができます。

「管理」タブに移動して「データストリーム」をクリックするだけです。

Google Analytics管理画面

次に、ウェブサイトやその他のプロフィールがデータストリームとして表示されます。

プロフィールをクリックして展開してください。

ウェブサイトプロフィールを選択

次の画面で、測定IDが表示されたウェブサイトのプロファイルが表示されます。

Measurement IDをコピーして、Web Storiesプラグインの設定に貼り付けるだけです。

測定IDをコピー

Web Storiesにカスタムフォントを追加する

Web Storiesで特定のフォントを使用したい場合は、FTPを使用してウェブサイトに手動でアップロードする必要があります。

フォントファイルをウェブサイトの/wp-content/フォルダにアップロードするだけです。アップロード後、アップロードしたフォントの場所は次のようになります。

http://example.com/wp-content/font-file-name.ttf

example.comご自身のドメイン名に、font-file-name.ttfを実際のフォントファイル名に置き換えることを忘れないでください。

その後、このURLを「カスタムフォント」セクションのStories » Settingsにコピー&ペーストします。

カスタムフォントを追加する

Web Storiesでの収益化統合の追加

Web Storiesは、収益化オプションのためにGoogle AdSenseとGoogle Ad Managerをサポートしています。

収益化オプションを選択し、必要な情報を入力するだけです。たとえば、広告ユニットにはPublisher IDとAd Slot IDが必要です。

マネタイズオプション

Web Storiesのeコマース連携を有効にする

WooCommerceまたはShopifyを使用してオンラインストアを運営している場合は、Webストーリーのeコマースサポートを有効にすることができます。

これにより、ウェブストーリーに商品を追加できるようになります。

ストーリー » 設定」ページの「ショッピング」セクションまでスクロールダウンし、ドロップダウンメニューからeコマースプラットフォームを選択するだけです。

WooCommerceのeコマース連携

WooCommerceの場合、プラグインは自動的に製品を表示し始めます。

Shopifyの場合、ストアの住所を提供し、APIアクセストークンを生成する必要があります。

Shopify連携

まだお持ちでない場合は、「取得方法を学ぶ」というリンクをクリックするだけで、Shopify APIトークンを生成する方法の説明が表示されます。

この記事が、Google WebストーリーをWordPressサイトに追加するのに役立ったことを願っています。また、WordPressにTikTok動画を埋め込む方法に関するガイドや、おすすめのWordPressソーシャルメディアプラグインも参照することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

1件のコメント返信する

  1. これらの機能をWordPressサイトに追加したいと思っていました。おかげで、非常に簡単にフォローできるようになりました。
    アナリティクス連携の詳細が非常に役立ちます!カスタムフォントオプションの解説も気に入りました。まさに試したかった調整です。
    WPBeginnerチームの皆さん、ありがとうございます :)

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。