Game Users 開発ノート – 一緒に開発しよう！

2018年2月22日2018年6月19日

プログラム配信 – Node.jsでGame Usersを書き直したい

現在、PHP と JavaScript で作られている Game Users を React & Node.js で書き直したいと思っています。そのために Node.js の使い方を覚えなければならないので勉強しながら作っていきます。

今やっていること – 2018/6/19

トップページ、ゲームコミュニティ一覧、ユーザーコミュニティ一覧、ログインページのデザインが終わり、いよいよメイン機能であるコミュニティページのデザインを行うところまで来ました。

掲示板の使い勝手が悪いので、改善案を出してもらいながら、新しいデザインを考えようと思います。

現在、解決できていない問題

Cloud9 の IDE で ESLint が正常に動きません。airbnb の構文チェックを利用したいのですが機能せず。

以下のページで Cloud9 に入れるといいプラグインについて書かれていたので、入れてみたのですが、それでも動きません。どなたか詳しい方おられましたら教えてください。

https://stackoverflow.com/questions/45572719/use-eslint-on-cloud-9-ide

プラグイン：https://github.com/michaelmitchell/c9.ide.language.javascript.eslintd

AWS Cloud9

Cloud9 を VPS 上に設定して、ブラウザさえあれば、みんなで開発できる環境を作ってみました。

開発中のウェブサイト（ログイン不要・リアルタイムでコードが反映されます）

ゲストアカウント

アカウントID：956477059000
ユーザー名（どちらか）：guest-1, guest-2
パスワード：Password12345

ゲストアカウントでログインすると以下のページが見れるようになります。管理者がいないときは、ゲストアカウントは Read Only になっています。

ログアウトするときはブラウザを閉じるだけで OK です。ゴミ箱ボタンは押さないようにしてください。

マスターアカウント

プログラマーやデザイナーの方、または HTML ＆ CSS が理解できる方にはマスターアカウントのログイン情報を、IDE のチャット欄で提供しています。マスターアカウントを利用したい方はいつでも言ってください。

マスターアカウント（master-1～5）でログインできる方は、以下の Cloud9 環境も利用できます。同じ環境で、同時に違うファイルを編集した場合、トランスパイル時にエラーが出ると、他の人もそのエラーに巻き込まれてしまうので、同じ開発環境を複数用意しました。いろいろ試してみたい方は、こちらの環境（URL）にアクセスして、好きなようにファイルを作成・編集してみてください。

git cloneで複製しているだけなので、ぐちゃぐちゃになっても大丈夫です。

こちらの環境はメインの環境を定期的にクローンしていくつもりなので、継続して編集したいファイルがある場合は、手動でメイン環境の方にファイルをコピーしてもらうか、手元に作ったファイルをダウンロードしておいてください。クローン後にアップロードしてもらって制作の続きを行ってもらえればと思います。

別の環境とのファイル共有方法ですが、すごくアナログな方法しか思いつかなかったので、もっとスマートな方法があったら、ぜひ教えてください。

共同開発用リポジトリ

https://github.com/gameusers/collaboration

メモ

2018/6/4

デザインを考えているのですが、機能性といいデザインを両立するのが大変で、かなりしんどいです。基本的に既存のものの切り貼りや、ちょっとしたアレンジで乗り切っていますが、ゼロから想像するセンスがないため、いろいろな面で妥協しないといけなくなるのが辛いです。

現在はカード型デザインでゲームの一覧を表示、検索もできるようになるページのデザインを考えるところです。

2018/5/23

Material UI バージョン 1.0.0 に対応しました。これまでと書き方が変わっていたので、戸惑う方もいるかもしれません。

import Button from '@material-ui/Button';
　　　↓↓↓
import Button from '@material-ui/core/Button';

開発版が終わって、core をつけなければならなくなりました。

あと Next.js を 6.0 にしてから、getInitialProps （最初に処理される constructor みたいなもの）が正常に動かなくなっていたので、こちらのページを参考に裏側の処理を書き直しました。

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Node.js なのですが、ブラウザの表示サイズをサーバー側で取得することができないようです。PHP はできていたような気がするのですが。PC でアクセスしたときとスマホでアクセスしたときに表示の違いを設けたいのですが、CSS のメディアクエリですべてを処理するのは大変なので、JavaScript のサーバー側でも取得したいのです。でも方法がわからず。

