SEO対策

【WordPress】知っておくべきテキストエディタのコード

wordpress テキスト エディタ

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、WordPressでブログを書くときに知っておくべきソースコードについてまとめました。

 

  • 「nofollow」とかどうやて使うの?
  • テキスト入力って難しそうだなぁどうやって使えばいいんだろう?
  • 取りあえす覚えておくコードだけ教えてくれないかなぁ

 

こういった方に向けて書いています。

WordPressのテキストエディタを使うメリット

wordpress テキスト エディタ

テキストエディタを使うと、ブログに関する知識が増えてSEO対策などしやすくなります。
 

\テキストエディタを使うメリット/
  • ソースコードが身近に感じるので理解しやすい
  • エラーが起きたときに対処しやすい
  • 画像やリンクなどのコードを最適化できる
  • 太字など記事の評価に悪影響を与えるコードを編集できる

 

こういったメリットがあります。

Classic Editorをインストール

wordpress テキスト エディタ

テキストエディタを使うには、「Classic Editor」をインストールしましょう。

 

インストール場所は、「プラグイン」➡︎「新規追加」と押します。

 

一番上に表示されるので、インストールしましょう。

wordpress テキスト エディタ

インストールできたら有効化してください。

特に設定などは、必要ないです。

wordpress テキスト エディタ

パソコン内にダウンロードして取得したい場合は、⬇︎下記記事にまとめてあります。

 

\Classic Editorをダウンロード/

 

テキストエディタを使うにあたって知っておきたいコード

wordpress テキスト エディタ

知ってとりあえず知っておきたいコードは、3つです。

 

  • 文字リンク
  • 画像
  • リスト

 

とりあえず、この3つを押さえておけば、ある程度整った記事が書けます。

まずは、ソースコードの基本について知りましょう。

ソースコードの基本

wordpress テキスト エディタ

ソースコードは、「<>」の内側にあるものです。

コードの影響を与えたい部分を囲うことで、見た目など変えることができます。

 

\イメージ/

     太字の場合  ➡︎  <strong> 〜 </strong>

 

太字にしたい文字を、太字用のコードで挟むことで文字が太くなります。

見た目の違い⬇︎

  • 太字のコードあり
  • 太字のコードなし

 

こういった変化を与えることができます。

リンクや画像以外は基本的に、この法則にしたがって追加されているので、見つけやすいかなと思います。

文字リンクの追加方法

wordpress テキスト エディタ

文字リンクを追加するには、クイックタグの「link」を使います。

wordpress テキスト エディタ
⬇︎

\クリックするとこんなのが出てきます。/
wordpress テキスト エディタ

 

  • 内部リンク➡︎下側に別記事のタイトルが表示されるので、クリックすると追加できます。
  • 外部リンク➡︎URLとリンク文字列を自分で記入しましょう。

 

リンクを新しいタブで開くにチェックを入れると、新しいタブでリンクを開くことができます。

rel="noopener" target="_blank"

コードのこの部分が追加されます。

文字リンクのコード

wordpress テキスト エディタ

文字リンクのコードは以下のようになります。

<a href="https://ryunosuke1.com" rel="noopener" target="_blank">ryublog</a>

 

\外観/

 

コードの意味は、クリックしたときに、新しいタブでこのサイトのホームページを開くというものです。

href属性

wordpress テキスト エディタ

href属性は、リンク先の所在地を記入します。

href="https://ryunosuke1.com"

この部分です。

移動させたいページのURLを記入するところです。

 

リンク切れが起きた場合、このURLに何か不具合が起きています。

 

URLを貼り直すなどして対処しましょう。

rel属性

wordpress テキスト エディタ

rel属性は、リンク先の他の文書に対する関係を示します。

rel="noopener"

この部分のことです。

 

rel属性の種類
  • noopenner
  • noreferrer
  • nofollow
  • sponsored
  • ugc

 

主に使うのは、「noopenner」と「nofollow」です。

