WordPressでシェアボタンをサイドバーに固定表示する方法

今回はこのブログ一押しの Game Users Share Buttons を使って、WordPress のサイドバーにシェアボタンを表示する方法を解説します。

Game Users Share Buttons はカスタマイズ機能が非常に豊富で、素材サイトなどの画像を使ってオリジナルのシェアボタンを作成することができます。バージョン 1.3.0 からはウィジェットが使えるようになり、サイドバーに簡単に設置できるようになりました。

完成品

Q2W3 Fixed Widget というプラグインを利用すると、上記動画のようにスクロールしてもずっと同じ位置に固定表示させることができるようになります。

常にページのどこかに表示されていると、シェアしてくれる方も増えるはずです。ぜひこの記事の解説を参考に、サイドバーにシェアボタンを設置してみてください。

プラグインをインストールする


まずはダッシュボード > プラグイン > 新規追加で Game Users Share ButtonsQ2W3 Fixed Widget を検索して、インストール&有効化してください。

それぞれについて記事で解説していますので、詳しく知りたい方は以下の記事を参考にしてください。

WordPressのおすすめシェアボタンプラグイン、高速表示&好きなデザインに変更できます

WordPressのサイドバーを固定しよう!スクロールに追従させる – Q2W3 Fixed Widget

Game Users Share Buttons ウィジェットの使い方


シェアボタンをサイドバーに表示するには、Game Users Share Buttons の設定ページ(ダッシュボード > 設定 > Game Users Share Buttons)の編集タブ内に、シェアボタンが表示されている必要があります。

編集タブ

Game Users Share Buttons をインストールしたばかりだと、編集タブ内にはまだシェアボタンは表示されていませんので、以下の記事を参考にして、デフォルトで用意されているテーマを利用するか、自分でオリジナルのシェアボタンを作成するかして、編集タブ内にシェアボタンが表示されている状況にしてください。

それが終わったら次はウィジェットの設定を行います。

 

1. ウィジェットの設定ページに移動する

ダッシュボード > 外観 > ウィジェットにアクセスして、ウィジェットの設定を行うページに移動しましょう。

 

2. Game Users Share Buttons のウィジェットをサイドバーの欄にドラッグ&ドロップする

Game Users Share Buttons をインストールすると、利用できるウィジェットの欄(左側)に、Game Users Share Buttons と書かれたウィジェットが表示されます。それをドラッグして右側のブログサイドバーの欄にドロップしましょう。

ウィジェットの設定


ブログサイドバーの Game Users Share Buttons の欄をクリック(タップ)すると、上記画像の設定画面が開きます。各項目について解説していきますので、参考にしながら設定を行ってください。

 

  • タイトル

サイドバーに表示されるシェアボタンの上に表示されるタイトルを入力してください。

画像赤線部分の文字を設定します。デフォルトでは Share Buttons と入力されていますが、「シェアボタン」や「シェアしてね!」など、なんでも好きな文字を入力することができます。

空欄にすると、タイトルが消えてシェアボタンだけが表示されるようになります。タイトルが不要な方は空欄にしてください。

 

  • 表示するシェアボタン

サイドバーに表示するシェアボタンを選んでください。

ダッシュボード > 設定 > Game Users Share Buttons 内の編集タブに表示されているシェアボタンを選ぶことができます。

 

  • 余白

シェアボタンの上下左右に間隔を空けることができます。半角数字を入力してください。

単位は px(ピクセル)です。例えば、タイトルとシェアボタンの間に間隔を空けたい場合は、余白 上に 20 と入力すると、20px の間隔が空きます。

 

  • 表示するページ

サイドバーに設置されたシェアボタンを表示したいページをチェックしてください。

WordPress のメインコンテンツである、トップページ、個別投稿ページ、固定ページ、アーカイブページをチェックしておくと無難です。

例)トップページ
https://gameusers.org/dev/blog/

例)個別投稿ページ
https://gameusers.org/dev/blog/game-users-share-buttons/

例)固定ページ
https://gameusers.org/dev/blog/developer/

例)アーカイブページ
https://gameusers.org/dev/blog/category/blog/wordpress-plugins/

例)添付ファイルページ

添付ファイルページというのは、ダッシュボードのメディアに画像などをアップロードした際に自動で生成されるページのことです。存在を知っている方はあまりいないと思いますが、WordPress ではデフォルトでこのページが生成されるようになっています。

 

  • Fixed widget

チェックしてください。

この項目はプラグインの Q2W3 Fixed Widget をインストールすると表示されます。チェックするとブラウザをスクロールしても、サイドバーの固定位置にずっと表示されるようになります。

このプラグインはテーマによっては正常に使えないことがありますので、お使いのテーマで利用できるか一度試してみてください。

最後に


すべての設定が終わったら保存ボタンを押しましょう。ブログのサイドバーに設定したシェアボタンが表示されていると思います。

シェアボタンがサイドバーに常に表示されるようになると、シェアしたいと思った方が、その場ですぐにシェアできるようになりますのでチャンスを逃しにくくなります。

シェア数の増加も間違いなしなので、ぜひ Game Users Share Buttons のウィジェットを有効活用してください。

リンク


Game Users Share Buttons v1.3.0 更新情報

ウィジェットを追加しました。ウィジェットを利用すると、サイドバーにシェアボタンを表示できるようになります。

また編集タブのTop設定・Bottom設定で、添付ファイルページにシェアボタンを表示するか表示しないかの設定を行えるようにしました。

ウィジェット


ダッシュボード > 外観 > ウィジェットで、サイドバーにシェアボタンを設置できます。プラグイン Q2W3 Fixed Widget と組み合わせることで、ブラウザをスクロールしても常に同じ位置に表示させることが可能になります。

シェアボタンが常に目に入るようになると、これまで以上にシェアしてくれる方が増えるかもしれません。おすすめの機能なので、ぜひ利用してみてください。

※ Q2W3 Fixed Widget はすべてのテーマで正常に動作するわけではありません。以下の記事を参考に一度試してみてください。

WordPressのサイドバーを固定しよう!スクロールに追従させる – Q2W3 Fixed Widget

添付ファイルページでの表示・非表示切り替え


Game Users Share Buttons の設定ページ、編集タブ内の Top設定・Bottom設定で、添付ファイルページにシェアボタンを表示するかどうかを切り替えられるようにしました。

添付ファイルページというのは、ダッシュボードのメディアに画像などをアップロードした際に自動で生成されるページのことです。存在を知っている方はあまりいないと思いますが、WordPress ではデフォルトでこのページが生成されるようになっています。

添付ファイルページ

例えば画像をアップロードすると、上記画像のようなページが自動で生成されます。タイトルと画像だけのページなので、ほぼ不必要なページなのですが、こちらのページにシェアボタンを表示するかどうかの設定を行えます。

デフォルトの設定ではシェアボタンを表示しないようになっていますが、もし必要な場合はチェックボックスをチェックしてから保存してください。

リンク


WordPress – All in One SEO Pack – 投稿ページの設定方法

WordPress - All in One SEO Pack - 投稿ページの設定方法

All in One SEO Pack の基本的な設定が終わったら、次は実際に投稿するときの設定について学んでいきましょう。

この記事は All in One SEO Pack のインストールが済んでいる前提で話を進めます。まだインストールを行っていない方は、こちらの記事を参考にインストールを行ってください。

WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き

メイン設定


記事の基本的な設定を行います。

 

  • スニペットのプレビュー

タイトルとディスクリプションを入力すると、検索サイトでの表示をプレビューすることができます。

【公式解説文の翻訳】
プレビュースニペットは、入力したSEOタイトルタグとメタ記述に基づいて、投稿やページが検索エンジンでどのように表示されるかを示します。プレビュースニペットの下にあるフィールドでタイトルと説明の設定を編集し、[公開]または[更新]をクリックすると、プレビュースニペットが更新され、新しいタイトルと説明が反映されます。これは、あなたの投稿/ページが検索エンジンでどのように表示されるかを概算したものですが、検索結果に含まれるリッチスニペット情報は反映されません。

 

  • タイトル

空欄にしてください。

検索サイトの検索結果に表示されるタイトルになります。空欄にしておくと記事のタイトルが自動的に使われますので、入力する必要はありません。

この設定で出力されるタグ

<meta property="og:title" content="タイトル" />

【公式解説文の翻訳】
タイトルフィールドは、この投稿またはページに使用されるSEOタイトルタグを入力する場所です。投稿/ページのSEOタイトルタグは、ブラウザの上部に表示され、<title>タグの間のページのソースコードに表示されます。これは検索エンジンがあなたのサイトへのリンクとして検索結果に表示されるタイトルなので、これを単純なもの(60文字以下)にしておくことが重要です。入力時に文字数をカウントする文字カウンタがあり、60文字未満に留まるのに役立ちます。

このフィールドに何も入力しないと、All in One SEO Packは、ポスト/ページタイトルを使用して自動的にタイトルタグを生成します。空の場合、このフィールドに自動生成されたタイトルが表示されます。

このフィールドに入力した内容は、All in One SEO Packの[一般設定]画面の[タイトル設定]ボックスの関連する[タイトルフォーマット]フィールドの設定に従ってフォーマットされます。タイトル設定のドキュメントを参照してください。

 

  • ディスクリプション

一般設定でディスクリプションを自動生成にチェックを入れている場合は空欄にし、自分で説明文を考えたい方は入力してください。

検索サイトの検索結果に表示されるブログ記事の説明文になります。一般設定で自動生成する設定にしている場合は、空欄にしておくと記事の公開/更新時にディスクリプションが自動で生成されます。

ただし、自動生成では記事の説明文として適切ではない文章になっていることもありますので、記事の公開後はチェックしておきましょう。

最初から自分で説明文を考えたい方は、文章を入力してください。

この設定で出力されるタグ

<meta name="description" content="ディスクリプション" />

【公式解説文の翻訳】
[説明]フィールドには、この投稿またはページに使用されるメタ説明を入力します。これは、検索エンジンが検索結果に表示する可能性のある説明であり、検索結果のタイトルの下に表示されます。説明を230〜320文字にしておき、関連性があることを確認してください。あなたが320文字以下に留まるのを助けるためにあなたがタイプするときに文字を数える文字カウンタがあります。

このフィールドに何も入力しない場合、およびオールアウトワンSEO、一般設定、詳細設定のいずれかで有効になっている自動生成記述がある場合、SEO Packは、抜粋または抜粋のいずれかを使用してメタ記述を自動的に生成します投稿またはページのコンテンツから320文字。空の場合、このフィールドに自動生成された説明が表示されます。

メタ記述は提案です.Googleなどの検索エンジンによっては、自分のコンテンツの記述を作成し、メタ記述の代わりに検索結果に表示することがあります。詳細は、Meta Descriptionsのドキュメントを参照してください。

 

  • NOINDEX this page/post

チェックを外してください。

チェックすると、記事が検索サイトの検索結果に掲載されなくなります。

この設定で出力されるタグ

<meta name="robots" content="noindex,follow" />

【公式解説文の翻訳】
NOINDEXは、コンテンツを索引付けしないようにロボットを検索するために表示できるメタタグです。特定の指示は、各検索ロボットによって異なります。たとえば、Googleの検索ロボットに与える指示は、検索結果にこの投稿/ページを表示しないで、検索結果に「キャッシュされた」リンクを表示しないことです。他の検索ロボットの解釈は異なる場合があります。

検索エンジンでこの投稿またはページのインデックスを作成したくない場合にのみ、このチェックボックスをオンにします。

 

  • NOFOLLOW this page/post

チェックを外してください。

チェックすると、検索サイトのロボットが記事のリンクをたどらなくなります。ページ内のリンクに PageRank を渡さない効果もありますが、基本的にはチェックする必要はありません。

この設定で出力されるタグ

<meta name="robots" content="index,nofollow" />

【公式解説文の翻訳】
NOFOLLOWは、コンテンツ内のリンクをたどらないようにロボットを検索するために表示できるメタタグです。 検索エンジンがこの投稿またはページのリンクをたどることを望まない場合にのみ、このチェックボックスをオンにします。

 

  • サイトマップから除外する

チェックを外してください。

All in One SEO Pack で XML サイトマップの設定を行っている場合、チェックを行うと、その記事はサイトマップに掲載されなくなります。

【公式解説文の翻訳】
この設定を使用して、この投稿またはページをサイトマップから除外することができます。

 

  • このページや投稿で無効にする

チェックを外してください。

チェックした記事の SEO 効果が無効になります。

【公式解説文の翻訳】
この投稿またはページのすべてのSEOパック設定を完全に無効にする場合は、このチェックボックスをオンにします。このチェックボックスをオンにすると、SEO PackはこのPost / PageのソースコードにSEOメタデータを出力しません。ただし、オールインワンSEOパックでは引き続きGoogleアナリティクスのトラッキングコードが出力されます。

 

  • Google Analytics を無効にする

チェックを外してください。

このページや投稿で無効にするをチェックすると表示される項目です。一般設定で行った Google Analytics の設定がチェックした記事では無効化されます。

【公式解説文の翻訳】
このチェックボックスは、このページ/投稿で[無効]チェックボックスをオンにした場合に表示されます。このチェックボックスを使用すると、SEO PackのAllでGoogle Analyticsのトラッキングコードがこの投稿またはページに出力されなくなります。

 

ソーシャル設定


ソーシャルメディア用の設定を行います。

 

  • タイトル

空欄にしてください。

Facebook や Twitter などのソーシャルメディアでシェアされた際に表示されるタイトルを設定します。空欄にすると、メイン設定のタイトルが利用されます。ソーシャルメディアでは別のタイトルを利用したい方は、こちらで入力してください。

この設定で出力されるタグ

<meta property="og:title" content="タイトル" />
<meta name="twitter:title" content="タイトル" />

【公式解説文の翻訳】
タイトルフィールドでは、ページまたは投稿のOG:タイトルを設定できます。タイトルを指定しない場合、All in One SEO Packはメイン設定タブで設定したSEOメタタイトルを使用します。 SEOメタタイトルを設定していない場合、オールインワンSEOパックはページまたは投稿のタイトルを使用します。

 

  • ディスクリプション