2018/5/9

スタイルシートですが、Next.js がデフォルトに定めている styled-jsx よりも styled-components を使った方がいいような気がしてきました。

複雑な分岐を行う場合などに、クラスの内部にそれ用の function を作ってコンポーネントを返すような構成にすると、styled-jsx がちゃんと反映されません。Material UI を使うときだけ、styled-components を使うというルールもいまいちしっくりこないので、styled-components に統一した方がいいのかなと思ってきました。

まさかスタイルシートでこんなに悩むとは思いませんでした。

また Next.js のバージョンを 6.0 に変更しました。babel-plugin-transform-class-properties というプラグインを入れろという警告が出たので、それを入れて設定もしておきました。コードの書き方や、動作には特に変更がないようです。

2018/4/23

Next.js で Material UI を使う方法ですが、前回やっていた方法では、サーバーサイドレンダリング時にスタイルシートが正常に適用されていない。なぜか遅れて適用される？ため、設定を見直しました。

上記サンプルを参考にしながら、設定してみました。

Next.js はデフォルトで styled-jsx というスタイルシートの記述法を採用しているのですが、それを使った場合はサーバーサイドレンダリングする際に、Material UI のコンポーネントに正常にスタイルシートが適用されず、styled-components を使うと正常に適用されるという状況になりました。

設定方法が悪いだけかもしれないのですが、今のところ対処法がわからないので、Material UI のコンポーネントを使うときだけそうしています。

Next.js で Material UI を使う際の書き方がわかる方おられましたら、ぜび教えてください。

2018/4/20

Next.js で Material UI を使おうとしたのですが、Material UI のコンポーネントにスタイルシートを適用する方法がわからず1日を費やしてしまいました。

Material UI の公式ページに書かれている方法と、Next.js が推奨しているスタイルシートの書き方が違うため、どう書けば正常に表示されるのか理解するのに時間がかかりました。

結局、以下の書き方でいけました。Material UI のコンポーネントはグローバルスコープのスタイルシートが必要なようです。

<style jsx global>{`
  .list-1 {
    background-color: #81F7F3;
  }
  .list-2 {
    background-color: pink;
  }
`}</style>

2018/4/18

複数人の開発者で同時に各ファイルを編集した場合、誰かがエラーを出すと他の開発者にもエラーが出て、開発がスムーズに進まないという問題が発覚しました。

同じ環境でトランスパイルが行われるわけですから、考えてみれば当然なのですが、今まで気づきませんでした。同時に違うファイルを触れないというのは結構致命的な問題です。

そこで Cloud9 の環境を複数用意して、それぞれの開発者が別のファイルを気軽に触れるようにしてみました。

マスターアカウントでログインできる方は、そちらの環境でも開発が行えます。git clone で複製しているだけなので、細かいことは気にせずいろいろ試してみてください。

2018/4/17

Next.js を試してみたところ、とても優秀だったので採用することに決めました。サーバーサイドレンダリングの機能や、Code Splitting をデフォルトで行ってくれるのは非常に便利です。ただすべての機能を提供してくれるわけではないので、結局、自分で Express を利用したサーバー用コードを書かないといけない部分も多くあるのですが。

それと Next.js はデータベースへのアクセスをすべて API で行うことを推奨しているようです。そこそこの規模のサイトになると、そういった構成が増えてくるのかもしれないのですが、自分は小規模なサイトしか作ったことがないので、初めての経験でちょっと不安です。

またそれに際して、Cloud9 が提供している URL では、 Fetch → API でのデータ取得が正常にできない問題が出てきました（なぜか Status 499 のエラーが出てしまいます）そのため、サーバー側でファイアーウォールのポートを開けて、普通のウェブサイトとして制作中のサイトにアクセスできるようにしました。

https://df44294c8853471b8ddd609c09af06f3.vfs.cloud9.us-west-2.amazonaws.com/