rel="nofollow noopener"

2つ以上つける場合はこんな感じで間に半角スペース入れましょう。

noopenner

wordpress テキスト エディタ

「noopenner」はリンク先を新しいタブで開きとき、自サイトを守るために入力します。

 

リンク先に悪意をもったJavaScriptが記載されていれば、自サイトのページを改ざんされる可能性があります。

 

この脆弱性からサイトを守ってくれるのが、「noopenner」です。

「target=”_blank”」とセットで使いましょう。

内部リンクの場合は不要ですが、勝手に追加されるので、そのままでも問題ないです。

noreferrer

wordpress テキスト エディタ

「noreferrer」は、リンク先に対して自サイトのリンクを渡さないようにします。

「noreferrer」をつけていないとリンク先のサイトのGoogle アナリティクスに参照元の情報に表示されます。

 

データ分析だけならいいと思いますが、リンクにユーザID等の情報が含まれている事もあります。

 

なので、外部リンクを新しいタブで開く時には「noreferrer」をつけておきましょう。

nofollow

wordpress テキスト エディタ

「nofollow」はリンク先と自サイトを関連付けたくない場合に使います。

リンクに「nofollow」を設定しておくと、Googleのクローラーがリンク先を辿らなくなります。

 

\nofollowを使うメリット/
  • リンク先の評価を受なくなる。
  • クロール効率が上がりサイト評価を上げやすくなります。

 

実際に「nofollow」を外してみたところドメインパワーが下がってしまうという現象が起こりました。

なので、外部リンクには「nofollow」を必ずつけておきましょう。

sponsoredとugc

wordpress テキスト エディタ