空欄にしてください。

Facebook や Twitter などのソーシャルメディアでシェアされた際に表示される説明文を設定します。空欄にすると、メイン設定のディスクリプションが利用されます。ソーシャルメディアでは別の説明文を利用したい方は、こちらで入力してください。

この設定で出力されるタグ

<meta property="og:description" content="ディスクリプション" />
<meta name="twitter:description" content="ディスクリプション" />

【公式解説文の翻訳】
タイトルフィールドでは、ページまたは投稿のOG:タイトルを設定できます。タイトルを指定しない場合、All in One SEO Packはメイン設定タブで設定したSEOメタタイトルを使用します。 SEOメタタイトルを設定していない場合、オールインワンSEOパックはページまたは投稿のタイトルを使用します。

 

 

  • 画像

SNS でシェアされたときに表示させる画像を選択してください。

Facebook や Twitter などのソーシャルメディアでシェアされた際に表示される画像を選択します。記事を新規追加したときは、ソーシャルメディア設定デフォルトの OG:Image に設定した画像だけが表示されていると思います。

記事を公開すると、記事内に使われた画像がずらっと表示されるようになります。ソーシャルメディアのシェア用として利用したい画像がある場合は、選択してください。

このブログでは、アイキャッチ画像を SNS 用の画像として利用することを推奨しています。その場合は、ここで画像を選択せずに下の項目のカスタム画像を利用してください。詳しくは以下の記事で解説しています。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

この設定で出力されるタグ

<meta property="og:image" content="画像URL" />
<meta name="twitter:image" content="画像URL" />
<meta itemprop="image" content="画像URL" />

【公式解説文の翻訳】
画像は、OGとして使用される画像を選択することができます。ページまたは投稿用の画像。オールインワンSEOパックは、ページまたは投稿の内容にある画像、ページまたは投稿に添付されている画像、または設定されている場合はおすすめ画像を表示します。使用する画像の横にあるラジアルを選択します。

画像を選択しないと、ソーシャルメタ画面(上記参照)で設定したデフォルト画像が使用されます。

OG:Imageは、最小600ピクセル、最大315ピクセルのサイズでなければなりません。ただし、Facebookは、網膜や高解像度の画面に最適な表示のために、1200ピクセル以上630ピクセル以上の画像を使用することを推奨しています。詳細は、ドキュメントを参照してください。

 

  • カスタム画像

SNS でシェアされたときに表示させる画像をアップロードする、または 画像の URL を入力してください。

Facebook や Twitter などのソーシャルメディアでシェアされた際に表示される画像を設定します。カスタム画像を利用する場合は、上の項目の画像を選択する必要はありません。

この設定で出力されるタグ

<meta property="og:image" content="画像URL" />
<meta name="twitter:image" content="画像URL" />
<meta itemprop="image" content="画像URL" />

【公式解説文の翻訳】
画像のアップロードボタンを使用して、OG:Imageとして使用する画像をアップロードするか、画像ファイルのURLを提供されたフィールドに貼り付けることができます。

 

  • 画像の幅を指定

カスタム画像で入力した画像の横幅を半角数字で入力してください。

画像の横幅を指定します。

この設定で出力されるタグ

<meta property="og:image:width" content="画像の横幅" />

【公式解説文の翻訳】
これらのフィールドを使用して、イメージの幅と高さをOG:Imageにするピクセル単位で入力することができます。 OG:Imageは、最小600ピクセル、最大315ピクセルのサイズでなければなりません。ただし、Facebookは、網膜や高解像度の画面に最適な表示のために、1200ピクセル以上630ピクセル以上の画像を使用することを推奨しています。詳細は、ドキュメントを参照してください。

 

  • 画像の高さを指定

カスタム画像で入力した画像の高さを半角数字で入力してください。

画像の高さを指定します。

この設定で出力されるタグ

<meta property="og:image:height" content="画像の高さ/>

 

  • カスタム動画

SNS でシェアされたときに表示させる動画の URL を入力してください。

Facebook や Twitter などのソーシャルメディアでシェアされた際に、動画を表示させることができます。動画は画像と違い、対応している動画の種類なども限定されていますので、動画を利用したい方は対応動画やサイズについて調べてください。

この設定で出力されるタグ

<meta property="og:video" content="動画URL" />

【公式解説文の翻訳】
これを使用して、OG:Videoタグに出力されるビデオのURLを追加することができます。あなたがページや投稿を自分のネットワーク上で共有しているときに、このビデオがソーシャルメディアネットワークに表示されることがあります。このフィールドにURLを入力すると、[ビデオ幅の指定]と[ビデオ高さの指定]の2つの追加フィールドが表示されます。これらのフィールドを使用してビデオの幅と高さをピクセル単位で設定できます。

 

  • 動画の幅を指定

カスタム動画で入力した動画の横幅を半角数字で入力してください。

動画の横幅を指定します。

この設定で出力されるタグ

<meta property="og:video:width" content="動画の横幅" />

【公式解説文の翻訳】
これらのフィールドを使用して、ビデオの幅と高さをOG:Videoにするピクセル単位で入力できます。

 

  • 動画の高さを指定

カスタム動画で入力した動画の高さを半角数字で入力してください。

動画の高さを指定します。

この設定で出力されるタグ

<meta property="og:video:height" content="動画の高さ" />

 

  • Facebook オブジェクトタイプ

記事を選んでください。

コンテンツの種類を選択します。基本的には記事を選びましょう。シェア機能にも影響を及ぼしますので、知識のない方は他の値を選ばないようにしてください。

この設定で出力されるタグ

<meta property="og:type" content="選択したタイプ" />

【公式解説文の翻訳】
Facebookオブジェクトタイプドロップダウンを使用して、ページまたは投稿のOG:Typeを設定できます。デフォルトは、このコンテンツタイプのソーシャルメタ画面で設定した内容です(上記参照)。

注:Open Graph Object Typesの標準化されたリストがあります。完全なリストは、Open Graph Object Typesを参照してください。不適切なオブジェクトタイプを選択すると、特定のソーシャルネットワーキングサイトにコンテンツがどのように表示されるかに影響を及ぼす可能性のあるエラーを生成する可能性があります。

 

  • Facebook デバッグ

この投稿をデバッグボタンを押すと、Facebook でシェアされたときの表示を確認することができます。設定した画像や動画が、Facebook で正しく表示されているか、一度はチェックしておきましょう。

【公式解説文の翻訳】
[Facebookデバッグ]ボタンはFacebookデバッガツールを起動し、URLフィールドに投稿またはページのURLを入力します。このツールを使用すると、あなたの投稿やページがFacebookにどのように表示されるかをトラブルシューティングしたり、エラーや警告をチェックしたり、Open Graphのメタ情報をフェッチして、Facebookが投稿/ページしたキャッシュ情報を消去することができます。

注:オールインワンSEOパックは、あなたが投稿やページを公開または更新するたびにFacebookがあなたの投稿やページに関するキャッシュされた情報を無効にするように強制します。これはFacebook Graph APIを介して行われ、デバッグボタンをクリックすると最新のスクラップ情報が表示されるようにする必要があります。

 

  • 記事のセクション

空欄にしてください。

特別、入力が必要な値ではないようです。

この設定で出力されるタグ

<meta property="article:section" content="記事のセクション" />

【公式解説文の翻訳】
ここでは、コンテンツが属するWebサイトのセクションを表すカテゴリ名を入力できます。

 

  • 記事のタグ

空欄にしてください。

特別、入力が必要な値ではないようです。

この設定で出力されるタグ

<meta property="article:tag" content="記事のタグ" />

【公式解説文の翻訳】
ここでは、WordPressのタグを使用してコンテンツにタグを付けるように、キーワードのリストを入力できます。

 

  • Twitter カードタイプ

要約の大きい画像を選んでください。

Twitter でシェアされたときにカード型のデザインでシェアされます。その際、大きい画像を利用するか、小さい画像を利用するかを選択します。

これは要約の大きい画像です。要約を選ぶと小さい画像が表示されるようになります。詳しくは Twitter カードなどの検索ワードで調べてみてください。

この設定で出力されるタグ

<meta name="twitter:card" content="選択したタイプ" />

【公式解説文の翻訳】
この特定の投稿やページのTwitterカードタイプを選択するには、このオプションを選択します。これは、この投稿またはページのデフォルトのTwitterカードタイプを上書きします。あなたはここでTwitterカードの種類に関する情報を見つけることができます。

 

  • カスタムTwitter画像

Twitter でシェアされたときに表示させる画像をアップロードする、または 画像の URL を入力してください。「画像」または「カスタム画像」を設定した場合は入力する必要はありません。

Twitter でシェアされた際に表示される画像を設定します。上記で画像またはカスタム画像を設定している場合は、この項目を設定する必要はありません。Twitter 用に別途画像を用意した場合などに利用してください。

この設定で出力されるタグ

<meta name="twitter:image" content="画像URL" />

【公式解説文の翻訳】
Twitterで使用されるカスタムイメージを設定することができます:要約カードタイプのイメージまたは要約大きなイメージカードタイプ。これが設定されていない場合、TwitterはOpen Graph画像を使用します。 Twitterには、選択するカードの種類に応じて、特定のファイルサイズと画像サイズの要件があることに注意してください。

 

最後に


設定項目がたくさんあって難しそうに見えますが、ディスクリプション(記事の簡単な説明文)を自動生成する設定にしている場合は、カスタム画像にアイキャッチ画像の URL をコピペして、画像の幅と高さを指定するだけになると思います。

サイトマップやソーシャルメディアの設定を行いたい方は、以下の記事をチェックしてみてください。

関連リンク


  1. WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き
  2. WordPress – All in One SEO Pack – XMLサイトマップの設定方法
  3. WordPress – All in One SEO Pack – ソーシャルメディアの設定方法
  4. WordPress – All in One SEO Pack – 投稿ページの設定方法

WordPress – All in One SEO Pack – ソーシャルメディアの設定方法

WordPress - All in One SEO Pack - ソーシャルメディアの設定方法

All in One SEO Pack をインストールしたらソーシャルメディアの設定も行っておきましょう。これを行うとシェアボタンでシェアされたときの表示が大きく変わります。

この記事は All in One SEO Pack がインストール済みで、一般設定が終わっている前提で話を進めていきます。インストールや設定が終わっていない方は、以下のページを参考に基本的な設定を行ってください。

WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き

WordPress – All in One SEO Pack – XMLサイトマップの設定方法

設定するとどうなるの?


ブログのソースコードに OGP タグが追加されます。

OGP タグの例

<meta property="og:title" content="Game Users 開発ノート" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://gameusers.org/dev/blog/" />
<meta property="og:image" content="https://gameusers.org/dev/blog/wp-content/uploads/2017/12/ogp_image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Game Users 開発ノート" />

OGP というのは Open Graph Protocol の略称で、SNS にウェブサイトの情報を伝えるためのプロトコル(ルールのようなもの)です。

All in One SEO Pack のソーシャルメディア設定を行うと、この Open Graph Protocol に従って、ブログの各情報が OGP タグで出力されるようになります。

 

Facebook

Twitter

ソーシャルメディア設定を行って、記事ごとにアイキャッチ画像を作成すると、上記のような感じで大きく目立つ画像が、SNS でシェアされたときに表示されるようになります。画像があるのとないのではシェア数にも大きな違いがでるので、ぜひ設定しておきましょう。

All in One SEO Pack を利用した投稿時の設定方法は、以下の記事で解説しています。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

ソーシャルメディアの設定方法


ソーシャルメディアの設定方法について解説していきます。一部、Facebook と Twitter のアカウントが必要な設定があります。Facebook または Twitter のシェアボタンを設置する方は、それぞれのアカウントを用意してください。

 

1. 機能管理ページに移動する

ダッシュボード > All in One SEO > 機能管理をクリック(タップ)して、機能管理ページに移動しましょう。

 

2. ソーシャルメディアを有効化する

ソーシャルメディアと書かれている部分の Activate ボタンをクリック(タップ)しましょう。表示が Deactivate に変わると、左のメニューにソーシャルメディアという項目が追加されます。

 

3. ソーシャルメディアの設定ページに移動する

左メニューのソーシャルメディアを選んでください。

 

4. 設定を行う

画像の矢印の場所でソーシャルメディアの設定を行います。各項目について解説していきますので、記事を参考にしながら設定してみてください。

 

ホームページ設定


ブログのトップページの設定を行います。

 

  • AIOSEO の Title と Description を使用する

一般設定でホームタイトルとホームディスクリプションを入力した場合は、チェックしてください。

ブログトップページのタイトルと、ディスクリプション(ブログの簡単な説明文)を設定します。

この設定で出力されるタグ

<meta property="og:title" content="タイトル" />
<meta property="og:description" content="ディスクリプション" />

 

一般設定のホームタイトル&ホームディスクリプション

一般設定のこちらのフォームでホームタイトルとホームディスクリプションを入力した場合は、チェックすることで同じタイトルとディスクリプションが使われます。SNS 用と分ける必要はあまりないと思いますので、チェックすることをおすすめします。

【公式解説文の翻訳】
あなたのホームのOpen Graph Title(OG:Title)とOpen Graph Description(OG:Description)としてAll SEO PackのGeneral Settings画面で設定されているHome TitleとHome Descriptionを使用する場合は、このチェックボックスをオンにしますページ。これは、あなたのホームページがすべてのソーシャルネットワーキングサイトと同じ方法でGoogle検索結果に表示されるようにするための素晴らしい方法です。

注:このボックスをオンにすると、画面の下にある[ホームタイトル]と[ホームの説明]フィールドが表示されなくなります。

 

  • サイト名

ブログのサイト名を入力してください。

最初から入力されていると思いますので、変更する必要はありません。

この設定で出力されるタグ

<meta property="og:site_name" content="サイト名" />