↓

http://35.203.143.160:8080/

こちらのアドレスでは、Fetch でのデータ取得が正常に行えます。

React の状態管理で MobX を使ってみました。Redux よりコードの記述量がずっと減る感じなので、Next.js と一緒に採用してみます。後は Material UI の使い方を学んで、デザインを触りながら作っていこうと思います。

2018/4/9

勉強した本の独自の書き方になっていたので、express-generator をディレクトリ構成のベースにしました。

Webpack の最新バージョンがいつの間にか 4 になっていたので、アップデートしました。webpack.config.js もバージョン4に合わせて書き直しました。ビルドが速くなっているそうです！

React が正常に表示されるかテストしてみました。とりあえず Hello World を表示することができたので良かったです。React のサーバーサイドレンダリングに興味があるので、そちらについて調べてみたのですが、手間が非常にかかるようで、やるべきかやらないべきか悩んでいます。

React は状態管理に Redux を使用していたのですが、コードを書く量が多く、学習コストも高いため、同じ状態管理機能を持った MobXというライブラリに興味を持っています。こちらもいろいろ調べてみようと思います。

2018/4/3

IDE のユーザー削除を間違えて行ってしまいました。本来は IDE から削除してから、AWS の IAM でユーザーを削除するという順番で行わければならないのに、先に IAM でユーザーを削除してしまったので、IDE から削除ができなくなってしまいました。

修正方法がわからず、環境を作り直すことになったので、IDE などの URL が変更になりました。ブラウザのお気に入りに入れていた方は、お手数ですが URL の変更をよろしくお願いします。

2018/3/30

GCE 上に Cloud9 を構築していますが、あまりにも重たいのでサーバーをスペックアップしました。参加者が3人集まると止まるので。

f1-micro（vCPU x 1、メモリ 0.6 GB）
↓
g1-small（vCPU x 1、メモリ 1.7 GB）

無料で使えるクレジットが30000円分あるので、しばらくは大丈夫そうです。

node.js のバージョンを 8.11.1 にし、.bashrc に source ~/.nvm/nvm.sh を記述して、ターミナルを立ち上げるたびにパスを通さなくてもいいようにしました。

Node.js を勉強するために利用した本

2 冊とも読み終わりました。

JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを開発しよう ~ その１（改訂版）

JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを開発しよう ~ その２

Kindle Unlimited を契約している方は読み放題で読めます。

勉強した項目

Node.js のサーバー起動
Hello World の表示
MongoDBの導入、データの挿入・表示
画像のアップロード機能
Passport（ログイン用パッケージ）を利用して、ID & Passord のログインと SNS 認証でのログイン
Winston（エラーログ記録パッケージ）の利用方法
404 ページの表示
エラー処理
Helmet（セキュリティ用ヘッダーを設定するパッケージ）の設定
CSRF対策、トークンをフォームページの <input type=”hidden”> に表示させてチェックする方法
CORS（クロスオリジンリクエスト）の設定、開発環境では正常に機能しなかったのでよくわからず
HTTPS の設定、本番環境じゃないので後回しにしました

Teletype portal ID（利用停止中）

気軽に参加してください！

portal ID:

Teletype for Atom

Atom を使ってコラボレーションができる Teletype というプラグインを使ってみようと思います。実際どんな使用感なのかわからないので手探りになりますが。

※ 利用にはGitHubのアカウントが必要になります。

Teletype for Atom

Teletypeの使い方

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

まずは Atom に Teletype のプラグインをインストールしてください。

2. トークンを取得する

以下のページにアクセスして Authorize atom というボタンを押してください。トークンを取得するページに移動します。

https://teletype.atom.io/login

3. トークンを取得します

モザイク部分にトークンが表示されます。それをコピーしましょう。

4. Atom の電波塔アイコンをクリックしてトークンを貼り付けます

Atom の右下に電波塔のアイコンがあるので、そこをクリックしましょう。画像のような画面が表示され、トークンを入力するフォームが表示されます。そこにさきほどコピーしたトークンを貼り付けましょう。

そして Sign in ボタンを押すと、Teletype の利用準備は完了です。

