こんにちは、りゅうのすけ(@k_r001)です。
この記事では、WordPressでブログを書くときに知っておくべきソースコードについてまとめました。
こういった方に向けて書いています。
WordPressのテキストエディタを使うメリット
テキストエディタを使うと、ブログに関する知識が増えてSEO対策などしやすくなります。
- ソースコードが身近に感じるので理解しやすい
- エラーが起きたときに対処しやすい
- 画像やリンクなどのコードを最適化できる
- 太字など記事の評価に悪影響を与えるコードを編集できる
こういったメリットがあります。
Classic Editorをインストール
テキストエディタを使うには、「Classic Editor」をインストールしましょう。
一番上に表示されるので、インストールしましょう。
インストールできたら有効化してください。
特に設定などは、必要ないです。
パソコン内にダウンロードして取得したい場合は、⬇︎下記記事にまとめてあります。
テキストエディタを使うにあたって知っておきたいコード
知ってとりあえず知っておきたいコードは、3つです。
とりあえず、この3つを押さえておけば、ある程度整った記事が書けます。
まずは、ソースコードの基本について知りましょう。
ソースコードの基本
ソースコードは、「<>」の内側にあるものです。
コードの影響を与えたい部分を囲うことで、見た目など変えることができます。
太字の場合 ➡︎ <strong> 〜 </strong>
太字にしたい文字を、太字用のコードで挟むことで文字が太くなります。
見た目の違い⬇︎
こういった変化を与えることができます。
リンクや画像以外は基本的に、この法則にしたがって追加されているので、見つけやすいかなと思います。
文字リンクの追加方法
文字リンクを追加するには、クイックタグの「link」を使います。
リンクを新しいタブで開くにチェックを入れると、新しいタブでリンクを開くことができます。
rel="noopener" target="_blank"コードのこの部分が追加されます。
文字リンクのコード
文字リンクのコードは以下のようになります。
<a href="https://ryunosuke1.com" rel="noopener" target="_blank">ryublog</a>
コードの意味は、クリックしたときに、新しいタブでこのサイトのホームページを開くというものです。
href属性
href属性は、リンク先の所在地を記入します。
href="https://ryunosuke1.com"この部分です。
移動させたいページのURLを記入するところです。
URLを貼り直すなどして対処しましょう。
rel属性
rel属性は、リンク先の他の文書に対する関係を示します。
rel="noopener"この部分のことです。
- noopenner
- noreferrer
- nofollow
- sponsored
- ugc
主に使うのは、「noopenner」と「nofollow」です。
rel="nofollow noopener"2つ以上つける場合はこんな感じで間に半角スペース入れましょう。
noopenner
「noopenner」はリンク先を新しいタブで開きとき、自サイトを守るために入力します。
この脆弱性からサイトを守ってくれるのが、「noopenner」です。
「target=”_blank”」とセットで使いましょう。
内部リンクの場合は不要ですが、勝手に追加されるので、そのままでも問題ないです。
noreferrer
「noreferrer」は、リンク先に対して自サイトのリンクを渡さないようにします。
「noreferrer」をつけていないとリンク先のサイトのGoogle アナリティクスに参照元の情報に表示されます。
なので、外部リンクを新しいタブで開く時には「noreferrer」をつけておきましょう。
nofollow
「nofollow」はリンク先と自サイトを関連付けたくない場合に使います。
リンクに「nofollow」を設定しておくと、Googleのクローラーがリンク先を辿らなくなります。
- リンク先の評価を受なくなる。
- クロール効率が上がりサイト評価を上げやすくなります。
実際に「nofollow」を外してみたところドメインパワーが下がってしまうという現象が起こりました。
なので、外部リンクには「nofollow」を必ずつけておきましょう。
sponsoredとugc
下記項目は、「nofollow」 と同じ意味合いですが、使い方は違います。
「sponsored」は広告リンクに使用するので、広告リンクに「sponsored」が使われているか確認しましょう。
現状重要視されてはないですが、リンク先の意味を伝えてあげたほうが親切です。
いずれは、SEO対策になるかもしれません。
target属性
「target属性」は、リンク先の文書を開くフレームやウインドウを指定します。
別タブでリンク先を開くように設定するときに使います。
「target=”_blank”」と入力すれば、別タブで開くようになります。
rel="noopener" target="_blank"この2つは、必ずセットで追加しましょう。
画像リンクのコード
⬆︎の画像をそのまま入力すると、コードは下記のようになります。
<img src="https://ryunosuke1.com/wp-content/uploads/2021/06/undraw_Photograph_re_up3b.png" alt="" width="1255" height="680" class="aligncenter size-full wp-image-11050" />このコードを最適化すると、⬇︎下記のようになります。
<img src="https://ryunosuke1.com/wp-content/uploads/2021/06/undraw_Photograph_re_up3b.png" alt="wordpress テキスト エディタ" />画像リンクのコードは、「src」と「alt」だけ残しましょう。
- src=”画像URL”
- alt=”代替テキスト”
画像のコードについて詳しく知りたい方は、⬇︎下記記事にまとめてます。
【画像SEO】WordPressの画像にalt属性を設定する意味
リストの使い方
リストには、順番のなしとありがあります。
リストにしたい文章を全て <li> で挟んで、 <ul> or <ol> で囲うことでリストにすることができます。
- <ul>
- <li>リスト</li>
- <li>リスト</li>
- </ul>
順番なしのリストは、情報を箇条書きで伝えたいときに使います。
- <ol>
- <li>リスト</li>
- <li>リスト</li>
- </ol>
順番ありのリストは、手順などを説明するのに使いやすいです。
数字が自動で入力されるので、順番の入れ替えがあっても手間がかからないです。
太字タグの注意点
太字タグは、使いすぎるとGoogleからペナルティを受けます。
- 同じワードに太字は使わない
- 1記事で3つ以上太字を使わない
太字は、Googleに強調している部分を伝える役割があります。
ですが、太字が3つ以上になると強調している部分が多いと判断されて、ペナルティを受けてしまいます。
<strong>タグと、<b>タグの区別はしないと明言されています。
CSSで太字を表現する
CSSで太字を表現することで、Googleには強調していると認識させずに太字を使うことができます。
まずは、「style.css」に太字を使うためのコードを追加します。
style.cssを編集する
CSSを使って太字にするためには、⬇︎下記コードを「style.css」に追加する必要があります。
.my_bold{
font-weight: bold;
}
追加CSSに追加しても、変化はありません。
CSSで太字にする
CSSで太字にするには、⬇︎下記コードで太字にしたい文字を囲いましょう。
<span class="my_bold">〇〇〇〇</span>
何度も入力するのは面倒なので、「AddQuicktag」を使うと簡単に追加できます。
「AddQuicktag」の使い方は、⬇︎下記記事にまとめています。
AddQuicktagの設定方法と使い方！簡単クイックタグ設定
見た目の違い⬇︎
strongタグを使うより強調されているけど、強調していないということになっています。
表示がおかしい時の調べ方
表示がおかしくなった時は、「HTMLエラーチェッカー」を使いましょう。
「HTMLエラーチェッカー」は、プラグインではなくGoogle Chromeの拡張機能です。
「HTMLエラーチェッカー」の使い方は、⬇︎下記記事にまとめています。
ブロガー向けおすすめGoogle Chromeの拡張機能まとめ
まとめ
テキストエディタを使うと、必要なコードの追加や編集作業が簡単になります。
余裕があれば、テキストエディタを使うようにしましょう。
最後まで見ていただき、ありがとうございました。