【公式解説文の翻訳】
ここにあなたのサイト名を追加することで、あなたのウェブサイトやブログがソーシャルネットワーキングサイトでどのように認識されるかを制御することができます。

 

  • ホームタイトル

ブログのタイトルを入力してください。

「AIOSEO の Title と Description を使用する」にチェックを入れていない場合、タイトルを入力してください。多くの場合、サイト名と同じ(もしくは若干追記した)テキストになると思います。

この設定で出力されるタグ

<meta property="og:title" content="タイトル" />

 

  • ホームディスクリプション

ブログの説明文を入力してください。

「AIOSEO の Title と Description を使用する」にチェックを入れていない場合、ブログの簡単な説明文を入力してください。あまり長くなりすぎないように気をつけてください。

この設定で出力されるタグ

<meta property="og:description" content="ディスクリプション" />

 

  • ホーム画像

画像をアップロードするか、画像の URL を入力してください。

ブログトップページがシェアされたときに SNS で表示される画像になります。画像の推奨サイズはこちらの記事で解説していますので、チェックしてみてください。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

この設定で出力されるタグ

<meta property="og:image" content="https://localhost/ogp_image.jpg" />

<meta name="twitter:image" content="https://localhost/ogp_image.jpg" />
 
<meta itemprop="image" content="https://localhost/ogp_image.jpg" />

【公式解説文の翻訳】
画像アップロードボタンを使用して、サイトのホームページのOG:画像として使用する画像をアップロードするか、画像ファイルのURLを提供されたフィールドに貼り付けることができます。

OG:Imageは、最小600ピクセル×315ピクセルのサイズでなければなりません。ただし、Facebookは、網膜や高解像度の画面に最適な表示のために、1200ピクセル以上630ピクセル以上の画像を使用することを推奨しています。詳細は、ドキュメントを参照してください。画像ファイルは5MBを超えないようにしてください。

 

画像設定


Facebook の記事ページに表示する画像の設定を行います。

 

  • OG:Image ソースを選択

Default Image を選んでください。

【公式解説文の翻訳】
このドロップダウンを使用して、デフォルトで og:image として使用される画像を投稿またはページ用に選択します。それぞれのオプションの説明は次のとおりです。

Default Image(デフォルトイメージ) – ソーシャルメタ設定ページでデフォルトOGイメージとして指定されたイメージを使用します

Featured Image(注目画像) – 投稿からのおすすめ画像を使用する

First Attached Image(最初に添付された画像) – 投稿に最初に添付された画像を使用します(メディアの添付ファイル)

First Image In Content(コンテンツの最初の画像) – 投稿のコンテンツにある最初の画像を使用する

Image From Custom Field(カスタムフィールドからのイメージ) – カスタムフィールド(設定で指定されたフィールド名)から指定されたイメージを使用します。

Post Author Image(投稿者画像) – これは投稿/ページの作者にアバターを使用します

First Available Image(最初に利用可能な画像) – これらのオプションすべてを自動的に通過します

 

  • 画像が見つからない場合はデフォルトを使用

チェックしてください。

SNS 用の画像が設定されていない場合に、デフォルトの OG:Image に設定されている画像を代わりに利用します。

【公式解説文の翻訳】
この設定は、Select OG:Image Sourceのオプションを使用してイメージが見つからない場合、All in One SEO PackがデフォルトのOGイメージに戻ります。

 

  • デフォルトの OG:Image

画像をアップロードするか、画像の URL を入力してください。

上記の設定とセットです。

【公式解説文の翻訳】
デフォルト画像フィールドでは、メディアライブラリから画像を選択したり、画像をアップロードしたり、デフォルトのOGとして使用される画像のURLに貼り付けることができます。ソーシャルネットワーキングサイトによる画像。

OG:Imageは、最小600ピクセル×315ピクセルのサイズでなければなりません。ただし、Facebookは、網膜や高解像度の画面に最適な表示のために、1200ピクセル以上630ピクセル以上の画像を使用することを推奨しています。詳細は、ドキュメントを参照してください。画像ファイルは5MBを超えないようにしてください。デフォルト画像は、特定のページまたは投稿に対してOG:画像が指定されていない場合にのみ使用されます。 OGの選択:画像ソースは、OG:画像にデフォルトで使用される画像を管理するオプションを提供しますが、個々の投稿の設定でこれを上書きできます。

 

  • デフォルトの画像幅

設定した画像の横幅を入力してください。

【公式解説文の翻訳】
ソーシャルメディアに使用される画像の幅を設定できます。各ソーシャルメディアネットワークには、独自の優先イメージサイズがあります。たとえば、Facebookは画像の幅を1200ピクセルにしたいとします。数字はここに入力し、単語を入力しないでください(例:1200)。

 

  • デフォルトの画像高さ

設定した画像の高さを入力してください。

【公式解説文の翻訳】
ソーシャルメディアに使用される画像の高さを設定できます。各ソーシャルメディアネットワークには、独自の優先イメージサイズがあります。たとえば、Facebookは画像の高さを630ピクセルにしたいとします。ここには数字だけを入力し、単語は入力しないでください(例:630)。

 

  • 画像にはカスタムフィールドを利用する

空欄にしてください。

【公式解説文の翻訳】
このフィールドを使用して、OG:Imageに使用するカスタムフィールドを選択することができます。このボックスにカスタムフィールドの名前を入力します。

 

ソーシャルプロフィールリンク


こので設定した値は Google ナレッジグラフに表示されます。

企業や店舗、商品などの情報が検索結果の右側に表示されますが、ここで設定したからといってすぐに表示されるものではないようです。Google ナレッジグラフを利用したい方は検索して調べてみてください。

 

Facebook 設定


Facebook のシェア設定です。Facebook のシェアボタンを利用される方は、Facebook 管理者 ID、または Facebook App ID を必ず設定してください。

 

  • Facebook 管理者 ID

Facebook の管理者 ID を入力してください。

Facebook のプロフィールページの URL を以下のサイトに入力すると、自分の管理者 ID がわかります。それを入力してください。

Find your Facebook ID

ただし管理者 ID を入力すると Facebook のユーザーが特定される可能性があります。本名などをオープンにしている方は問題ないと思いますが、ブログと個人を紐付けされたくない方は、こちらを空欄にして、下の項目の Facebook App ID を代わりに利用してください。

この設定で出力されるタグ

<meta property="fb:admins" content="管理者ID" />

【公式解説文の翻訳】
ここにあなたのFacebook管理者IDを入力してください。複数のFacebook Admin IDをコンマで区切って入力することができます。このツールを使ってあなたのFacebook IDを調べることができます。http://findmyfbid.com/

 

  • Facebook App ID

Facebook の App ID を入力してください。

Facebook の App ID は取得に少し手間がかかります。必要な方は取得方法を検索してください。Facebook のシェアボタンを利用する場合は、管理者 ID か App ID の両方を入力する、またはどちらかを必ず入力しましょう。

この設定で出力されるタグ

<meta property="fb:app_id" content="App ID" />

【公式解説文の翻訳】
ここにあなたのFacebook App IDを入力してください。 Facebook App IDを取得する方法については、https://developers.facebook.com/docs/apps/registerを参照してください。

 

  • 記事のタグを自動生成する

チェックしてください。

下3つのチェックボックスに関連します。このタグの重要性は不明なのですが、掲載していて損はないと思いますのでチェックを推奨しています。

この設定で出力されるタグ

<meta property="article:tag" content="タグ" />

【公式解説文の翻訳】
この設定では、オブジェクトタイプが「記事」の投稿のFacebook記事タグの自動生成が有効になります。記事タグは、その投稿に設定されたメタキーワード、投稿が属するカテゴリまたはタグから生成されます。これは、この設定が有効になっているときに表示される3つのチェックボックスに基づいています。これは、オブジェクトタイプのドロップダウンで設定されたオブジェクトタイプが記事に設定されている場合、任意のポストタイプに対して機能します。

 

  • 記事のタグにキーワードを使用

チェックしてください。

この設定で出力されるタグ

<meta property="article:tag" content="キーワード" />

【公式解説文の翻訳】
この設定は、ポストのメタキーワードからFacebookの記事タグを自動的に生成します。

 

  • 記事のタグにカテゴリーを使用

チェックしてください。

この設定で出力されるタグ

<meta property="article:tag" content="キーワード" />

【公式解説文の翻訳】
この設定は、投稿のカテゴリから自動的にFacebook記事タグを生成します。

 

  • 記事タグで投稿タグを使用

チェックしてください。

この設定で出力されるタグ

<meta property="article:tag" content="投稿タグ" />

【公式解説文の翻訳】
この設定は投稿の投稿タグから自動的にFacebook記事タグを生成します。

 

  • Enable Facebook Meta for Post Types

投稿・固定ページをチェックしてください。

Facebook の OGP タグを有効にしたいページの種類を選んでください。通常は投稿(個々の記事)と固定ページを選んでおくといいでしょう。

【公式解説文の翻訳】
この設定を使用すると、「ページ」、「投稿」、「カスタム投稿タイプ」などのコンテンツタイプに対して、Open Graphメタを有効にすることができます。

ここで選択したチェックボックスに基づいて、コンテンツタイプごとにデフォルトのオブジェクトタイプを設定できる新しいドロップダウンフィールドが表示されます。

 

  • Facebook Publisher の記事を表示

Facebook ページの URL を入力してください。

Facebook ページの URL を入力しましょう。シェアされたときに Facebook ページにリンクされます。Facebook ページではなく、Facebook のアカウントと紐付けたい方は、下の項目の 記事に Facebook の著者を表示を設定してください。

この設定で出力されるタグ

<meta property="article:publisher" content="https://www.facebook.com/ユーザーネーム" />

【公式解説文の翻訳】
ここにあなたのFacebookページのURLを入力することで、あなたのFacebookページに記事をリンクすることができます。これは、オブジェクトタイプが記事に設定されているコンテンツに対してのみ機能します。

 

  • 記事に Facebook の著者を表示

著者を公開したい方はチェック、公開したくない方はチェックを外してください。

ここをチェックすると、ダッシュボード > ユーザー の各ユーザー編集ページで、Facebook アカウントの URL を入力する欄が追加されます。

画像赤線の場所に Facebook のアカウント URL を入力しましょう。

シェアされた際に、あなたの Facebook のアカウントも一緒に表示されるようになります。こちらも Facebook 管理者 ID と同じで、Facebook のアカウントが公開されることになりますので、公開したくない方は入力しないようにしましょう。

この設定で出力されるタグ

<meta property="article:author" content="https://www.facebook.com/ユーザーネーム" />

【公式解説文の翻訳】
このオプションは、ユーザー編集画面に入力されたFacebookプロファイルURLを記事:作成者タグとして使用します。これは、そのユーザーが作成した記事をFacebookのプロフィールにリンクします。これは、オブジェクトタイプが記事に設定されているコンテンツに対してのみ機能します。

 

  • 投稿 オブジェクト型 (post)
  • 固定ページ オブジェクト型 (page)

両方とも記事を選んでください。

【公式解説文の翻訳】
ここでは、コンテンツの種類(ページ、投稿、カスタム投稿タイプ)ごとにOG:Typeを設定できます。たとえば、製品のカスタムポストタイプがある場合、その製品タイプにオブジェクトタイプを選択することができます。

注:Open Graph Object Typesの標準化されたリストがあります。完全なリストは、Open Graph Object Typesを参照してください。不適切なオブジェクトタイプを選択すると、特定のソーシャルネットワーキングサイトにコンテンツがどのように表示されるかに影響を及ぼす可能性のあるエラーを生成する可能性があります。

 

Twitter 設定


Twitter のシェア設定です。Twitter のシェアボタンを利用される方は、しっかり設定しておきましょう。

 

  • デフォルト Twitter カード

要約の大きい画像を選んでください。

記事がシェアされたときに大きい画像をデフォルトで使うという指定です。これは各記事の投稿ページで後から編集できます。

この設定で出力されるタグ

<meta name="twitter:card" content="summary_large_image" />

【公式解説文の翻訳】
このオプションを使用すると、デフォルトですべてのコンテンツに使用されるTwitterカードタイプを設定できます。この設定は、各ポストまたはページごとにソーシャル設定タブでオーバーライドできます。

 

  • Twitter サイト

Twitter のユーザー名を@つきで入力してください。

この設定で出力されるタグ

<meta name="twitter:site" content="@Twitterのユーザー名" />

【公式解説文の翻訳】
これはウェブサイトのオーナーのTwitterユーザー名です。 @semperfidevなどです。 @記号を含める必要があります。これはTwitterとして使用されます:Twitterカードに表示されるサイト。

 

  • Twitter 投稿者を表示

投稿者を公開したい方はチェック、公開したくない方はチェックを外してください。

ここをチェックすると、ダッシュボード > ユーザー の各ユーザー編集ページで、Twitter アカウントの URL を入力する欄が追加されます。

画像赤線の部分に Twitter のユーザー名を@つきで入力してください。上記の Twitter サイト と内容が近いので、サイトを入力している場合は、必ずしも入力する必要はありません。例えば複数人で管理しているブログなどで利用すると、OGP タグに表示される著者が記事を書いた人ごとに代わります。

この設定で出力されるタグ

<meta name="twitter:creator" content="@Twitterのユーザー名">

【公式解説文の翻訳】
このオプションを使用すると、[ユーザープロファイル]画面の[ユーザー]の下にTwitterフィールドが表示または非表示になります。ユーザープロファイル画面のTwitterフィールドは、そのユーザーが作成したコンテンツの作成者のTwitterユーザー名を設定するために使用されます。 @semperfidevなどです。 @記号を含める必要があります。これは、Twitterカードに表示されるTwitter:Creatorとして使用されます。

 

  • Twitter ドメイン

ドメイン名を入力してください。

http:// または https:// は含めないようにしてください。example.com こういった感じです。この情報は Twitter カードに表示されます。

この設定で出力されるタグ

<meta name="twitter:domain" content="ドメイン名" />