5. portal ID を入力して参加してください

再度、電波塔のアイコンをクリックして、Join a portal と書かれた部分をクリックすると、portal ID を入力するフォームを開けます。そこにこの記事上部に掲載している portal ID を入力して Join ボタンを押してください。

これでプログラム配信のポータルに参加できます。開発に参加したり、アドバイスをしたりしなくても全然構いません。Teletype を試しに触ってみたいという理由でもなんでもいいので、気軽に参加してみてください。

2018年5月17日2018年5月17日

AmazonアソシエイトアカウントがBANされました

先日、突然アカウントが BAN されました。警告もなく本当に突然のことでした。まったく覚えのないことで利用を停止され、わずかな額ですが、これまでの紹介料もなかったことにされました。

提示された理由に覚えがないことを伝え、この決定が正しいのか問い合わせましたが、簡単なテンプレメールが返ってくるだけです。

1 回目の Amazon からのメール

いつもAmazon アソシエイト・プログラムをご利用いただき、誠にありがとうございます。

お調べしたところ、Amazonアソシエイト・プログラム運営規約を順守されていないことを確認しましたのでご連絡いたします。

貴殿は、書面による明示的な事前の承認を得ずに、ブラウザー・プラグインにおいて、Amazonサイトのコンテンツ、特別リンク、またはその他Amazonサイトに関連する内容を記載しており、Amazonアソシエイト・プログラム参加要件第7項に抵触いたします。

Amazonアソシエイト・プログラム運営規約については、以下のURLをクリックしてご確認ください。
https://affiliate.amazon.co.jp/gp/associates/agreement

早急に貴サイトから特別リンクを含むすべてのAmazonコンテンツを削除し、使用を中止してください。Amazon.co.jpはその裁量の下で、予告なくご利用中の別アカウントまたは今後作成されるアカウントを閉鎖し、紹介料の支払いを停止する権利を留保します。

ご利用ありがとうございました。

Amazon.co.jp カスタマーサービス　アソシエイト・プログラムスタッフ

1 回目の返信

ご連絡ありがとうございます。

突然のことで驚いているのですが、Amazonアソシエイト・プログラム参加要件第7項とは、以下でよろしいのでしょうか。

7.
甲乙間で別途本参加要件を参照した書面による合意がない限り、乙は、以下の媒体上でまたはそれに関連して、アソシエイト・プログラム・コンテンツもしくは特別リンクを使用またはアマゾン・サイトにリンクさせてはなりません。

(a) コンピューター、携帯電話、タブレットその他の携帯端末を含むあらゆるデバイス上のあらゆるクライアントソフトウェアアプリケーション（ブラウザプラグイン、ツールバー、拡張機能、コンポーネント、ヘルパーオブジェクトその他エンドユーザが実行またはインストール可能なアプリケーション）。ただし、承認モバイル・アプリは除きます。

(b) あらゆるセットトップボックス（地上・BS・CATV受信用ボックス、デジタルビデオレコーダー、ストリーミングビデオプレイヤー、ブルーレイプレイヤー、DVDプレイヤー等）またはインターネットテレビ（Google TV、ソニーBravia、パナソニックViera Cast、Vizioインターネットアプリケーション等）。

https://affiliate.amazon.co.jp/promotion/participationrequirements

具体的にはどのブラウザプラグインについて、違反がなされているとお考えなのでしょうか。ブラウザプラグインというのは、例えばGoogle Chromeの拡張機能などを指すのでしょうか。

当方としましては、ブラウザプラグインを作成したことがなく、またなんらかのプラグインを利用してアフィリエイトリンクを表示させた覚えもないため、非常に困惑しております。

2 回目の Amazon からのメール

Amazonアソシエイト・プログラムにお問い合わせいただき、ありがとうございます。

貴殿のアカウントは、Amazonアソシエイト・プログラム運営規約違反により、アカウント閉鎖および支払差止を実施させていただきました。閉鎖となったアカウントの復帰、および該当のアカウントについての紹介料の支払いは行われません。

アソシエイト · プログラムへ参加を希望される場合は改めての申し込みをお願いします。
https://affiliate.amazon.co.jp/

