~効果の出るサイトにするために~
Webサイトはオープンしたら終わりではありません。
サイト運用で更新作業は、もっとも大切なことです。 Webサイトが効果を発揮するには、価値のある記事を多く発信することが最も重要です。
更新が1年以上まったくされていないWebサイトをよく見かけますが、これが個人のサイトであれば「更新がめんどくさい」で済みますが、 企業・業者であれば「この会社大丈夫?」というマイナスイメージをもたれてしまいます。
せっかく見に来てくれた訪問者を逃さないために…。
これだけは抑えておいて欲しいというポイントと、基本的な投稿の手順、BizVektor固有の設定方法をご紹介いたします。
◆◆◆目次◆◆◆SEO対策について
投稿やページの記事の編集について
BizVektor固有の設定
見出しタグ(h2,3,4)や本文にキーワードを入れる。
Webサイトのタイトルや記事(ページ)のタイトルは最重要事項
検索エンジンは通常の文章に入っているキーワードよりも、“見出し”に含まれているキーワードを最も重視します。Webサイトのタイトルや記事(ページ)のタイトルは最重要事項ですので、まずはページのタイトルやブログ記事のタイトルに、検索して欲しいキーワードを必ず入れて下さい。
ページ本文の中の見出しにもキーワードを入れる
記事のタイトルにキーワードを入れる事を意識してくれる方はわりといるのですが、
本文中に自分で任意に作る見出しも効果的に活用して下さい。
本文が長くなる場合、文章の途中で“小見出し”を作ると思うのですが、しっかりと検索サイトに『ここは見出しです』と認識させる事が重要です。
見出しを作る時、そこが見出しである事がわかるように、文字の大きさを大きくしたり、色を変えたりしますよね?
近年のブログには、本文入力欄に文字のサイズや色を変更するツールバーがついていますので、そういったものを活用されている方もいるかと思います。
そういったツールで“文字の大きさを大きく設定”したり“文字の色を変えたり”して見出しにするとしましょう。
人間は見た目で『あ、文字大きくなってるし他と色も違うから見出しなんだ』と無意識に認識しますが、検索エンジンにとってはそれが見出しかどうかはわかりません。
文字のサイズや色を変えただけでは検索サイトからの評価は通常の文章と何ら変わりはないのです。
そこで、『ここは見出しですよ』と伝えるには、ビジュアルモードで見出しにしたい文字を選択し、エディタのプルダウンから見出しを選択します。