【公式解説文の翻訳】
これはあなたのサイトのドメイン名です。たとえば、semperplugins.comです。 http://は含めないでください。これはTwitter:ドメインとして使用され、Twitterカードに表示される可能性があります。

 

詳細設定


基本的には触らなくていい設定です。翻訳を掲載しておきますので、必要な方は参考にしてください。

 

  • タイトル内のショートコードを実行

【公式解説文の翻訳】
このオプションを有効にすると、Open Graph Titleを生成するときにPostまたはPage Titleのショートコードが確実に実行されます。

 

  • ディスクリプション内のショートコードを実行

【公式解説文の翻訳】
このオプションを有効にすると、Open Graph Descriptionを生成するときにPostまたはPageの内容のショートコードが確実に実行されます。これは、OG記述の自動生成が有効になっている場合にのみ適用されます。

 

  • 自動生成 Open Graph 説明文に本文を使用

【公式解説文の翻訳】
デフォルトでは、All in One SEO Packは、自動生成されたOpen Graphの説明として投稿からの抜粋を使用し、抜粋が存在しない場合はコンテンツを使用します。この動作を変更したいユーザーもいます。この設定では、自動生成されたOpen Graphの説明に常にポストコンテンツが使用され、ポスト抜粋は無視されます。

WooCommerceのユーザーは、この設定が追加され、自動生成されたOpen Graphの説明がProduct Short Descriptionではなく製品コンテンツから生成されることに注意してください。 OGの説明にProduct Short Descriptionを使用しない場合は、この設定を有効にします。

 

ソーシャルメタ情報をスキャン


利用しているテーマによっては All in One SEO Pack のソーシャルメディア設定と、同じ OGP タグをソースコード内に出力しているかもしれません。

それをチェックするための機能です。いますぐスキャンを押してチェックしてみてください。

重複の meta タグが見つかりませんでした。

と表示された場合は問題ありません。

【公式解説文の翻訳】
上記の「Jetpackタグを無効にする」で述べたように、プラグインやテーマによってはOpen Graphメタタグも出力されることがあります。サイトに複数のOpen Graphメタタグが存在する場合は、特定のソーシャルネットワーキングサイトにコンテンツがどのように表示されるかに影響する可能性のあるエラーが発生する可能性があります。どのプラグインをインストールしたか、またそれらを使用している目的に応じて、Open Graphメタを制御するために使用するプラグインを決定する必要があります。

[ソーシャルメタデータのスキャン]セクションでは、他のプラグインやテーマによって作成されたソーシャルメタタグが重複しているかどうか、サイトをスキャンできます。この機能は、潜在的に重複するメタをスキャンしてアラートするだけで、問題は解決しません。重複したソーシャルメタタグを修正するには、ソーシャルメタのソースを特定して削除する必要があります。

 

最後に


OGP タグが存在していないと、シェア機能が制限されたり、シェアが正常に行われなかったりしますので、ブログにシェアボタンを置く方は必ず設定しておきましょう!

WordPress では公式のシェアボタンが表示されるプラグインを利用されている方も多いと思いますが、そういった方におすすめしたいのが、Game Users Share Buttons です!

動作が軽快で、デザインも好きなものに変更でき、カスタマイズ性も高いので、ぜひ一度使ってみてください。

WordPressのおすすめシェアボタンプラグイン、高速表示&好きなデザインに変更できます

関連リンク


  1. WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き
  2. WordPress – All in One SEO Pack – XMLサイトマップの設定方法
  3. WordPress – All in One SEO Pack – ソーシャルメディアの設定方法
  4. WordPress – All in One SEO Pack – 投稿ページの設定方法

WordPress – All in One SEO Pack – XMLサイトマップの設定方法

All in One SEO Pack をインストールして一般設定が終わったら、次は XML サイトマップを生成する設定を行いましょう。

この記事は以下の記事の続きになります。プラグインインストール後の一般設定が終わっていない方は、以下の記事を読んで設定を行ってください。

WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き

XML サイトマップとは?


運営しているブログにどんなページがあるのか(URL)、ブログ内の優先順位、更新頻度はどれくらいか、最終更新日、そういった情報を検索サイトに伝えるためのファイルのことです。

通常は sitemap.xml というファイルを自分で作成して、検索サイトに登録しなければならないのですが、All in One SEO Pack にはそれを自動で生成する機能がついています。この機能を使えば、後は検索サイトに生成された XML サイトマップの URL を登録するだけで、検索サイトのロボットがブログの記事を隅々までクロールしてくれるようになります。

WordPress で新しい記事を書くと、その記事の URL も自動で XML サイトマップに追加してくれるようになりますので、とても便利です。All in One SEO Pack をインストールしたら、こちらの設定も行っておきましょう。

完成品:このブログの XML サイトマップ

XMLサイトマップの設定方法


1. 機能管理ページに移動する

ダッシュボード > All in One SEO > 機能管理をクリック(タップ)して、機能管理ページに移動しましょう。

 

2. XML サイトマップを有効化する

XML サイトマップと書かれている部分の Activate ボタンをクリック(タップ)しましょう。表示が Deactivate に変わると、左のメニューに XML サイトマップという項目が追加されます。

 

3. XML サイトマップの設定ページに移動する

左メニューの XML サイトマップを選んでください。

 

4. 設定を行う

画像の矢印の場所で XML サイトマップの設定を行います。各項目について解説していきますので、記事を参考にしながら設定してみてください。

 

XML サイトマップ


サイトマップの基本的な設定を行います。

 

  • ファイル名接頭語

sitemap のままにしておきましょう。

サイトマップファイルのファイル名を設定します。デフォルトの設定の場合、sitemap.xml というファイルが生成されます。特別な理由がない限り、変更する必要はありません。

【公式解説文の翻訳】
ファイル名接頭語フィールドには、サイトマップの名前を設定できます。このフィールドにデフォルトで入力されている一般的な接頭辞「sitemap」を保持すると、ロボットがあなたのサイトマップを簡単に見つけることができます。

 

  • 更新を予約

更新の頻度に合わせて適切な値を選んでください。

毎日・毎週・月が選べます。毎日ブログを更新している場合は毎日を選んで、そこまで更新していない場合は毎週を選ぶのがいいでしょう。検索サイトに見に来てもらうよう促しますので、更新頻度が低い場合、毎日を選ぶのはやめておきましょう。

【公式解説文の翻訳】
サイトマップについてGoogleとBingに対してpingを実行するスケジュールを選択します。サイトのコンテンツを追加または更新する頻度に合わせて設定することをおすすめします。

 

  • サイトマップインデックスを有効化

チェックを外してください。

サイトマップには、1つのファイルに 50,000 個までの URL しか登録できないという制限があります。運営しているサイトがそれ以上のページを持っている場合は、サイトマップインデックスという複数のサイトマップをリスト化したファイルを用意して、膨大なページを検索サイトに伝えます。

50,000 ページもあるブログは普通ないと思いますので、基本的にはチェックする必要はありません。

【公式解説文の翻訳】
サイトマップに多数のURLがある場合は、[サイトマップインデックスを有効にする]をオンにする必要があります。これにより、サイトマップを作成してサイトマップを高速化するために必要なメモリ量が削減されます。あなたのXMLサイトマップを見て、あなたが持っているURLの数を調べてください。

サイトマップインデックスを使用する必要がある場合は、オールインワンSEOパックを使用してインデックスにページを設定し、サイトマップごとに投稿数を設定できます。このオプションは、[サイトマップインデックスを有効にする]チェックボックスをオンにした後に表示されます。

 

  • 投稿タイプ

投稿と固定ページをチェックしてください。

サイトマップに掲載するページを指定します。メディア・添付ファイルのチェックは外してください。

WordPress に画像をアップロードすると以下のような画像だけのページが自動的に生成されます。これを添付ファイルページと呼びます。

添付ファイルページは、画像とタイトルだけが表示される非常にシンプルなページですので、検索サイトからは有用なコンテンツのないページと認識される可能性があります。コンテンツのないページがサイトマップ内に大量に存在していると、検索サイトからの評価が下がってしまうかもしれませんので、メディア・添付ファイルのチェックは外しておくことをおすすめします。

【公式解説文の翻訳】
[投稿タイプと分類]セクションでは、サイトマップに含まれるコンテンツを管理できます。すべてのボックスはデフォルトでチェックされます。サイトマップインデックスを使用している場合は、チェックされている投稿タイプと分類ごとにファイルが作成されます。特定の投稿タイプまたは分類を使用していない場合、そのファイルはサイトマップ内で空白になりますので、サイトマップインデックスを使用している場合は、サイトに存在する投稿タイプと分類をチェックすることが重要です。

 

  • タクソノミー

カテゴリーとタグをチェックしてください。

こちらもサイトマップに掲載するページを指定します。

 

  • 日別アーカイブページを含める

チェックを外してください。

基本的には含める必要はないと思いますが、日別アーカイブページを重要視していて、サイトマップに含めたい方はチェックしてください。

例)日付別のアーカイブページ

https://gameusers.org/dev/blog/2018/01/

【公式解説文の翻訳】
日付アーカイブのページと著者ページの挿入は、Googleからの重複コンテンツの警告を避けるため、未チェックのままです。これは主に、GoogleがWordPressの仕組みを理解し、その内容をアーカイブして著者ページに含めることができるようになったため、従来の設定です。これをチェックするかどうかは、チェックするかどうか、重複するコンテンツの警告を受け取るかどうかはあなた次第です。設定を変更して変更をGoogleに通知するだけです。

覚えておいてください:あなたのサイトマップにコンテンツを含めていないからといって、Googleがそれを見つけてインデックスに登録するわけではありません。サイトのコンテンツにリンクすると、検索エンジンはそれらのリンクをたどってクロールしますので、NOINDEXの設定を使用して、All In One SEO Packを使用してどのコンテンツがインデックスに登録されるかを制御します。

 

  • 投稿者ページを含める

チェックを外してください。

基本的には含める必要はないと思いますが、投稿者ページを重要視していて、サイトマップに含めたい方はチェックしてください。

例)投稿者ページ

https://gameusers.org/dev/blog/author/az1979/

 

  • Exclude Images

チェックを外してください。

【公式解説文の翻訳】
デフォルトでは、オールインワンSEOパックには、Googleサイトマップに画像が含まれており、Googleなどの検索エンジンに準拠し、Google画像検索でインデックスに登録された画像を送信します。

一部のユーザーは画像を挿入したくない場合があります。たとえば、Yandexはサイトマップ内の画像をサポートしていません。 XMLサイトマップから画像を除外するには、このオプションを有効にします。また、GoogleのAPIフィルタフックを使用して、All in One SEO Packから画像を除外することもできます。

注:この機能は、無料のプラグインのバージョン2.4とオールインワンSEO Pack Proのバージョン2.5で追加されました。

 

  • 圧縮版サイトマップを構築する

チェックしてください。

サイトマップを圧縮して作成します。圧縮しているとサーバーの負荷も減りますので、チェックしておくことを推奨します。

【公式解説文の翻訳】
このオプションは.GZip圧縮を使用してサイトマップを作成します。この設定はデフォルトでオンになっているため、圧縮されたファイルが送信され、検索用ロボットが通常のサイトマップを取得できない場合に使用できます。主要な検索エンジンはすべてあなたのサイトマップにこのフォーマットを受け入れます。

 

  • 仮想 Robots.txt からリンクする

チェックしてください。

【公式解説文の翻訳】
この設定では、WordPressによって自動的に作成される動的なRobots.txtファイルにサイトマップリンクが追加されます。これにより、作成した静的なRobots.txtファイルへのリンクは追加されません。

 

  • サイトマップを動的に生成

チェックしてください。

サイトマップがリアルタイムに生成されるようになります。常に最新の情報が掲載されるようになりますので、チェックしておきましょう。

【公式解説文の翻訳】
この設定を有効にすると、検索ロボットが要求するたびにサイトマップが動的に生成され、静的なファイルが作成されるのではなく、古いファイル、古いファイル、破損したファイル、上書きされることがあります。 1つのSEO Packで生成されるサイトマップは、サイトの最新バージョンで常に最新のものです。この設定をチェックしている場合は、手動でサイトマップを更新する必要はありません。

 

追加ページ


WordPress で作成したページはすべてサイトマップに含めることができますが、もしそれ以外のページもサイトマップに含めたい場合は、こちらで URL を入力して設定してください。

例えば自分で HTML を作成してページをアップロードした場合、ここで設定することで、そのページもサイトマップに含めることができます。

【公式解説文の翻訳】
このセクションを使用して、WordPressのインストールに含まれていないURLをサイトマップに追加することができます。

 

除外項目


サイトマップに掲載したくないカテゴリーやページがある場合は、ここで設定しましょう。記事のスラッグ(この記事のスラッグは all-in-one-seo-pack-xml-sitemap)やページ ID を入力してください。

WordPress ページID・記事ID・pidの取得方法

【公式解説文の翻訳】
[除外アイテム]セクションでは、特定のカテゴリやページをサイトマップから除外できます。検索エンジンでクロールしたくないアイテムは除外できます。

ページ、投稿、またはカスタム投稿タイプを除外するには、各アイテムのスラッグまたはIDをコンマで区切って入力します。たとえば、「store,cart,checkout」は、これらの3つのページをサイトマップから除外します。

覚えておいてください:あなたのサイトマップにコンテンツを含めていないからといって、Googleがそれを見つけてインデックスに登録するわけではありません。サイトのコンテンツにリンクすると、検索エンジンはそれらのリンクをたどってクロールしますので、NOINDEXの設定を使用して、All In One SEO Packを使用してどのコンテンツがインデックスに登録されるかを制御します。

 

優先順位


すべて上書きしないを選んでください。

サイトマップには各ページごとに、ブログ内の優先順位を設定する項目があります。サイトマップを動的に生成する場合は、自動で優先順位が設定されますので、この項目を変更する必要はありません。

【公式解説文の翻訳】
オールインワンSEOパックの[XMLサイトマップ]ページの上部にある[サイトマップを表示]リンクをクリックすると、各URLの現在の値とともにサイトマップの[優先度]列と[変更頻度]列が表示されます。

