SEOについて
SEO調査結果（その１）
参考：【必見】2022年のSEO対策を発表します 2022年に注目されている項目４点
1.ドメインパワー
- 被リンクがついているか
- 取引先、関連企業からのリンク
2.E-A-T（専門性、権威性、信頼性：それぞれの頭文字をとっている）
サイト単位、ページ単位の施策がある。
3.ユーザー行動
- 検索画面からのCTR(クリック率)
- 検索結果画面に分かりやすく、より良いタイトルを設定する
- メタディスクリプションの設定（メタディスクリプション自体はSEOに関係無いとGoogleが言っているが、CTRに影響が出てくる可能性がある為、意識すると良い）
- FAQの構造化マークアップ（FAQとは、検索結果画面に質問窓のようなものを表示させている部分の事) これを実行する事でCTRが上がる事に繋がる
- サイトに来てからのユーザー行動（サイトに来てすぐに戻るブラウザバックを防ぐ。目的があってサイトに来たのに、目的を果たさず戻ってしまう事を防ぐ） ユーザーバックについては、タグマネージャーでどの程度スクロールされたのかを確認出来るので、そのスクロール率を見ると良い。 特にスクロール率が低くて、ユーザービューが高い部分に注目すると良い。そしてそれをヒートマップで見ると、離脱ポイントが分かる。 改善の際はGoogleオプティマイズを使用したABテストや、全くクリックされないボタンなどがあればそこを改善するなど行う
4.コンテンツ
以前はコンテンツが良ければ検索上位に来たが、今はいくらコンテンツがよくてもそれだけではダメとの事 この傾向は「YMYL」という「お金と健康に関する領域」で顕著
SEO調査結果（その２）
参考：【SEO対策講座】絶対にやるべき最低限のSEO対策を教えます。【ブログ初心者向け】
1.SEO対策
2.ブログ全体や戦略面のSEO対策
32文字前後のタイトル（検索結果に表示される表示目安）
魅力的なタイトルや記号【】などで注目を引く
- ページの表示速度
速度判定にはGoogleのPageSpeed Insightsを使用する。
表示速度はキャッシュの対策で早く出来る。 おすすめWPプラグイン WP Fastest Cache
- サイトマップを作ると良い。これによりGoogleのクローラーが巡回しやすくなる。 おすすめWPプラグイン Google XML Sitemaps（このプラグインはサイトマップを自動生成してくれる）。
- 更新頻度 GoogleのQDF(より新しい情報を検索上位に表示させるアルゴリズム)に対しての対策。
毎日更新が良い。但し、品質を落とした投稿では意味がない。
品質を維持し「15~20/月」の記事更新が良い。
ブログと並行してジャンルに合わせてSNSを選び運用すると良い。
3.記事に関するSEO対策
- 記事タイトル 上述のサイトタイトルと同様
- メタタグ メタディスクリプションを設定する。 これがクリック率に関係する。 120文字以内で魅力的に書く。 その他メタキーワードというものがあるが、現状はあまり使用されていない。 しかし、SEOは出来ることはなんでもやることが推奨なので、やっておくと良い。
- 見出し h1→h2→h3→h4の順で適切に設定する。
- 文字数 3,000〜5,000を目安に（短すぎても長すぎても良くない）
- 見やすい構成 文書だけでなく「画像、箇条書き、表、引用」等を使用する。
- 共起語（ある単語と一緒に用いられることが多い単語） 記事に親和性のある単語を使用することが有効
- 画像 サイズの軽量化をすると良い。おすすめプラグイン：EWWW Image Optimizer altタグを設定する。 画像の名前も関連するものをつけると良い。
リンク関係
- 内部リンク 読者にクリックしてもらえている、生きたリンクを設定する。
- 発リンク（引用する記事のリンクをつける事）
- 被リンク（外部サイトから自サイトへ向けられたリンク） SEOにおいて他社から被リンクされる事は重要
zshrcについて
隠しファイル.zshrcについての説明
参考記事
zshrcとは
zshrcに限らず、bashrc、vimrc等のrcは「Run Command」の略。
つまり、zshrcは「zshを実行するためのコマンド」といった意味
.zshrcファイルを見るとexportという記述がある。
「export」は「環境変数」を定義するためのコマンド。
環境変数とは
この記事によると、環境変数とは名前のついた箱。 設定を変更する場合２パターンある 1. コンピューターの設定を変更 - 誰が見ても変更された内容になる 2. プログラムの設定を変更 - 変更したプログラムの中からのみ変更が適用される。それ以外の環境から確認した場合、変更は反映されない。
evalコマンドについて
複数の変換処理を一度に行うもの。
エイリアスとは
エイリアス＆関数を使うメリット コマンドを覚える手間が少なくなる コマンドを打つ時間を短縮できる コマンドの打ち間違いを減らせる
こういうものらしい。
例） alias fl="firebase login"
上記を設定すると、本来ターミナルでfirebaseにログインする際はfirebase loginと入力が必要なところをflと入力するだけでログイン可能になる。
このように記述の短縮が可能。
anyenv（バージョンマネージャー）のインストール
インストール手順
$ git clone https://github.com/anyenv/anyenv ~/.anyenv$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc# シェルを再起動 $ exec $SHELL -lanyenv install --initこれを実行すると
Manifest directory doesn't exist: /Users/toshi/.config/anyenv/anyenv-install Do you want to checkout https://github.com/anyenv/anyenv-install.git? [y/N]:
上記が表示されたら「y」を選択。
これでOK。
便利なメモアプリ 〜Sublime text~
日々のメモ書き用にインストール
- 日本語化には設定が必要
プラグインの有効・無効Sublime%20Text%203%E3%81%AE,Command%20Palette%EF%BC%89%20%5D%20%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%80%82&text=(2)%E6%A4%9C%E7%B4%A2%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%8C%E7%8F%BE%E3%82%8C,%5B%20Enter%20%5D%20%E3%82%AD%E3%83%BC%E3%82%92%E6%8A%BC%E3%81%99%E3%80%82)
■
やりたいこと
1つのformタグから複数画像をアップロード
myprofileEdit.ejs
<form action="/myprofile_img" method="post" enctype="multipart/form-data">
プロフィール写真の変更<input type="file" name="account_img"><br>
店舗詳細写真の変更 <input type="file" name="shop_img"><br>
店舗画像１<input type="file" name="img1"><br>
店舗画像２<input type="file" name="img2"><br>
</form>
myprofile_img.js
const express = require('express');
const router = express.Router();
const connection = require('../mysqlConnection');
const multer = require('multer');//画像取得ようパッケージ（multer）読み込み
const moment = require('moment');//日付取得用パッケージ読み込み
const storage = multer.diskStorage({
cb(null, './public/images/uploads')
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' + Math.round(Math.random() * 1E9)+file.originalname)
}
})
// const upload = multer({ dest: './public/images/uploads' })//ファイルの保存先指定
const upload = multer({ storage: storage })
const path = require('path')
router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'views/myprofile.ejs'))
}) ;
var cpUpload = upload.fields([{
name:'account_img', maxCount:1
},{
name:'shop_img', maxCount:1
},{
name:'img1', maxCount:1
},{
name:'img2', maxCount:1
}
]);
//送信する画像が1つの時第二引数は 「upload.single('account_img')」を使う
router.post('/', cpUpload, function (req, res, next) {
console.log('req.filesここからここからここからここからここからここから')
console.log(req.files)
console.log("req.files000000000000000000000000000000")
console.log(req.files.account_img)//ok
console.log(req.files.account_img[0])//ok
// res.redirect('/myprofile')
})
module.exports = router;
これでアップロードしたファイルの名前を取得するために検証を以下で進める
↓
console.log(req.files)
この値をターミナルでみると
[Object: null prototype] {
account_img: [
{
fieldname: 'account_img',
encoding: '7bit',
size: 1249386
}
],
shop_img: [
{
fieldname: 'shop_img',
encoding: '7bit',
size: 20278
}
],
img1: [
{
fieldname: 'img1',
encoding: '7bit',
size: 222415
}
],
img2: [
{
fieldname: 'img2',
originalname: 'a0258141_2455659.jpg',
encoding: '7bit',
filename: '1599803609358-937438576a0258141_2455659.jpg',
path: 'public/images/uploads/1599803609358-937438576a0258141_2455659.jpg',
size: 17810
}
]
}
さらに細かくみていく
console.log(req.files.account_img)
でみると
[
{
fieldname: 'account_img',
encoding: '7bit',
size: 1249386
}
]
次に
console.log(req.files.account_img[0])
でみると
{
fieldname: 'account_img',
encoding: '7bit',
size: 1249386
}
そして
console.log(req.files.account_img[0].filename)
でみると
ついに画像の名前を取得できた！
Node.jsの更新による複数画像の投稿について詰まったところ
今回は既にinsert済みのshopテーブルにてnullで指定していた画像を投稿するカラムの更新について詰まった点を記述する
使用コードは２点
formタグを使用してpost処理を実行する
myprofileEdit.ejs
postを受け取りupdate文を実行する
myprofile_img.js
コードは以下
myprofileEdit.ejs
<h2>画像情報編集</h2>
<form action="/myprofile_img" method="post" enctype="multipart/form-data">
プロフィール写真の変更<input type="file" name="account_img"><br>
</form>
<form action="/myprofile_img2" method="post" enctype="multipart/form-data">
店舗詳細写真の変更 <input type="file" name="shop_img"><br>
</form>
<form action="/myprofile_img3" method="post" enctype="multipart/form-data">
店舗画像１<input type="file" name="img1"><br>
</form>
<form action="/myprofile_img4" method="post" enctype="multipart/form-data">
店舗画像２<input type="file" name="img2"><br>
</form>
（上記コードは画像投稿に使用しているform部分を抜粋）
上記では4つの画像投稿をするため処理を行うjsファイルを4つ用意しそれぞれのjsファイルで処理を実行している
myprofile_img.js
router.post('/', upload.single('account_img'), function (req, res, next) {
console.log(req.file);
console.log(req.file.filename);
var userId = req.session.user_id? req.session.user_id: 0;
res.redirect('/myprofile')
})
})
（上記コードはpostされた値を処理する部分を抜粋）
内容としては
upload.single('account_img'),
部分のaccount_imgのところがmyprofileEdit.ejsのformタグ内inputタグの
input type="file" name="account_img"><br>
上記name部分で指定した内容を記述することになっている。
参考：https://reffect.co.jp/node-js/express-js-file-upload
（1.4 ルーティングの設定参照）
試したこと
upload.single('account_img',shop_img'),
上記のようにshop_imgを追加し
のようにupdate文にもshop_imgを追加してみた
しかしこれはエラーとなり実行不可
そのため、上述のコードのようにformタグを4つとそれに対応するjsファイルを4つ使用して更新処理が出来るようにいったん実装をした。
1つのformタグで4つの画像を更新する方法はあるのだろうか、、検証は続く