ただし、アソシエイト・プログラムへの参加にあたりましてはサイト内容を審査しておりますため、サイト内容が審査基準に合致しない場合は参加の承認は致しかねます.。あらかじめご了承いただきますようお願いいたします。

Amazon アソシエイト・プログラムをご利用いただき、ありがとうございました。

Amazon.co.jp カスタマーサービス　アソシエイト・プログラムスタッフ

2 回目の返信

前回のメール内でご指摘いただいたAmazonアソシエイト・プログラム参加要件第7項に違反した覚えがまったくないのです。一度もブラウザプラグインを作成したことがないため、どうしても納得がいきません。

これは具体的にどのプラグインを指しているのでしょうか。例えば誰かによって悪意を持ってこちらのアカウントを利用された場合、それでもアカウントの停止が行われるということなのでしょうか。

自分に非があるのか、それとも誰かのいたずら、嫌がらせによってこうなっているのか判断しかねますので、ご指摘いただいたブラウザプラグインを教えていただけないでしょうか。無断でアカウントを利用されている場合は、こちらで削除するよう交渉してみます。

3 回目の Amazon からのメール

Amazon.co.jpアソシエイト・プログラムにお問い合わせいただき、ありがとうございます。

アカウントの停止および支払差止の根拠に関しましては先日お送りした文書に記載の通りです。

今後もお忙しい中お時間を割いていただき、当サイトへＥメールにてご連絡いただきましてもこれ以上ご案内できる内容がございません。そのため今後、本件に関しましてお問い合わせいただきましても、ご返答はいたしかねますことをご了承下さい。

Amazonアソシエイト・プログラム参加要件を含む運営規約は以下のサイトで確認することができます。
https://affiliate.amazon.co.jp/gp/associates/agreement

アソシエイト・プログラムをご利用いただき、ありがとうございました。

Amazon.co.jp カスタマーサービス　アソシエイト・プログラムスタッフ

当初は Amazon アソシエイト・プログラム参加要件第7項に違反し、ブラウザプラグインを不正に利用しているという理由でしたが、ブラウザプラグインを作ったことも利用したこともないことを伝えると、次のメールでは Amazon アソシエイト・プログラム運営規約違反という広義の理由を用いて、決定の正当性を主張されました。

勝手な予測ですが、Amazon 側はなんらかの不正発見プログラムなどを走らせていて、そこにひっかかったのだと思います。売上の傾向や数字を見るとブラウザプラグインに広告リンクを貼っているケースと酷似していたため、アカウントを閉鎖したのではないでしょうか。

正直、Amazon アソシエイト・プログラム運営規約違反を持ち出されると、なにも反論できません。Amazonアソシエイトに参加している他のサイトも同じことだと思いますが、規約の全項目を把握し、完全に守れていると言い切れるサイトは少ないはずです。

結局のところ、Amazon の考え一つでほとんどのアカウントを閉鎖できますが、売上に繋がる大手サイトや、影響力のある著名人に対しては、違反を見て見ぬふりをしているのが現状なのでしょう。残念ながら当方は年間 2 万円ほどしか収益を上げられていないため、Amazon にとってはいてもいなくてもいいような存在だったのです。それがこの不幸を呼び込みました。

今回のように Amazon アソシエイト・プログラム運営規約違反を持ち出してアカウントを閉鎖するのなら、他の大手参加サイトに対しても平等な対応をとってもらいたいです。おそらくほとんどのサイトから Amazon のリンクが消えることになるのではないでしょうか。

例え不正を行っていなくても、Amazon アソシエイトでは目をつけられただけで、反論の余地なくアカウントが閉鎖されてしまうようです。ごく普通に利用していただけなのに、こんな扱いを受けるのはあまりにも酷すぎます。

2018年4月10日2018年4月10日

現在の開発環境 – AWS Cloud9 の問題点

Teletype for Atom、Docker、共同開発ができる場所を模索して、いろいろなものを試しましたが、結局、AWS Cloud9 がいいのではないのか？というところに落ち着きました。

AWS Cloud9