これらの設定の両方の値は、URLの最終更新日に基づいて生成されます。したがって、昨日変更されたものは毎日の頻度値を持ち、Priority値は残りのサイトに応じて約0.9(90%)になる可能性が最も高いです。オールインワンSEOパックのこれらのデフォルト設定はすべて上書きしないでください。サイトマップを動的に生成する設定を選択した場合は、サイトマップの変更に応じて優先度と頻度が更新されます。

 

頻度


すべて上書きしないを選んでください。

優先順位と同じような設定なのですが、サイトマップには各ページごとに、更新頻度を設定する項目があります。サイトマップを動的に生成する場合は、自動で更新頻度が設定されますので、この項目を変更する必要はありません。

 

サイトマップを確認する


すべて設定し終わったら、ページ下部にあるサイトマップを更新ボタンを押してください。これでサイトマップが生成されます。

ページ上部のサイトマップのステータス部分にある、サイトマップを表示リンクをクリック(タップ)して、サイトマップを確認してみてください。

そこで表示されたサイトマップの URL を Google と Bing のウェブマスターツールに登録すると完了です。

 

最後に


検索サイトのクローラーは、サイトマップがなくてもブログ内のページを取得しにきてくれますが、確実にページを拾ってくれるわけではありません。サイトマップがあると、掲載したいページをこちらから検索サイトに伝えることが出来ますので、クローラーの正確性が大きく高まります。

頑張って記事を書いても検索サイトに掲載されないと大きなアクセスは見込めません。All in One SEO Pack をインストールしたら、一緒に XML サイトマップの設定も行っておきましょう!

関連リンク


  1. WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き
  2. WordPress – All in One SEO Pack – XMLサイトマップの設定方法
  3. WordPress – All in One SEO Pack – ソーシャルメディアの設定方法
  4. WordPress – All in One SEO Pack – 投稿ページの設定方法

WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き

WordPress - All in One SEO Packの設定を徹底解説

ブログの記事は検索サイトでできるだけ上位に表示させたいですよね。そのために必要なのが SEO:Search Engine Optimization(サーチ・エンジン・オプティマイゼーション)です。日本語に直すと検索エンジン最適化になります。

WordPress の初期状態では SEO が十分に行われているとは言えません。そこで利用してもらいたいのが、All in One SEO Pack というプラグインです。

すでに100万以上の WordPress にインストールされており、実績も十分です。All in One SEO Pack はとても高機能なのですが、その分、設定項目も多く、各項目の理解が非常に難しくなっています。プラグイン自体は日本語化されているのですが、公式サイトの解説が英語になっているため、各設定がなにを意味しているのかわかりにくいのです。

そこでこの記事では、All in One SEO Pack の設定を翻訳し、使い方についてもできるだけわかりやすく解説していきます。

All in One SEO Pack をインストールする


ダッシュボード > プラグイン > 新規追加 で All in One SEO Pack を検索してインストール&有効化しましょう。

プラグインのインストール方法について知りたい方は、こちらのページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

一般設定を行う


インストールが終わったら All in One SEO Pack の設定を行いましょう。いろいろな設定項目があるのですが、まずは一般設定について解説します。

 

1. 一般設定ページに移動する

ダッシュボード > All in One SEO > 一般設定 を選んで、設定ページに移動してください。

 

2. 設定を行う

画像赤矢印の部分で一般設定を行います。各項目の推奨設定と解説(翻訳)を掲載していますので、それを参考にしながら設定してください。

一般設定


  • Canonical URL

チェックしてください。

Canonical URL とは、内容が重複しているのに URL が違うページなどで、重要な方のページを検索サイトに伝えることができる機能です。チェックするとこのようなタグが追加されます。

<link rel="canonical" href="https://example.com/blog/" />

【公式解説文の翻訳】
この設定はデフォルトでオンになっています。これは、Canonical URLsの設定が重複コンテンツに対してGoogleによって処罰されたり、複数のURLが同じコンテンツにつながったりするのを防ぐためです。 Googleではウェブマスターセントラルブログに、Googlebotが重複コンテンツのインデックスを作成する際に直面する問題とその回避方法の詳細を掲載した記事を掲載しています。このチェックボックスをオンにすると、Googleのルールに従うのに役立ちます。

詳細については、Googleのこの記事を参照してください。

 

  • ページネイションをCanonical URLsにしない

チェックを外してください。

通常、トップページには以下のCanonical タグが追加されます。

<link rel="canonical" href="https://example.com/blog/" />

そして 2ページ目には以下のタグが追加されます。

<link rel="canonical" href="https://example.com/blog/page/2/" />

チェックすると 2ページ目以降の Canonical タグをトップページのタグに統一します。つまり 2ページ目以降は、トップページの重複ページという扱いになります。

【公式解説文の翻訳】
このオプションは、Canonical URLからページネーションを削除したいユーザーのために追加されました。通常、ページングされたページまたは投稿の標準URLはhttp://mydomain.com/page/2/に表示されます。このオプションは、Canonical URLから/ page / 2 /を削除します。

 

  • カスタム Canonical URL を有効化

チェックを外してください。

記事ごとに自分で Canonical URL を設定したい方はチェックしてください。

【公式解説文の翻訳】
このオプションをオンにすると、このオプションは、[投稿/編集ページの編集]画面の[オールインワンSEOパック]ボックスに新しいフィールドを追加し、その投稿/ページのカスタム正規URLを設定できます。

 

  • 元のタイトルを利用

無効を選んでください。

【公式解説文の翻訳】
この設定はデフォルトでは無効になっています。サイトのテーマや他のアクティブなプラグインが、あなたのサイトにタイトルタグを書き込むオールインワンSEOパックに干渉している場合は、この機能を有効にする必要があります。

 

  • Schema.org マークアップを使用

チェックしてください。

Schema.org という構造化マークアップのルールに従って検索サイトに情報を伝えます。

【公式解説文の翻訳】
このオプションは、All in One SEO Packが自分のサイトにSchema.orgマークアップを出力しないようにするために追加されました。このマークアップは検索エンジンに情報を提供してリッチスニペットを表示できるため、Schema.orgマークアップのプラグイン全体で徐々にサポートを追加しています。ただし、W3C HTML検証ツールはこの新しいマークアップをサポートしておらず、サイトでこのマークアップを見るとエラーを返します。これらのエラーは無視しても問題ありません。サイトやSEO、検索エンジンのランキングには影響しません。ただし、W3C Validatorを通過し、リッチスニペットを検索結果で犠牲にしたくないクリーンなHTMLマークアップを好む人にとって、このオプションはAll in One SEO PackによるSchema.orgのマークアップ出力を削除します。このオプションは、SEOの目的でSchema.orgマークアップが有効であるため、デフォルトでオンになっています。

