昼寝ねこの雑記帳

30代前半の低所得社畜の管理人さんが節約と投資とせこい小銭稼ぎでセミリタイアを目指す試行錯誤系ブログはこちらです。

約3ヶ月Webデザイナーの昼寝ねこが自分のブログ構造を見てみる

昼寝ねこの雑記帳 - にほんブログ村

こんばんにちは。昼寝ねこです。

このブログを書き始めて4年になりますが、読者数は200人を超えありがたいものの、最近の更新の停滞もあり1日のPVは50件まで落ちてしまっています。

まぁこれについては僕が最近更新できてないせいだし、だだの雑記帳だからいいんだけどさ。

 

で、僕は転職してWebデザイナーになって3か月経とうとしているわけでして…初心者に毛が生えた程度で恐縮ですが珍しく(初?)それっぽいことを書きたいと思います。まずは自分のブログの問題点をあげていこうと思いました。

 

検証ツールからコンソールの確認

そこそこWebに詳しい人には当たり前かもしれませんが、キーボードのF12ボタンを押すと検証ツールが確認できます。htmlとCSSマークアップをする際にはほぼほぼこれと睨めっこで仕事をしています。

でね、会社でサイトを作る際に検証ツール内のコンソールでエラーがあったら絶対にダメなわけですよ。警告はいいと言われました。そして僕の?ブログであるところの『昼寝ねこの雑記帳』を見てみると…

 

 

エラー600件って…

調べてみるとgoogleロームで出てしまうエラーで表示に影響ないとかそういうのがほとんどのようですが、大丈夫なのか?って思いますね。まぁ、はてなブログはてなブログユーザーの同士の閲覧が強いから検索からの導入を気にしないこのブログみたいなのはあまり気にしなくていいですが、仮にお客さんからこんな改善を要求されたら卒倒しますね。サイト作り直した方が早いレベル。

 

サーバー側のエラーとかブートストラップのエラーとか、ブログ利用者にはどうしようもないエラーが起きているのを放置できない収入目的のサイトは、はてなで作るべきではないかもですね。

 

記事の書き方

皆さん知っていますか?

1行目

2行目

 

ここに書いた1行目と2行目は<p>タグで分けられています。HTMLでみればわかりますがこうなってるんですよ。

でね、

1行目
2行目

 

さてこれはどうでしょうか?比べてみると1行目と2行目の間隔が違うのはわかります。

これには厳密な違いがあって、2つ目の例はhtmlはこうなってます。

 


改行の際に普通にEnterを押すとpタグに、sift+Enterを押すとbrタグになります。

これらは構造的に全く別物で、pタグは段落を表し、brタグは段落内で改行を表します。でもこんな違い、Webの勉強するまで知らなかったので僕はずっとpタグで記事を書いてました。

 

さらにこういう↓

 

 

 

空白行を空けるのどうやってますか?

僕はこう。

pタグで空間を表現していますが、こんなのSEO的には絶対ダメですからね。

こういう話を知った後も僕はこのブログはずっとやっていますが。だって面倒くさいから。

通常はsectionなりdivタグでclass指定してCSSでmargin-bottomを入れる設定にするわけですが、はてなブログでそこまでしてる人いるのかな?

Wordplessなら行間用のタグがすぐに挿入できるようになってるし、慣れてしまえばFTPでファイル挿入したほうが楽なんですよね。

 

構造がおかしい

みなさんブログ記事を書く時に内容毎に見出しってつけてますよね?タグを見ればわかるんですけど、記事タイトルはh1で見出しが扱われているんですが、下の大見出しはh2課と思いきや、h3で付けられてるんですよね。

どの程度影響があるかはわかりませんが、コーディングルールとしてはh1、h2、h3の順で見出しを付けて構造化することになってるわけで…知らないうちにルールから逸脱してるのはどうなのかなぁって思いますね。

画像の処理が雑じゃないか?

皆さん、アイキャッチとしてタイトル下に画像を入れる方も多いと思いますが、ちゃんとalt属性付けていますか?google検索でヒットするサイトを作るためにはユニバーサルデザインに気を配る必要があり、読み上げブラウザでも画像を認識するためにalt属性が推奨されています。

で、はてなブログでは上の画像の通り、alt属性は上級者向けというボックスをクリックして挿入する形になっています。これじゃ知らない人は入れないと思いますね。

さらに!!

クローラーで上位に認識されるためにはLCPという指標が重要視されるのですが、ファーストビューで読まれる画像の読み込み速度が結構重要だったりします。

で、はてなさんは画像すべてにlazy Lordをかけているので読み込みが遅くなっています。(Wordpressでは1st画像はLazy lordが外されています)さらに無料版だとスマホのファーストビューにクソデカ広告を置きやがるのでPSIのパフォーマンスは最悪ですね。ユーザー的にも不快だろうし…

それに謎のJavaScriptファイルがクソ遅延のの原因になっているようです。はてなJavascriptファイルって簡単には触れないですよね?Wordpressなら簡単だけど。

 

結論

サーバーの用意とかしなくていい無料ブログってのは作成が簡単だけど、やっぱりいろいろ知っていくと問題点があるのかもしれません。今後、フリーランスを目指す意味も含め新しく専門サイトを作ろうとする際には、Wordpressで作っていくことにしようと固く決意したのでした。

 

雑記はこっちで書くけどね!!面倒だし!!