Cloud9 はブラウザで使える IDE で、ネットを介して複数人でのコラボレーション開発が行えます。Teletype for Atom も同じような機能が使えるのですが、実際、他のプログラマーに意見を聞いてみると、Atom を利用しての共同開発にはあまりいい印象を持っていないようでした。

当然、プログラマーはそれぞれ自分の好きな環境をすでに構築しているわけで、わざわざそこに新規の環境を構築して（Atom をインストールして）まで参加するのは面倒だと感じるようでした。

Game Users の開発はゲームが好きなプログラマー・デザイナーの方々に気軽に参加してもらいたいという考えがあるので、環境構築で大きな手間がかかるのはやはりいいことではありません。そうなるとブラウザだけで参加ができる、Cloud9 を採用するメリットは大きいのではないかと感じています。

AWS Cloud9 の問題点

使ってみて感じたのですが、いろいろな問題もあります。

参加人数が 8 人まで

なんでこんな仕様なんだと言いたいところなんですが、自分を入れて計 8 人までしか参加できません。サーバーの能力依存で参加人数を決めさせてくれればいいのに、最初から IDE 側で人数を制限してるので、どれだけサーバーのリソースに余裕があっても無駄です。

AWS Cloud9 は AWS の管理画面でアカウントを発行して、そのアカウントで　IDE に参加してもらう形になっています。Game Users の開発では、いろいろな人に個人用のアカウントを発行して、時間のあるときに気軽に参加してもらえたらなという思いを持っていたのですが、8 人制限のせいでそれができなくなりました。

今は guest-1～2、master-1～5 というアカウントを用意して、そのアカウントにログインして参加してもらう形になっています。個人用のアカウントの場合、自分を除くと 7 人までしかアカウントを発行できませんが、ひとつのアカウントを複数人で使ってもらう場合は、人数制限が緩和されるのでそういう形にしています。ただこれだと誰が参加してくれているのかわかりにくく、とても不便です。

そもそも Cloud9 は不特定多数の人が開発に参加するプロジェクトを想定していないのでしょうが、GitHub を経由した push だ pull だと面倒くさい現在の共同開発環境を変えられるポテンシャルを秘めているので、早急になんとかして欲しいところです。

IDE の出来が今ひとつ

Atom や Visual Studio Code（触ったことがないのでわからない）は、なんだかんだと言って優秀なんだと思います。様々な機能が最初から提供されていたり、プラグインなどで後から追加することができたり、個人的に使いやすい設定を細かく突き詰めることができたり、当然のようにいろいろできていたことが、Cloud9 ではできなくなりました。

ブラウザだけで開発ができる・コラボレーションが手軽に行える、というメリットは大きいものの、使いづらい・必要な機能がない、といったデメリットも大きいので、現状、上記のメリットを求めている人以外には勧めづらい環境になっています。

アマゾンが買収したので今後の発展に期待したいところですが、今のところは正直なんとも言えないクオリティです。

ネットに情報がない

これも本当に辛いところなんですが、ネットに情報がありません。なんでもそこそこの規模になってくると、日本語の情報はなくても英語の情報があったりするものですが、Cloud9 はその域にも達していません。

例えば今、ESLint で “extends”: “airbnb” が動かない問題を抱えているのですが、調べても情報がなくて困っています。このプラグインを入れるといいよと英語で書いている情報はひとつ発見したのですが、そのとおりにやっても動かず。それ以外情報がないので、どうにもならない状態に陥っています。

アマゾンのサポートも利用できるようなのですが、技術的なサポートは有料になっているみたいなので、お金持ちや企業でないとサポートを受けられません。

参加者募集！

Cloud9 の至らなさをいろいろと語ってみましたが、Game Users の開発には手軽なコラボレーション機能が必要なので、利用しないという選択肢はありません。

ゲームが好きな開発者の方おられましたら、ぜひ一緒に開発しましょう。参加したとして権利や金銭的な問題はどうなるんだということについて、文章にきっちり残していないので、その辺についてもこのブログで記事にしていかないといけないなと思っております。