リッチスニペットについて詳しくは、Googleのサイト(https://support.google.com/webmasters/answer/99170?hl=ja)をご覧ください。

 

  • ログの重要なイベント

チェックを外してください。

【公式解説文の翻訳】
[重要なイベントを記録する]オプションは、All in One SEO Packプラグイン内で発生するイベントのログファイルを生成します。これは主にデバッグとレポート作成に使用され、プレミアムサポートフォーラムのサポートチームがチェックするように指示されない限り、安全にチェックを外すことができます。

 

ホームページ設定


  • ホームタイトル

ブログのタイトルを入力してください。

【公式解説文の翻訳】
ホームタイトルは、サイトのホームページのSEOメタタイトルです。ホームページのメタタイトルはブラウザの上部に表示され、ホームページのソースに<title>タグの間に表示されます。これは検索エンジンで検索結果にあなたのサイトへのリンクとして表示されるタイトルなので、これをシンプル(60文字以下)にしておくことが重要です。このフィールドに入力したものは、ホームページのソースコードに直接出力されます。あなたのホームページに最新のブログ記事を表示しているのか、静的なホームページ(メインのWordPressメニューの[設定]、[読書]で管理されている)を持っているかに関係なく使用されます。

 

  • ホームディスクリプション

ブログの説明文を入力してください。

どういったブログなのか簡潔に説明しましょう。ここで入力した説明文はこのタグで表示されます。

<meta name="description" content="○○" />

【公式解説文の翻訳】
[ホームの説明]は、サイトのホームページのメタ説明です。これは検索エンジンが検索結果に表示する説明であり、検索結果のタイトルの下に表示されます。説明は230〜320文字にしておき、関連性があることを確認してください(実際の文章で、狂ったキーワードの組み合わせではありません)。メタ記述は提案です.Googleなどの検索エンジンによっては、自分のコンテンツの記述を作成し、メタ記述の代わりに検索結果に表示することがあります。詳細については、Meta Descriptionsのドキュメントを参照してください。 このフィールドに入力したものは、ホームページのソースコードに直接出力されます。あなたのホームページに最新のブログ記事を表示しているのか、静的なホームページ(メインのWordPressメニューの[設定]、[読書]で管理されている)を持っているかに関係なく使用されます。 下のスクリーンショットでは、All in One SEO Pack設定で入力した内容に基づいて、Googleの検索結果にGoogleのサイトのホームタイトルとホームの説明が表示されている様子を確認できます。

 

  • 代わりに固定フロントページを利用する

無効を選んでください。

【公式解説文の翻訳】
SEO Title、Description、Keywordsを設定する場合、All in One SEO Packは常にサイトのホームページを異なる方法で扱いました。これは、WordPressサイトを静的なフロントページまたは最新の投稿を表示する動的ページ(http://codex.wordpress.org/Settings_Reading_Screen)で設定できるためです。ホームページに最新の投稿を表示するようにサイトを設定している場合は、SEOのタイトル、説明、キーワードを設定するために編集できるページはありません。したがって、私たちはいつもあなたのホームページにSEOのタイトル、説明、キーワードを設定している、オールインワンSEOパックに別々のホームページ設定セクションを持っています。

静的なフロントページを代わりに使用するこの新しいオプションでは、静的なホームページからホームページのSEOを制御できるようになりました。これは、設定、WordPressで読むの下に静的なホームページが設定されている場合にのみ機能します。

このオプションを有効にすると、[ホームタイトル]フィールド、[ホームの説明]フィールド、および[ホームキーワード]フィールドが非表示になります。静的なホームページを編集して、そのページのAll in One SEO Packボックスを使用してSEOを制御できます(http://semperplugins.com/documentation/page-settings/)。

 

タイトル設定


  • タイトルを書き換える

無効を選択してください。

各ページのタイトルを書き換えたい場合は、有効を選んでタイトルを設定してください。

【公式解説文の翻訳】
これは、ブラウザタブと<title>タグの間にページのソースに表示されるタイトルタグを参照します。これはデフォルトで有効になっており、下の[書式]フィールドに表示される書式がどのように表示されるかを制御します。

カスタム投稿タイプ設定


  • カスタム投稿用のSEO

有効を選択してください。

【公式解説文の翻訳】
これのデフォルト設定はEnabledです。これは、All in One SEO Packがテーマやアクティブなプラグインによって作成されるカスタム投稿タイプに対して機能するように設定されています。サイト内のカスタム投稿タイプで All in SEO Pack Proを使用しない場合は、[無効]を選択し、画面の上部または下部にある[更新オプション]ボタンをクリックします。

 

  • SEO を行う投稿タイプ

投稿と固定ページをチェックしてください。

記事の投稿ページと固定ページの投稿ページに All in One SEO Pack メイン設定の欄が表示され、細かい設定を行うことができるようになります。

検索サイトでの表示サンプルが見れたりしますので、チェックしておきましょう。

【公式解説文の翻訳】
ここでは、各投稿タイプの横にあるチェックボックスをオンまたはオフにすることで、All In One SEO Packで動作させるカスタム投稿タイプを選択できます。デフォルトでは、標準のWordPress投稿タイプのみがチェックされます。

 

  • 詳細設定を有効化

無効を選択してください。

【公式解説文の翻訳】
詳細オプションを有効にすると、カスタム投稿タイプおよびカスタム分類のタイトルフォーマットを制御するための高度なオプションが表示されます。

 

表示設定


  • カスタム投稿タイプの列ラベルを表示

投稿と固定ページをチェックしてください。

ダッシュボードの投稿一覧、固定ページ一覧に、SEO タイトル・SEO ディスクリプションの欄が表示され、そこから編集できるようになります。

各記事の投稿ページでも同じ項目を編集できるため、絶対に必要というわけではありません。一覧で編集をしない方はチェックを外しておきましょう。

【公式解説文の翻訳】
これは、どの画面にSEOタイトル、SEOキーワード、およびSEO記述列を表示するかを制御します。これらの列には、SEOタイトル、メタ記述、およびメタキーワードを追加したコンテンツの概要が表示されます。投稿/ページテーブル設定のドキュメントを参照してください。 オールインワンSEOパックの列を含むページ画面 デフォルトでは、[投稿とページ]ボックスのみがチェックされていますが、他の投稿タイプを選択することもできます。これらのカラムはテーブルに追加されます。カスタム投稿タイプを作成するときに、より多くのチェックボックスがここに表示されます。

 

ウェブマスター認証


検索サイトの Google と Bing のウェブマスター認証を行っておくと、自分のブログにどんな検索ワードで人が訪れたかを、細かく把握することができるようになります。

どの記事に人気があって、どれだけ検索されているかを把握することは、サイトを分析する上で欠かせない行動なので、ぜひ設定しておきましょう。

 

  • Google ウェブマスターツール

以下のサイトにアクセスしてから自分のブログを登録しましょう。ブログを登録したら所有者を確認する必要が出てきますので、そこで All in One SEO Pack のウェブマスター認証機能を利用します。

Google Search Console(旧名:Google ウェブマスターツール)

 

所有者確認ページで HTML タグを選択するとタグが表示されます。画像赤線部分の文字をコピーして Google ウェブマスターツールのフォームに貼り付けましょう。

Google Search Console の認証方法は複数ありますので、他の方法ですでに認証されている方は、ここで設定する必要はありません。

 

  • Bing Web マスターセンター

Google と同じく、Microsoft が運営している検索サイトの Bing にも、ウェブマスターツールがあります。Bing でもブログを登録して、所有権の確認を行いましょう。

Bing web マスターツール

ブログ登録後、所有権の確認ページに移動します。ここで画像赤線の文字列をコピーして、Bing Web マスターセンターのフォームに貼り付けましょう。これで Bing のサイト所有権の確認が行えるようになります。

Bing も認証方法は複数ありますので、他の方法ですでに認証されている方は、ここで設定する必要はありません。

 

  • Pinterest のサイト検証

Pinterest のウェブサイト確認をすることもできます。以下の機能があるようです。

ウェブサイトを確認すると、あなたのウェブサイトから保存された全てのピンに、あなたのプロフィール画像が表示されます。また、他のユーザーがあなたのウェブサイトからどのコンテンツを保存しているのかを把握することもできます。

公式サイトより

Pinterest にログインすると設定メニューにサイトのドメインを確認するという項目がありますので、そちらにブログのアドレスを入力して、画像のページを表示してください。これはドメインの所有者しか行えません。

画像赤線の文字列をコピーして、Pinterest のサイト検証のフォームに貼り付けてください。

 

Google 設定


Google+ のアカウントをブログの著者として登録するか、または Google アナリティクスをブログで使う場合の設定を行います。SEO 的には大きな効果を及ぼさない項目ですので、Google アナリティクス用の最低限の推奨設定のみ載せておきます。

その他の項目は翻訳を掲載しておきますので、各自で考えて行ってみてください。

 

  • Google+ デフォルトプロフィール

【公式解説文の翻訳】
Googleは最近、検索結果に著者情報を表示して、ユーザーが優れたコンテンツを見つけられるよう支援しました。 2014年8月に、Googleは検索結果に著者の支持を下しました。ただし、Googleの著者やサイト運営者のマークアップをサイトに含めると、他にもメリットがあります。

オールインワンSEO Packを使用すると、Google+プロフィールのURLを入力することで、あなたのサイトの著者マークアップとしてGoogle+プロフィールを追加できます。この情報を設定できる場所は次の2つです。

Googleプラスのデフォルトのプロフィール欄には、サイトのオーナー向けにGoogle+プロフィールを入力できます。これは、コンテンツ作成者ごとにGoogle+プロフィールを指定しない限り、すべてのコンテンツのデフォルトの作成者プロフィールとしてユーザーになります。

オールインワンSEO Packは、WordPressのユーザーの下にある[ユーザーの編集]画面にGoogle+のフィールドを追加します。ここに入力するGoogle+プロフィールは、このユーザーが作成した投稿やページで使用されます。これにより、[一般設定]画面の[Google設定]ボックスに入力されたデフォルトのGoogle+プロフィールが上書きされます。

 

  • Google+ プロフィールを無効化

【公式解説文の翻訳】
[ユーザーの編集]画面にGoogle+のフィールドが表示されないようにするには、[Googleプラスプロフィールを無効にする]チェックボックスをオンにして無効にすることができます。たとえば、メンバーシップサイトを持っていて、メンバーに自分のユーザープロフィールのGoogle+フィールドが表示されないようにするには、このオプションを使用してメンバーを無効にします。 Googleでサイトの所有権を確認する方法の詳細については、こちらの記事をお読みください。

 

  • サイトリンク検索ボックスを表示

【公式解説文の翻訳】
このオプションは、Googleが検索結果に表示するサイトリンク検索ボックスに必要なコードを出力します。サイトリンク検索ボックスについて詳しくは、Googleのウェブサイトをご覧ください。

Googleでは、さまざまな要因を使用して、サイトに関する情報やGoogle検索ユーザーからのさまざまな種類のクエリなど、サイトリンク検索ボックスの表示タイミングを判断します。

 

  • 優先サイト名を設定

【公式解説文の翻訳】
このチェックボックスをオンにすると、GoogleがGoogleナレッジグラフの一部として使用するサイト名を設定できるフィールドが表示されます。これは、WordPressの[設定]、[一般]の[サイトタイトル]に設定されています。

 

  • 高度な作成者情報オプション

【公式解説文の翻訳】
Enabledを選択すると、All in One SEO Pack内のAdvanced Authorship Optionsが有効になります。

 

  • GoogleアナリティクスID

Google アナリティクス(アクセス解析)を利用している方は、ここで ID を登録しましょう。

そうすることで、アクセス解析のコードがブログのソース内に掲載されるようになります。

UA-#########-#

Google アナリティクスのウェブサイトから、上記の ID をコピーして貼り付けましょう。これ以下の設定はすべて Google アナリティクス関連の項目になります。利用しない方は読み飛ばしてください。

 

  • 高度な分析オプション

有効を選んでください。

アナリティクスを利用しない方は設定するフォームが表示されません。

 

  • ドメインのトラッキング

わからない方はチェックしないでください。

【公式解説文の翻訳】
トラッキングドメインオプションは、GoogleアナリティクストラッキングコードのCookieドメインを設定する場合に使用します。デフォルトでは、Cookieドメインは自動に設定されますが、Googleが受け入れるパラメータはすべて入力できます。詳細については、こちらのドメインとCookieに関するGoogleアナリティクスのドキュメントを参照してください。

 

  • 複数のドメインを追跡する

わからない方はチェックしないでください。

【公式解説文の翻訳】
Googleアナリティクスでドメイン間のトラッキングを有効にする場合は、[複数のドメインとその他のドメインを追跡]オプションを使用します。詳細については、ここでのクロスドメイントラッキングに関するGoogleアナリティクスのドキュメントを参照してください。

 

  • IPアドレスを匿名化

わからない方はチェックしないでください。

【公式解説文の翻訳】
Anonymize IP Addressesオプションは、サイト訪問者の完全なIPアドレスを追跡して保存しないようGoogleに指示します。 Googleアナリティクスは、保存前にIPアドレスの最後のオクテットを削除してIPアドレス情報を匿名化します。この機能は、サイト所有者が完全なIPアドレス情報の格納を妨げるプライバシーポリシーまたはデータ保護ルールに準拠するように設計されています。これにより、地理的な報告の精度がわずかに低下することに注意してください。詳細については、Googleのウェブサイトをご覧ください。

 

  • 広告主のトラッキングを表示

わからない方はチェックしないでください。

【公式解説文の翻訳】
Googleアナリティクスのディスプレイ広告主機能は、DoubleClickのCookieを利用する機能のコレクションで、次のようなことが可能です。 特定の行動、ユーザー属性、関心データに基づいてリマーケティングユーザーを作成し、それらのリストをAdWordsと共有する アナリティクスレポートでユーザー属性データとインタレストデータを使用する 人口統計データと関心データに基づいてセグメントを作成する 詳細については、Googleのウェブサイトをご覧ください。

 

  • トラッキングからユーザーを除外

Administrator をチェックしましょう。

これは管理者(あなた)のアクセスを、アクセス解析から除外する設定です。ブログ関係者のアクセスが解析に入ると、正確なアクセス数のカウントができなくなるので、解析上不必要なユーザーはここでチェックしておいてください。

【公式解説文の翻訳】
サイトにログインしたときに自分やユーザーが生成したデータを除外するには、この設定を使用します。 Googleは、ログインしてサイトを自分で操作した場合でも、サイトのページや投稿へのリンクがクリックされると、いつでもそのリンクを追跡します。この設定では、Analyticsのトラッキングデータがスキューされないように削除されます。

 

  • 外部へのリンクを追跡

わからない方はチェックしないでください。

【公式解説文の翻訳】
[送信リンクの追跡]オプションは、サイトから離れたリンク(たとえば、自分のFacebookページや自分が所有する別のWebサイトへのリンクなど)を追跡する場合に使用します。デフォルトでは、Google Analyticsはこれらのリンクを無視し、リンクをクリックしたユーザーは追跡しません。詳細はこちらのドキュメントを参照してください。アウトバウンドリンクを追跡するには、このチェックボックスをオンにすると、オールインワンSEO Packがウェブサイトのソースに必要なコードを追加します。

 

  • 拡張リンク属性

わからない方はチェックしないでください。

【公式解説文の翻訳】
拡張リンクアトリビューションを使用すると、ページにタグを付けて、次のような強化されたリンク追跡機能を実装できます。 すべて同じ宛先を持つページ上の複数のリンクについては、個別の情報を参照してください。たとえば、同じページに2つのリンクがあり、両方が[お問い合わせ]ページにつながる場合は、リンクごとに個別のクリック情報が表示されます。 1つのページ要素に複数の送り先がいつあるかを参照してください。たとえば、ページの[検索]ボタンをクリックすると、複数の宛先が表示される可能性があります。 ボタン、メニュー、およびjavascriptによるアクションを追跡します。 このオプションをオンにすると、ここでの手順に従って、プロパティ設定で拡張リンクの属性を有効にする必要があります。詳細については、Googleのウェブサイトをご覧ください。

 

  • 拡張eコマース

わからない方はチェックしないでください。

【公式解説文の翻訳】
この機能を使用すると、拡張eコマースで、お客様のeコマースサイトでの購入経路をトラッキングすることができます。詳細については、Googleのウェブサイトをご覧ください。

 

Noindex 設定


検索サイトはロボットにクロール(アクセス)させて、ウェブサイトの情報を取得し、検索サイトの結果を構成しています。そのロボットに伝える情報をここで設定します。

検索サイトは重複した内容のページを高く評価しない傾向があります。

カテゴリーや日付のアーカイブページは記事がまとまっているので、読者は記事をまとめて読むことが出来ますが、検索サイトからは個別の記事ページと内容が重複したページだと認識されてしまう可能性があります。

ここをどう設定するかというところが悩みどころになります。

この項目の設定は重要なのですが、さまざまなブログに共通して推奨できる設定はありません。運営者の方がそれぞれのブログに合った適切な設定を考えてください。

 

  • NOINDEX をデフォルト

noindex というのは、以下のタグを追加することで検索サイトに掲載されないページを設定することができます。

<meta name="robots" content="noindex">

検索サイトに載せなくていいページがある場合はチェックしてください。そのページに上記のタグが追加されます。基本的にはチェックする必要はないと思います。

 

  • NOFOLLOW をデフォルト

nofollow というのは、以下のタグを追加することで、検索サイトのロボットにこのページのリンクはたどらなくてもいいと伝えることができます。ここで行き止まりですと指定しておくと、効率的にロボットがアクセスしてくれるようになります。

<meta name="robots" content="nofollow">

チェックすると、そのページに上記のタグが追加されます。基本的にはチェックする必要はないと思います。

 

  • カテゴリーをnoindexにする

チェックすると、カテゴリーのアーカイブページを検索サイトに表示しないようにします。

例)カテゴリーのアーカイブページ

https://gameusers.org/dev/blog/category/blog/wordpress-plugins/

 

  • 日付別アーカイブに noindex を使用

チェックすると、日付別のアーカイブページを検索サイトに表示しないようにします。

例)日付別のアーカイブページ

https://gameusers.org/dev/blog/2018/01/

 

  • 投稿者アーカイブに noindex を適用

チェックすると、投稿者のアーカイブページを検索サイトに表示しないようにします。

例)投稿者のアーカイブページ

https://gameusers.org/dev/blog/author/az1979/

 

  • タグをnoindexにする

チェックすると、タグのアーカイブページを検索サイトに表示しないようにします。

例)タグのアーカイブページ

https://gameusers.org/dev/blog/tag/share-buttons/

 

  • 検索ページに noindex を使用

チェックすると、検索ページを検索サイトに表示しないようにします。ブログ内を検索ボックスで検索した結果です。

例)検索ページ

https://gameusers.org/dev/blog/?s=WordPress

 

  • 404 ページに noindex を使用

チェックすると、404ページを検索サイトに表示しないようにします。ページが見つからなかった場合に表示されるページが 404ページです。

例)404 ページ

https://gameusers.org/dev/blog/404

 

  • ページ付けされたページ/投稿に noindex を使用

チェックすると、ページ付けされたページ/投稿を検索サイトに表示しないようにします。ブログトップやアーカイブページの2ページ目・3ページ目のことです。

例)ページ付けされたページ/投稿

https://gameusers.org/dev/blog/page/2/

 

  • ページ付けされたページ/投稿に nofollow を使用

チェックすると、ページ付けされたページ/投稿のリンクをロボットにたどらないように指示します。

例)ページ付けされたページ/投稿

https://gameusers.org/dev/blog/page/2/

 

詳細設定


主に検索サイトで表示される記事の説明文などを設定します。

 

  • ディスクリプションを自動生成

チェックしてください。

この項目をチェックしておくと、検索サイトで表示される記事の説明文が自動で生成されます。記事ごとに自分で設定したい方は、チェックを外しておいてください。

チェックの有無に関わらず、記事の投稿ページで編集できます。

【公式解説文の翻訳】
[自動生成の説明]設定では、投稿の抜粋、投稿の抜粋がない場合は投稿コンテンツの最初の320文字を使用して、任意の投稿タイプのメタ説明を自動的に生成します。

デフォルトでは、WordPressは投稿内容の最初の55語から抜粋を自動的に生成します。または、「投稿の編集」画面の「抜粋」フィールドに簡単に書き込むこともできます。オールインワンSEOパックは自動生成されたメタ記述のあなたの投稿の抜粋を使用します。抜粋がない場合は、投稿内容の最初の320文字が使用されます。これは、コンテンツがたくさんあり、すべてのページ/投稿にメタ説明を入力したくない場合に特に便利です。投稿またはページを編集して、自動生成されたメタ記述を上書きすることができます。

重要な注意:検索エンジンは、サイトの各ページや投稿のメタ説明を書くことを推奨し、好む。彼らはあなたのコンテンツからあなたのために自動的に生成されたメタ記述にこれを好む。これは良いオンサイトSEOの重要な部分です。追加情報については、Meta Descriptionのドキュメントを参照してください。

 

  • 自動生成説明文に本文を使用