下記項目は、「nofollow」 と同じ意味合いですが、使い方は違います。

 

  • sponsored ⬅︎ 有料リンクにつける
  • ugc ⬅︎ コメントやフォーラム投稿などユーザーが作成したリンクに指定します。
    •  

      「sponsored」は広告リンクに使用するので、広告リンクに「sponsored」が使われているか確認しましょう。

      現状重要視されてはないですが、リンク先の意味を伝えてあげたほうが親切です。

      いずれは、SEO対策になるかもしれません。

      target属性

      wordpress テキスト エディタ

      「target属性」は、リンク先の文書を開くフレームやウインドウを指定します。

      別タブでリンク先を開くように設定するときに使います。

      「target=”_blank”」と入力すれば、別タブで開くようになります。

      rel="noopener" target="_blank"

      この2つは、必ずセットで追加しましょう。

      画像リンクのコード

      wordpress テキスト エディタ

      ⬆︎の画像をそのまま入力すると、コードは下記のようになります。

      <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=”代替テキスト”

       

      画像のコードについて詳しく知りたい方は、⬇︎下記記事にまとめてます。

       

      \画像のURL/

       

      リストの使い方

      wordpress テキスト エディタ

      リストには、順番のなしとありがあります。

      リストにしたい文章を全て <li> で挟んで、 <ul> or <ol> で囲うことでリストにすることができます。
       

      リストの順番なし
      • <ul>
      • <li>リスト</li>
      • <li>リスト</li>
      • </ul>

       
      順番なしのリストは、情報を箇条書きで伝えたいときに使います。

       

      ひたすら文章だけの記事を読んでもわかりずらいので、積極的に使いましょう。

       

      リストの順番あり
      1. <ol>
      2. <li>リスト</li>
      3. <li>リスト</li>
      4. </ol>

       
      順番ありのリストは、手順などを説明するのに使いやすいです。

      数字が自動で入力されるので、順番の入れ替えがあっても手間がかからないです。

      太字タグの注意点

      wordpress テキスト エディタ

      太字タグは、使いすぎるとGoogleからペナルティを受けます。
       

      ペナルティを受けないためにやること
      • 同じワードに太字は使わない
      • 1記事で3つ以上太字を使わない

       
      太字は、Googleに強調している部分を伝える役割があります。

      ですが、太字が3つ以上になると強調している部分が多いと判断されて、ペナルティを受けてしまいます。

       

      <strong>タグの代わりに<b>タグを使えばいいという話がありますが、これは間違いです。

       

       

      <strong>タグと、<b>タグの区別はしないと明言されています。

       

      りゅうのすけ
      りゅうのすけ
      太字タグでペナルティを受けないためには、CSSを使って太字になるように表現しましょう。

       

      CSSで太字を表現する

      wordpress テキスト エディタ

      CSSで太字を表現することで、Googleには強調していると認識させずに太字を使うことができます。

       

      この方法は、テーマエディターを編集するので、テーマ更新時に追加したコードが消える可能性があります。

      テーマエディターを編集する場合は、必ず子テーマを使いましょう。

       

      まずは、「style.css」に太字を使うためのコードを追加します。

      style.cssを編集する

      wordpress テキスト エディタ

      CSSを使って太字にするためには、⬇︎下記コードを「style.css」に追加する必要があります。

      .my_bold{
        font-weight: bold;
      }

       

      追加場所は、「外観」➡︎「テーマエディター」➡︎「style.css」です。

       

      追加CSSに追加しても、変化はありません。

      CSSで太字にする

      wordpress テキスト エディタ

      CSSで太字にするには、⬇︎下記コードで太字にしたい文字を囲いましょう。

      <span class="my_bold">〇〇〇〇</span>

       
      何度も入力するのは面倒なので、「AddQuicktag」を使うと簡単に追加できます。

      「AddQuicktag」の使い方は、⬇︎下記記事にまとめています。

       

      \AddQuicktagの使い方/

       

      見た目の違い⬇︎

      • 何も変化させてない文字
      • strongを使って太字にした文字
      • CSSを使って太字にした文字

       

      strongタグを使うより強調されているけど、強調していないということになっています。

      表示がおかしい時の調べ方

      wordpress テキスト エディタ

      表示がおかしくなった時は、「HTMLエラーチェッカー」を使いましょう。

      「HTMLエラーチェッカー」は、プラグインではなくGoogle Chromeの拡張機能です。

       

      ワンクリックでコードのエラーを検出できるので、とても便利です。

       

      「HTMLエラーチェッカー」の使い方は、⬇︎下記記事にまとめています。

       

      \Google Chrome拡張機能の追加方法/

       

      まとめ

      テキストエディタを使うと、必要なコードの追加や編集作業が簡単になります。

       

      どういったコードで記事が形成されているか、常に確認できるのでソースコードの理解も深まります。

       

      余裕があれば、テキストエディタを使うようにしましょう。

      最後まで見ていただき、ありがとうございました。
       

      ABOUT ME
      りゅうのすけ
      高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
      PS.

      記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
       

      \1円からのドネーション/

      仕事依頼

       

      \WordPress開設依頼/

      公式LINE

       

      \公式LINEもやってます/
      公式LINE無料プレゼント

       

      • ワンクリックで登録可能
      • 個人情報はこちらからわからないようになっているのでご安心を

       

      こんな人におすすめ
      • ブログを進めていく上でわからないことがある
      • 設定など誰か相談できる人が欲しい
      • 記事ネタに困った時に情報収集したい
      • ブロガー仲間が欲しい

       
      困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
       

      登録者特典

       

      公式LINE@無料プレゼント
      1. 限定公開記事の共通パスワード配布
        • ブログ内の限定公開記事のパスワードを配布してます。
      2. サイト作成依頼クーポンコード
        • サイト作成依頼時に使えるクーポンコードを配布します。
      3. ブログスターターキット
        • ブログに必要な便利ツール、イラストなど随時更新
      4. 完全個別無料相談
        • ブログについて、1日1人限定で無料相談を受けてます。
          (営業を仕掛けるのはやめてください。)

       

      \友達追加しますと、下記のメニューが表示されます。/
      公式LINEリッチメニュー

       
      各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!