YouTube でプログラム配信をしながら開発しているので、もし少しでも興味があったら覗いてみてください。配信中はこのブログのトップページにも、配信が見れる記事が掲載されるようになっていますので、ぜひ！

2018年3月7日2018年3月7日

Dockerってすごくない？

Game Users を Node.js で書き直したいので、本を読みながら Node.js の勉強をし始めました。

JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを開発しよう ~ その１（改訂版）

この本を読みながらコードを書きつつ進めていたのですが、MongoDB の導入部分で詰まってしまいました。これまでは XAMPP や Node.js などの Windows 用インストーラーを利用して開発環境を簡単に構築していたのですが、MongoDB は Windows の設定がややこしそうなので、ここらへんで一度、今後の環境構築について見直すべきではないかと考え、新たな道を模索することにしました。

比較的、新しい技術や機能を使おうとしたときに、Windows はやっぱり不便なんですよね。Mac を使っているプログラマーが多い理由が理解できました。

そこで勉強しようと思ったのが、なにかと話題になっている Docker。ネットでプログラム関連の記事を調べていると、あちこちで目につくので名前だけは知っていたのですが、開発環境構築に便利だと聞いて手を出してみました。

とりあえず Docker Toolbox を利用してローカル環境で Node.js の Hello World ページが表示できるところまでは行けました。

本当に初心者レベルなのですが、触ってみて感じたのは Docker（コンテナ技術）はすごいということです。なにがすごいのかというと、例えば Node.js の Docker イメージ（コンテナを作るための元）がオフィシャルから提供されており、それを簡単なコマンドで導入することができるのです。WordPress や各種データベースも公式からイメージが提供されているので、それを元にして、わずか数行のコマンドで開発環境を構築することができます。

これがやばい！Docker を利用すれば本当に簡単に開発環境が作れるのです。Docker はバックエンド臭が強くて（解説サイトは難解な専門用語だらけ！）導入障壁が高いように思われますが、ローカルに開発環境を作るだけなら、そこまで難しいものではないです。

黒い画面に恐怖を感じる人は触りたいと思えないかもしれませんが、そういう人にこそ Docker をお勧めしたいですね。最初に Docker についての学習コストを支払う必要はありますが、昔ながらの方法で手動で開発環境を構築していくよりも、Docker を利用した方が、のちのち楽になるのではないかと感じています。

Docker実戦活用ガイド

自分はこの本を読みながら（値段が高いので Kindle Unlimited で読むことをオススメします）1週間くらいで、とりあえず使うことはできるようになりました。そのくらいのコストで、今後の開発環境構築の手間と憂いが除かれるなら、安いものではないかと思います。

具体性のないぼんやりした内容なので、いまいち良さが伝わってこないかもしれませんが、もうちょっと使いこなせるようになったら、雑魚プログラマー視点からの Docker の利点をまとめた記事を書いてみようと思います。

2018年2月17日

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

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

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

完成品

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

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

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

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

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

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

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

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

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

編集タブ

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

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

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

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 のウィジェットを有効活用してください。

リンク

WordPressのおすすめシェアボタンプラグイン、高速表示＆好きなデザインに変更できます
WordPressでシェアボタンをサイドバーに固定表示する方法
Game Users Share Buttons v1.2.1 更新情報
Game Users Share Buttons v1.3.0 更新情報

2018年2月16日2018年2月17日

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でシェアボタンをサイドバーに固定表示する方法
Game Users Share Buttons v1.2.1 更新情報
Game Users Share Buttons v1.3.0 更新情報

2018年2月5日2018年2月16日

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="ディスクリプション" />

画像

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 をコピペして、画像の幅と高さを指定するだけになると思います。

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

設定するとどうなるの？

ブログのソースコードに 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を提供されたフィールドに貼り付けることができます。

画像設定

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を設定できます。たとえば、製品のカスタムポストタイプがある場合、その製品タイプにオブジェクトタイプを選択することができます。

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のおすすめシェアボタンプラグイン、高速表示＆好きなデザインに変更できます

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つのページをサイトマップから除外します。

優先順位

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

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

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

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

頻度

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

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

サイトマップを確認する

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

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

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

最後に

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

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

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に追加することもできます。