チェックを外してください。

【公式解説文の翻訳】
デフォルトでは、All in One SEO Packは、自動生成されたメタ記述として投稿からの抜粋を使用し、抜粋が存在しない場合は、コンテンツを使用するようになります。この動作を変更したいユーザーもいます。この設定では、自動生成されたメタ記述のポストコンテンツが常に使用され、ポスト抜粋は無視されます。

WooCommerceユーザーは、この設定が追加され、自動生成されたメタ記述がProduct Short Descriptionではなく製品コンテンツから生成されることに注意してください。メタ説明にProduct Short Descriptionを使用しない場合は、この設定を有効にします。

 

  • 自動生成された説明でショートコードを実行

チェックを外してください。

【公式解説文の翻訳】
この設定では、メタ記述を自動生成する前に、投稿コンテンツに含まれるショートコードが確実に実行されます。一部のページ作成者がショートコードの中にコンテンツをラップするため、このオプションが追加されました。この設定は、メタ記述が自動生成される前にこれらのショートコードが実行されるため、メタ記述がサイトに表示されているコンテンツとより密接に似ていることを意味します。

 

  • ページ区切り付きページの説明を削除

チェックを外してください。

チェックすると2ページ目以降にディスクリプションが表示されなくなります。これによりサイト内でディスクリプションが重複することを防げますが、SEO 的に大きなデメリットではないためチェックする必要はありません。

2ページ目以降のページを重要視しない設定にされている方はチェックしておくといいでしょう。

【公式解説文の翻訳】
ページが設定されたページの説明を削除するオプションは、Googleウェブマスターツールで重複したメタ説明の警告が表示されないようにするためのオプションです。これは主要なペナルティの原因ではないため、デフォルトではチェックされていません。このボックスをオンにすると、ページ記述されたコンテンツの最初のページにのみMeta Descriptionが表示され、その後に続くすべてのコンテンツページからメタ記述が削除されます。 WordPress.comでこのページの内容を改ページしてください。

 

  • 長いディスクリプションを短縮しない

チェックを外してください。

ページの説明文が長すぎるのはよくありません。適当な長さにする必要がありますので、チェックを外しておくことを推奨します。

【公式解説文の翻訳】
デフォルトでは、All in One SEO PackはMeta Descriptionsを320文字に切り詰めます。つまり、1つのSEO PackでオールインのSEO記述フィールドに入力したテキストはすべて短縮されます。オールインワンSEOパックにあなたの説明を切り捨てずにそのまま出力したい場合、このボックスにチェックを入れてください。

 

  • 投稿メタフィールドの保護を解除

チェックを外してください。

【公式解説文の翻訳】
フィールド名の前にアンダースコア(_)を使用してカスタムフィールドを内部フィールドとして作成した場合、このオプションを使用すると、[編集後のページの編集]画面の[カスタムフィールド]ボックスのユーザーと、 WordPressモバイルアプリケーションなどのXMLRPCを使用するものすべてに適用されます。これにより、フィールドがプライベートからパブリックに効果的に変更されます。

 

  • 投親投稿への添付ファイルをリダイレクトします

チェックを外してください。

【公式解説文の翻訳】
この設定は、メディア添付ファイルのURLを親の投稿にリダイレクトします。画像を投稿/ページに埋め込み、添付ファイルページにリンクすると、訪問者が画像をクリックすると親の投稿にリダイレクトされます。

 

  • 固定ページを除外する

空欄にしてください。

【公式解説文の翻訳】
このフィールドにポスト名またはページ名のコンマ区切りリストを入力すると、All in One SEO Packはそのページまたは投稿のメタ情報を何も出力しません。 1つのSEO PackのオールインワンボックスはPost / Page編集画面に表示されますが、入力した内容はそのページまたは投稿のソースコードには出力されません。 All in One SEO Pack Proを使用してXMLサイトマップを生成している場合、ページまたは投稿はXMLサイトマップに表示されます。

 

  • 投稿のヘッダーに追加記入

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、すべての投稿のHEADに出力されます。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、All in One SEO Packに追加の投稿ヘッダーを追加することもできます。

 

  • 固定ページのヘッダーに追加記入

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、すべてのページのHEADに出力されます。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、All in One SEO Packにページヘッダーを追加します。

 

  • フロントページのヘッダー追加

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、サイトの先頭ページのHEADに出力されます。フロントページは、設定、閲覧、または最新の投稿を表示するように設定している場合はホームページの静的ページとして設定したページです。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、フロントページヘッダーをAll in One SEO Packに追加できます。

 

  • 追加ブログページヘッダー

空欄にしてください。

【公式解説文の翻訳】
このフィールドに入力するコードは、サイトのブログページのHEADに出力されます。ブログページは、設定、読書、または最新の投稿を表示するように設定している場合はホームページに静的ページとして設定したページです。このフィールドは、HTML、JavaScript、およびjQueryを受け入れます。 PHPは受け付けません。また、APIアクションフックを使用して、ブログページヘッダーをAll in One SEO Packに追加することもできます。

 

キーワード設定


記事ごとのキーワードを設定します。現在は SEO 的にキーワードは有効ではなくなっているようですので設定する必要はありません。

無効を選択してください。

 

最後に


非常に長くなりましたが、これで一般設定の解説は終わりです。ページ最下部で設定を更新ボタンを押してもらうと、ブログに設定が反映されます。

これで検索サイトからの評価も高まるはずです。後は頑張って価値のある記事を書いていきましょう!

All in One SEO Pack はまだまだ機能があり、サイトマップを生成する機能や、ソーシャルメディアの設定なども用意されています。そちらの機能についても解説していますので、関連リンクをチェックしてみてください。

関連リンク


  1. WordPress – All in One SEO Packの使い方&設定を徹底解説!翻訳付き
  2. WordPress – All in One SEO Pack – XMLサイトマップの設定方法
  3. WordPress – All in One SEO Pack – ソーシャルメディアの設定方法
  4. WordPress – All in One SEO Pack – 投稿ページの設定方法

WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

WordPress カテゴリー別・新着記事

検索サイトからのユーザーが目的の記事を読んだ後、他の記事も読んでくれたら嬉しいですよね。そういう考えで「最近の投稿」をサイドバーに掲載している方は多いと思います。

ですが、ここで自分のブログについて考えてみてください。検索サイトから来てくれた方が必要としている記事が「最近の投稿」にしっかりと並んでいると思いますか?テーマをひとつに絞って書かれてるブログの場合は問題ないと思います。ただ雑多な内容になってしまっているブログの場合は、アクセスしてくれた方が求める記事へのリンクを的確に提供できているとは言えないのではないでしょうか。

実はこのブログもそうなんです。Game Users というサイトの開発情報を掲載するために始めたブログなのですが、WordPress のプラグインを開発してから、WordPress についての記事も書くようになりました。そのため記事の内容に幅ができてしまったのです。

WordPress の情報を求めてブログを訪ねて来てくれた方が、まったく関係のない開発情報の記事を読んでも面白くないと思いますので、新着記事の表示もカテゴリー別に分けることにしました。

そこで使わせてもらったのが、WordPress Popular PostsWPP Plus Widget というプラグインです。この記事では、コードをコピーして貼り付けるだけで、当ブログと同じ新着記事を表示できる方法を解説しています。

この記事の解説に従って設定すると、トップページではブログ全体の新着記事が表示され、個別の記事ページではその記事が所属しているカテゴリーの新着記事が表示されるようになります。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

この記事は以下の記事の続きになります。必要なプラグインのインストールなどを済ませてから、こちらの記事を読んで下さい。

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

新着記事を表示する


新着記事は ダッシュボード > 外観 > ウィジェット で表示の設定を行います。WPP Plus Widget のインストールが済んでいると、新着記事というウィジェットが追加されています。

新着記事をサイドバーに表示する

左側に新着記事と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、新着記事の欄をクリック(タップ)して開いてください。

 

新着記事の設定

設定 解説
タイトル 最新記事と入力してください。ブログトップページに表示される新着記事のタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」の最新記事と入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示される新着記事のタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示している新着記事のカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ 任意の数字 を半角で入力してください。カテゴリーの設定によって適切な値が変わってきます。いろいろ入力して納得の行く表示になる数字を見つけてください。カテゴリーの深さについて開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
記事数 10 を選択してください。新着記事の表示件数を設定します。10 を選択すると記事が 10 件表示されます。

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

サムネイル 解説
noimageのURL 200px × 200px の画像をメディアにアップロードして、その画像の URL を指定してください。新着記事の一覧にはサムネイル画像が表示されますが、各記事にアイキャッチ画像が設定されていない場合、ここで設定した画像が代わりに表示されます。
画像サイズ(横幅/高さ) 100 / 100 を入力してください。新着記事に表示されるサムネイル画像のサイズを指定します。

 

オプション 解説
表示記事を除外する チェックしてください。ブラウザに表示しているページは新着記事の一覧に表示されなくなります。
トップページで表示しない チェックを外してください。新着記事の一覧をトップページに表示したくない場合はチェックしてください。
カテゴリページで表示しない チェックを外してください。新着記事の一覧をカテゴリーページに表示したくない場合はチェックしてください

 

1. noimage の設定方法: 画像をアップロードする

ダッシュボード > メディア > ライブラリ新規追加ボタンを押して、画像をアップロードしましょう。200px × 200px のサイズの画像を推奨します。スマートフォンやタブレットでは倍のサイズをアップロードして、半分のサイズで表示すると綺麗に表示されます。

 

2. noimage の設定方法: 画像の URL を取得する

アップロードした画像をクリック(タップ)すると、画像の表示になると思います。ここで URL と書かれたフォームの中身をコピーしましょう。

 

3. noimage の設定方法: 画像の URL を貼り付ける

サムネイルの noimageのURL 欄にコピーした画像の URL を貼り付けてください。

 

ウィジェットの設定を保存する

すべての設定が終わりましたら、右下にある保存ボタンを押してください。これで新着記事のウィジェットの設定は終わりです。

スタイルシートを適用する


このままでも新着記事は表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category New List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。新着記事にスタイルシートが適用されます。

新着記事の完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、新着記事はこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Fifteen の場合

サイドバーのサイズが狭いため、サムネイル画像と文字のバランスが悪くなってしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > 新着記事 に戻り、サムネイルのサイズを調整します。

サムネイル欄の画像サイズを 100 → 60 に変更して保存してください。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

width: 100px;
  ↓↓↓
width: 60px;

この 100px と書かれている部分を 60px に編集して更新してください。これで新着記事に表示されるアイキャッチ画像のサイズが小さくなります。

 

完成!

アイキャッチ画像が小さくなり、文字とのバランスが良くなりました。上記で解説した部分を編集して、使用しているテーマに合ったデザインに変更してください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


カテゴリー別に新着記事を表示することで、関連の深い記事を読者に紹介することができますので、より魅力的なブログに感じてもらえるのではないでしょうか。

ぜひ人気記事ランキングと一緒に設定してみてください。

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

WordPress カテゴリー別人気記事ランキング

当ブログでサイドバー(スマホの場合はページ下部)に表示しているアイキャッチ画像(サムネイル)付きの人気記事ランキングと新着記事を表示する方法を紹介していきます。

この記事の解説に従って設定すると、トップページではブログ全体の人気記事ランキングが表示され、個別の記事ページではその記事が所属しているカテゴリーの人気記事ランキングが表示されるようになります。

プラグインをインストールして、コードをコピペするだけで、このブログと同じランキングを利用することができます。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

必要なプラグインをインストールしよう


人気記事ランキングを表示するには、WordPress Popular Posts、WPP Plus Widget、Simple Custom CSS and JS という3つのプラグインが必要になります。

 

人気記事のアクセス数をカウントしてランキングにして表示します。ベースになるプラグインなので必須です。

WordPress Popular Posts の機能を利用して、カテゴリー別に人気記事ランキングを表示します。WPP Plus Widget 単独では動作しませんので、WordPress Popular Posts とセットになります。

人気記事ランキングと新着記事のスタイルシートを設定し、 No.1、No.2、No.3 と書かれた文字を Web フォントで表示するために必要になります。子テーマなどを利用して自分でデザインをカスタマイズする方は必須ではありません。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

 

WordPress Popular Posts と Simple Custom CSS and JS は、ダッシュボード > プラグイン > 新規追加 ページでそれぞれの名前を検索してインストール&有効化してください。

WPP Plus Widget はプラグインをダウンロードしてから、ダッシュボード > プラグイン > 新規追加 ページでプラグインのアップロードを行って、インストール&有効化する必要があります。

http://8wired.jp/wpp-plus-widget

上記ページから、最新版(記事を書いてる時点では Ver. 0.4.4)をダウンロードしてインストールしてください。

プラグインのインストール方法について詳しく知りたい方は、こちらの記事を参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

WordPress Popular Posts の設定


最初に WordPress Popular Posts の設定を行う必要があります。ダッシュボード > 設定 > WordPress Popular Posts > ツール を選んで、画像のページを表示させてください。

そして以下の設定を行いましょう。

設定 解説
デフォルトのアイキャッチ画像 画像をアップロードしてください。人気記事ランキングには記事ごとに設定しているアイキャッチ画像が表示されます。アイキャッチ画像が記事に設定されていない場合に表示されるデフォルト画像を設定します。
画像の取得元 アイキャッチ画像を選択してください。
閲覧を記録する対象者 訪問者のみを選択してください。これを選ばない場合、自分のアクセスも人気記事ランキングに反映されてしまいます。表示のテストをする場合は、全員を選んで自分でアクセスを行ってランキングを表示させるのもありです。アクセス数がゼロの場合はランキングが表示されません。
プラグインのスタイルシートを使う 無効を選択してください。今回はオリジナルのスタイルシートで人気記事ランキングのデザインを行いますので、プラグインに付属しているスタイルシートは利用しません。

それぞれ設定を行ったら、その場所にある適用ボタンを押すのを忘れないようにしてください。