見出しにしたい文字を選択し、プルダウンで見出しのレベルを選択します。
※上記のビジュアルモードはプラグインの「TinyMCE Advanced」を有効化して「文字に段落タグを指定する」を使用した場合の画面です。
テキストモードで書いている場合は
<h3>検索エンジンに効く見出しの書き方</h3>
という具合にhタグでくくります。このように文書構造をコンピューターが判別出来るようにタグ付けするのをマークアップといいます。
h の後ろの数字は重要度で、h1は大見出し、以下h2~h5くらいまで使うのが一般的で、数字が小さいほど重要度が高いと判断されます。
但し、大見出しであるh1(見出し1)は基本的に1ページに一つしか使ってはいけません。大抵ブログなどでは記事タイトルがh1になるように設定されているので、本文で使えるのは h2(見出し2)か h3(見出し3)以降と言う事になります。
大見出しにh2、中見出しにh3、小見出しにh4を使うように癖をつけておきましょう。
そうすることで、下記の図のように記事の読みやすさも上がりますので、最後まで読んでもらえる可能性が高まります。
※BizVektorでは h2やh3などのタグにそれぞれ予めデザインが指定されています。
※BizVektorの適応しているデザインにより、Webサイト上の表示画面のデザインは変わります。
適度に改行や画像を入れて読みやすくする。
どれだけ価値のある文章を書いていても、読んでもらえないと意味がありません。
文章量が多い記事でも「読みやすい」と感じてもらえれば、最後まで読んでもらえる可能性が高まります。
改行を入れる
文章をただ流しこんただけでは読みずらいので、適度に改行をいれてあげましょう。
特に話が変わる場合は、普段より多めに改行を入れると読みやすくなります。
画像を入れる
文中で、画像を交えて説明した方が分かりやすい部分には積極的に画像を使いましょう。
かといって意味のない画像を入れるのは逆に混乱しますので、画像を使う必要性がない場合は使わなくても良いです。
価値のある記事を書く。
WordPress関連のブログ記事などを見ていると、よくSEO対策として「All in one seo pack」が必須プラグインとして挙げられていますが、個人的見解としてはAll in one seo packは全く必須じゃありません。
All in one seo pack ってつまるところ「タイトル」「メタキーワード」「ディスクリプション」を個別に設定出来るってだけで、
- タイトルタグなんてそもそも記事のタイトルをしっかり作れば関係ない
- メタキーワードは現在の検索エンジンでは評価されていません。
昔の名残りで一応存在している程度で現在の検索エンジンでは評価されていません。一応BizVektorでも設定出来るようにはなってますが、気休めに入力する程度で、必死になって頭を捻る程影響の出るものではありません。 - ディスクリプションは検索結果に表示された時には関係しますが、BizVektorでは概要に入れれば表示されますし。
という感じで、BizVektorに限らずなのですが、そもそもそこに労力をかけるくらいなら記事を増やした方が100倍お得です。
極小の記事や価値の薄い記事にいくら小手先の技術を加えたってアクセスは増えません。ですので、自分のビジネスの魅力をよりわかりやすく伝える記事を書く事に十分な力を注いで下さい。
その他、文章の書き方については下記の記事が非常に参考になるので是非読んでみて下さい。
検索エンジンって結局「人間」に近づけようと改良が重ねられているのです。
特定のキーワードに対して、十分な情報があるかどうかが重要な判断基準になっています。
そして、その記事が役に立つと認識されているかどうか?
これは他のサイトからどれだけリンクされているかという被リンクで検索エンジンは判断しています。
読んだ人が「この記事は参考になる」「誰かに教えたい」と思ったら、自分のブログからリンクを貼ったり、twitterやfacebookで投稿しますよね。
人が読んで為になる。教えたくなる記事を書く。
これに勝るものはありません。
投稿(ブログ)の新規投稿の手順
※1 投稿>「新規追加」をクリックします。
※2 タイトル、本文を入力します。
※3 「公開」をクリックして公開します。
【プレビュー】をクリックするとWEBサイト上での表示を確認できます。
【下書きとして保存】をクリックすると作成した記事を公開せずに保存できます。
画像(メディア)を新規アップロードして記事に挿入
↓エディタの、画像を入れたいところにマウスカーソルを移動して、「メディアを追加ボタン」をクリックします。
↓タブの「ファイルをアップロード」をクリックして「ファイルを選択」をクリック。
↓画像をアップロードしたら、画像を選択した状態で※1、
「タイトル」「キャプション」「代替テキスト」※2を入力する。
(タイトルはtitleタグが生成されます。キャプションは画像の下にキャプションが付きます。代替テキストはaltタグが生成されます。任意で入れて下さい。)
添付ファイルの表示設定※3で、画像を表示したい位置やリンク先、サイズが変更できます。
ここでは配置を右、リンク先をメディアファイル、サイズを中にしました。お好きなものに変更してください。
↓画像が挿入されましたので、更新ボタンをクリック。
↓「変更をプレビュー」ボタンを押して、確認してみてください。画像が右側に入り、画像下にキャプションが入りました。
表組み(テーブル)を記事に挿入
表組み(テーブル)の基本
テーブルは縦横に複数のマスで構成されています。1マスを「セル」といい、横のセルの集合を「行」、縦のセルの集合を「列」といいます。
セルには、データを記入するデータセルと、見出しを記入するヘッダセルの2種類があります。
表組み(テーブル)の作成
プラグイン「TinyMCE Advanced」で表組みを作ります。
【1】「表を挿入」をクリック。
表組み(テーブル)を挿入したい場所にマウスカーソルを移動して、(表を挿入)をクリック。
【2】設定ボックスに数値入力
設定ボックスが表示されるので、「列」「行」に数値を設定します。
※BizVektorには、tableタグのデザインcssがすでに設定されております。
Web上のデザインについては、設定されているデザインによって異なります。
変更したい場合は、cssを書き加える必要があります。
【3】テキストを入力
テーブルが挿入されました。
列、行の追加・削除
列の左に新たに列を追加したい場合は、挿入したい列をクリックしてから(列を左に挿入)をクリックします。右に挿入したい場合は
(列を右に挿入)をクリックします。削除したい場合は
(列を削除)をクリックします。
行の下に新たに行を追加したい場合は、挿入したい行をクリックしてから(行を下に挿入)をクリックします。上に挿入したい場合は
(行を上に挿入)をクリックします。削除したい場合は
(行を削除)をクリックします。
セルの結合
【1】結合させたいセルをドラッグして選択
図のように結合させたいセルをドラッグして選択します。
【2】セルの結合をクリック
そのまま(セルの結合)をクリックすると、結合されます。「更新」ボタンを押して「変更をプレビュー」します。
↓セルが結合されました。
セルの結合を解除
結合したセルを解除して元に戻す場合は、(セルの結合を解除)で元に戻ります。
BizVektorテーマオプション
BizVektorには、テーマオプションというBizVektor固有の設定箇所があります。
メニューの「外観」>「テーマオプション」から編集できます。
ここでは以下の内容の設定をしています。変更する場合はこちらから変更してください。
- ▼デザイン
- サイトのデザイン、ロゴ、メニュー数など、デザインに関わる部分が設定できます。
- ▼連絡先
- 電話番号や住所など、連絡先に関わる部分が設定できます。
- ▼3PRエリア
- トップページに表示されるPRエリアに関わる部分が設定できます。
- ▼「Information」と「Blog」の設定
- トップページの表示件数や表記の変更など、Information(お知らせ)とBlog(投稿)に関わる部分が設定できます。
- ▼SEO & GA
- トップページの<title>タグやキーワードなど、SEO と Google Analytics に関わる部分が設定できます。
- ▼トップページ
- トップページに関わる部分が設定できます。
- ▼スライドショー
- トップページのメインビジュアルのスライドショー部分が設定できます。
- ▼SNS連携
- facebookやtwitterなど、SNSに関わる部分が設定できます。
BizVektorページデザイン(cssクラス名)指定方法
BizVektorには固有のcssクラス名がいくつか用意されています。
html部分をコピーしてページに貼り付けていただくと、以下のような装飾が可能になります。
上手に使って、見やすいページ作りにご利用ください。
リードテキストの装飾
文章を書くときにタイトル(大見出し)、リードテキスト(全文)、本文の順にかいたりしますが、このリードテキスト用のクラスです。
タグに「.leadTxt」をつけると以下のように装飾されます。
html部分
本文よりも文字サイズが大きくなります。
ブラウザ上の見え方
本文よりも文字サイズが大きくなります。
ボタンの装飾
リンクボタンのクラスです。テキストリンクだと物足りない時にどうぞ!
以下のようにaタグに「.btn」をつけると装飾されます。さらにサイズもSサイズ、通常サイズ、Lサイズがあります。
html部分
<a class="btn btnS" href="#">ボタンSサイズ</a> <a class="btn" href="#">ボタン通常サイズ</a> <a class="btn btnL" href="#">ボタンLサイズ</a>
ブラウザ上の見え方
フローボックスの装飾
「制作の流れ」や「注文の流れ」など、分かりやすく見せたい流れ図用のクラスです。
ブロックレベル要素のタグに「.flowBox」をつけ、定義リストの<dl><dt><dd>タグを入れると以下のように装飾されます。
html部分
</pre> <div class="flowBox"><dl><dt>フローボックスタイトルです。</dt><dd>フローボックス本文です。フローボックス本文です。フローボックス本文です。</dd></dl></div> <div class="flowBox"><dl><dt>フローボックスタイトルです。</dt><dd>フローボックス本文です。フローボックス本文です。フローボックス本文です。</dd></dl></div> <div class="flowBox last"><dl><dt>フローボックスタイトルです。</dt><dd>フローボックス本文です。フローボックス本文です。フローボックス本文です。</dd></dl></div> <pre>
ブラウザ上の見え方
- フローボックスタイトルです。
- フローボックス本文です。フローボックス本文です。フローボックス本文です。
- フローボックスタイトルです。
- フローボックス本文です。フローボックス本文です。フローボックス本文です。
- フローボックスタイトルです。
- フローボックス本文です。フローボックス本文です。フローボックス本文です。
※最後のボックスのみ下矢印がいらないので、「last」を付けます。
よくある質問ページで使うQ&Aの装飾
よくある質問のページ用のクラスです。アイコンで分かりやすい装飾になっています。 定義リストのdlタグに「.qaItem」をつけ、<dt><dd>タグに質問と回答をいれると以下のように装飾されます。
html部分
</pre> <dl class="qaItem"><dt>質問内容が入ります。</dt><dd>回答内容が入ります。</dd></dl> <pre>
ブラウザ上の見え方
- 質問内容が入ります。
- 回答内容が入ります。
blockquote要素の装飾
クラス名ではありませんが、<blockquote>で文章を囲むと、枠が装飾されます。
html部分
</pre> <blockquote> blockquoteで囲まれた文章が、枠で囲まれます。</blockquote> <pre>
ブラウザ上の見え方
blockquoteで囲まれた文章が、枠で囲まれます。