アイキャッチ画像については以下の記事で解説しています。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

人気記事ランキングを表示する


人気記事ランキングは ダッシュボード > 外観 > ウィジェット で表示の設定を行います。

WPP Plus Widget をサイドバーに表示する

左側に WPP Plus Widget と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、WPP Plus Widget の欄をクリック(タップ)して開いてください。

 

WPP Plus Widget の設定

設定 解説
タイトル 今週の人気記事ランキングと入力してください。ブログトップページに表示されるランキングのタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」今週の人気記事ランキングと入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示されるランキングのタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示しているランキングのカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ を入力してください。開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
パラメータ limit=10
range=last7days
order_by=views
thumbnail_width=200
thumbnail_height=105
excerpt_length=50
stats_comments=0
pid=
上記を入力してください。

 

パラメータ 解説
limit 人気記事ランキングに表示される記事の数です。10 を入力すると 1 位~10 位まで表示されます。
range ランキングを計測する期間です。指定した期間内で人気ランキングの順位が決まります。以下の値を入力することができます。
last24hours: 1日
last7days
: 1週間
last30days
: 1ヶ月
all
: 全期間
order_by ランキングを並び替える基準です。以下の値を入力することができます。
comments: コメント数が多いと上位
views
: 訪問者数(アクセス数)が多いと上位
avg
: 1日あたりの平均ビューが多いと上位
thumbnail_width サムネイルの横幅です。半角数字を入力してください。解説では 200 の入力を推奨していますが、サイドバーの横幅が狭いテーマの場合は小さくしてください。
thumbnail_height サムネイルの縦幅です。半角数字を入力してください。解説では 105 の入力を推奨していますが、上記で設定したサムネイルの横幅に合わせて適切な値を入力してください。
excerpt_length 人気記事ランキングに記事の抜粋文を表示させる場合、表示させる抜粋文の文字数を指定します。
stats_comments 1 / 0
1 を入力するとランキングにコメント数を表示します。0 の場合は表示しません。
pid 1,2,3,4,5
人気記事ランキングに表示しない記事を指定します。ページ ID を入力してください。例えば同じタイプの記事が上位に並んでいる場合に内容のかぶっている記事を除外することで、ランキングに多彩さが生まれます。ページ ID の取得方法

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

オプション

表示記事を除外するをチェックしてください。現在、ブラウザに表示されている記事はランキング内に表示されなくなります。

 

保存する

すべて設定しおわったら保存ボタンを押しましょう。これで人気記事ランキングのウィジェットの設定は終わりです。

スタイルシートを適用する


このままでもランキングは表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category Popular List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングにスタイルシートが適用されます。

Web フォントを適用する


人気記事ランキングのランキングの数字に Web フォントを適用します。絶対に必要な設定ではないのですが、普通のフォントよりもずっと見た目が良くなるので、設定することをおすすめします。

 

1. HTML を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom HTML をクリック(タップ)してください。HTML を追加するページに移動します。

 

2. Web フォントを読み込むコードを入力して保存する

タイトルを入力するフォームに Web Fonts と入力しましょう。そしてその下の <!– –> に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングに Web フォントが適用されます。

WordPress での Web フォントの利用について詳しく知りたい方はこちらの記事を参考にしてください。

WordPress – Webフォントの使い方

人気記事ランキングの完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、人気記事ランキングはこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Sixteen の場合

サイドバーの横幅が狭いので、ランキングの数字が重なって表示されてしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > WPP Plus Widget に戻り、サムネイルのサイズを調整します。

パラメータの欄の thumbnail_width を 200 → 150 に変更、thumbnail_height を 105 → 79 に変更して保存してください。これで人気記事ランキングに表示されるアイキャッチ画像のサイズが小さくなります。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

content: 'No. ' counter(wpp-count);
        ↓↓↓
content: '' counter(wpp-count);

この No. と書かれている部分を削除して更新してください。これで人気記事ランキングのランキングの数字部分から、No. という表示が消えます。

 

完成!

アイキャッチ画像のサイズが調整され、No. の表示が消えたことで、ランキングのデザインが綺麗に整いました。

 

それ以外にデザインに影響を与える主な変更ポイントは、スタイルシートのフォントの欄です。

赤枠部分のフォントサイズを変更すると、ランキングの数字の大きさが変わります。また ‘Limelight’ と書かれている部分のフォント名を変更すると、ランキングの数字のフォントが変わります。フォントを変更する場合は、Web フォントを読み込む HTML コードも同時に変えてください。

上記の解説部分を編集しながら、お使いのテーマに合ったデザインを完成させてください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


人気記事ランキングを表示しておくと、読者が他の記事も読んでくれるようになりますので、ブログのアクセスアップに繋がることは間違いありません。頑張って設置してみましょう!

記事が長くなりましたので、現在表示しているページと同じカテゴリーの新着記事を表示する方法は、他の記事に分けて解説させていただきます。

WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

Game Users Share Buttons v1.2.1 更新情報

WordPress のプラグインで利用した際に、Top(記事の上) と Bottom(記事の下)に指定したシェアボタンの詳細設定を行えるようにしました。

Top & Bottom 詳細設定


シェアボタンを表示するページを指定できます。トップページ、個別投稿ページ、固定ページ、アーカイブページ、それぞれ表示したい場所をチェックして保存してください。

トップページやアーカイブページは通常、記事が一覧で表示されます。そしてそれぞれの記事部分にシェアボタンが表示されるのですが、各記事のシェア数を個別に取得しているわけではないので、実質トップページならトップページのシェア数が表示されているだけです(複数のシェアボタンに同じシェア数が表示されています)

そのため、一覧ページでは記事ごとにシェアボタンを表示する意味はないのではないかと考え、トップページやアーカイブページなどでは、シェアボタンを表示しない設定を行えるようにしました。

またこれまでは、シェアボタン編集 → 余白設定で記事とシェアボタンの間隔を調整していましたが、画像の余白欄で、Top と Bottom の間隔を個別に設定できるようにしました。今後はこちらで余白を設定していただけるとありがたいです。

簡単に貼り付けられる Code を表示


編集タブに表示されているシェアボタンを簡単に貼り付けられるコードを表示するようにしました。

Code 1: 1ページにつきひとつだけ貼ってください。

<script type="text/javascript" src="https://example.com/blog/wp-content/plugins/game-users-share-buttons/js/share-bundle.min.js"></script>

Code 2: シェアボタンを表示したい場所に貼ってください。

<div data-game-users-share-buttons="gameusers1-m2a4oi43"></div>

Code ボタンを押すとテキストエリアが開いて上記のようなコードが表示されます。記事の上部・下部以外に貼り付けたい場合は、テキストエリアに表示されているコードを利用してください。

貼り付けコードを変更しました


これは大きな変更なのですが、シェアボタンを貼り付けるためのコードを変更しました。

変更前

<div id="game-users-share-buttons" data-theme="gameusers1-olxdmwzh"></div>

変更後

<div data-game-users-share-buttons="gameusers1-olxdmwzh"></div>

HTML の仕様では、同じ id が複数存在しているのは間違いということを知り、修正を行いました。今後は id ではなく、data 属性を利用して、Game Users Share Buttons の表示を行います。

コードを貼り付けて利用している方がおられましたら、お手数ですがシェアボタンを再ダウンロードし、貼り付けコードの変更を行ってください。

Feedly のシェアが行えなくなっていた問題を修正


Feedly の仕様が変更されたようで、シェアが正常に行えなくなっていましたが、v.1.2.1 で修正を行いました。

リンク


WordPress 記事にソースコードを埋め込むテクニック&プラグイン紹介

WordPress 記事にコードを埋め込む

解説系の記事を書いていると、HTML のタグや、JavaScript、スタイルシートなどのソースコードを埋め込んで紹介したくなるときがあります。

この記事ではそんな時に使える、簡単にコードを貼れるタグ、ウェブサービス、おすすめのプラグインを紹介していきます。

簡単にコードを貼れるタグ


まずは簡単にコードを貼れるタグを紹介します。

HTML ではコードを貼る時に、<pre> タグを利用するのが一般的です。<pre></pre> に囲まれたコードは、スペースや改行などがそのまま表示されますので、コードを貼るときに便利です。

プラグインなどを使うまでもない、ちょっとしたコードを貼るときに利用してみてください。

<pre></pre>

<p>シンプルな状態</p>

なにも変更せずにシンプルな状態で <pre> タグを利用すると、上記のような表示になります。

 

<pre style=”color: #ffffff; background-color: #000000;”></pre>

<p>黒色の背景に白文字</p>

背景を黒くして白文字で内部を表示する <pre> タグです。強調されて文字も見やすくなります。プログラマーの方が運営されているブログの場合は、コマンドプロンプトのコマンドを紹介する際などに利用すると、わかりやすいのではないかと思います。

ただし長いコードを入力すると…

<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>

横向きのスクロールバーが表示され、スクロールしないと全文が見えなくなってしまいます。見にくい上に、コピーしてコードを利用してもらう場合に選択しづらいため、読者に余計な手間をかけることになってしまいます。

 

<pre style=”color: #ffffff; background-color: #000000; overflow: auto; white-space: pre-wrap; word-wrap: break-word;”></pre>

<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>

そこでおすすめしたいのが、この <pre> タグです。適当なところで自動で折り返すようになっていますので、選択がしやすくコピーも簡単です。このブログでもよく使っているタグなので、よければ使ってみてください。

黒背景が気に入らない場合は color: #ffffff; background-color: #000000; を削除して利用してください。

Gist – ウェブサービスを使う


コードを埋め込んで貼り付ける場合、これが一番おすすめの方法です。

ちょっとしたものだと、<pre> タグで十分なのですが、長いコードを貼りたいときは専用のサービスを利用すると、埋め込んだコードに色がついて綺麗に表示され、とても読みやすくなります。

プラグインに比べると少し手間はかかるのですが、プラグインをインストールしなくて済むので、WordPress が無駄に重たくならないというメリットもあります。

ここで紹介している Gist は GitHub が運営している、手軽に各種コードを管理できるウェブサービスです。

 

Gist でコードを貼り付けるとこんな感じになります

バージョン管理もできるので、過去のコードをチェックすることも可能です。コードを編集した後に、あれ、前のコードどんなだっけ?ということがなくなります。

Gist を利用するには、GitHub のアカウントが必要になります。アカウントの作り方から解説しますので、Gist を利用してみたい方は記事を参考にしながら試してみてください。

Gistの使い方


1. Gist のページに移動する

Gist: https://gist.github.com/

上記のサイトにアクセスして、Sign in と書かれているボタンを押してください。

 

2. 新規アカウント作成ページに移動する

Create an account. と書かれた部分を押して、アカウント作成ページに移動しましょう。GitHub のアカウントをすでに持っている方は、このページでログインしてください。

 

3. アカウントを作成する

Username: ユーザーネーム
This will be your username. You can add the name of your organization later.
翻訳:これはあなたのユーザー名になります。後で組織の名前を追加できます。

Email address: メールアドレス
We’ll occasionally send updates about your account to this inbox. We’ll never share your email address with anyone.
翻訳:この受信トレイにアカウントの更新情報を送信することがあります。あなたのメールアドレスは決して誰とも共有しません。

Password: パスワード
Use at least one lowercase letter, one numeral, and seven characters.
翻訳:少なくとも1つの小文字、1つの数字、および7つの文字を使用します。

入力したら Create an account ボタンを押しましょう。

 

4. Gist を利用する

アカウントを作成したらログインして、さきほどの Gist トップページに移動しましょう。画像のページが表示されたら、コードの説明文・ファイルネーム・埋め込みたいコードを入力しましょう。

ファイルネームは拡張子も一緒に入力してください。html の場合は .html、スタイルシートの場合は .css、JavaScript の場合は .js、こんな感じです。

入力し終わったら、Create public gist ボタンを押しましょう。これは公開用のコードを作成するボタンです。今回は WordPress で公開しますので、secret ではなく public を利用します。

 

5. 埋め込み用コードを取得する

コードが作成されると、このような画面になります。画像赤線の Embed と書かれた場所に、埋め込み用のコードがありますので、コピーして WordPress の投稿ページに貼り付けましょう。貼り付けるときは、テキストエディタで行ってください。ビジュアルエディタを利用すると正常に表示されません。

 

6. 完成!

スタイルシートのサンプルコードを埋め込んでみました。

 

7. 編集するときは?

コードが間違っていて編集したいときは、画像のページに移動して、Edit ボタンを押しましょう。編集用のフォームが表示されます。

Gist のページに移動するときは、埋め込みコードのファイル名のリンク(今回の場合は sample.css と書かれた部分)「sample.css hosted with ❤ by GitHub」を開いてください。

これまでに投稿したコードの一覧を見れたりもしますので、管理もしやすくなっておすすめです。英語のサイトでアカウントを作成するのは、若干ハードルが高く感じてしまうかもしれませんが、慣れてしまえば簡単なので、ぜひ試してみてください。

コード埋め込みプラグインの紹介


WordPress には、コードを埋め込むためのプラグインがたくさんあります。これらのプラグインを利用すると、最も簡単にコードを埋め込むことができるようになります。それぞれ見た目や使い勝手が違いますので、いろいろ試してみて気に入るものを見つけてください。

高機能なものから、シンプルで軽量なプラグインまで、さまざまなものが揃っています。コードを貼り付けたときのサンプル画像付きで、各プラグインを紹介しています。

最後に


それぞれの方法にメリット・デメリットがありますので、自分の使い方に合った方法を採用してください。

<pre> タグ
メリット:簡単に貼れる。
デメリット:色がつかないのでコードが長いと読みづらい。

Gist(ウェブサービス)
メリット:バージョン管理ができる。これまでに投稿したコードを一覧でチェックできる。
デメリット:アカウントを作らなければならない。<pre> タグやプラグインに比べると手間がかかる。

プラグイン
メリット:最も簡単にコードを貼れる。
デメリット:プラグインをインストールするので WordPress が重たくなる可能性がある。