静的ホームページへのウェブアプリケーション実装事例 – 閲覧ユーザーに有益なツールとUIを提供しよう

PHP言語イメージ

今回は、静的ウェブサイトに不動産物件情報を一覧表示させるウェブアプリケーションの開発、実装事例のご紹介です。少し前おきが長いですがご了承下さい。

「ホームページを業者に作成してもらったけれど、静的ホームページだから更新しにくく不便だなぁ」

「やっぱり投稿機能を持った管理しやすい動的ホームページが良かったんだけど、また一からリニューアルしないといけないのかな?」

とお思いの方おられませんか?

心配いりません。当オフィスであればこのようなお悩みを解決できます。

知ってました?実はウェブアプリケーション作成の技術があれば、一からホームページをリニューアルし直す必要はないんです。現状の静的ホームページにウェブアプリケーションを追加実装すれば良いんです。

まず静的ホームページとは何なのかから説明します。対義語に動的ホームページという言葉もあります。

まず、旧来のホームページは、ホームページ作成の基本的なコンピューター言語であるHTML言語(ハイパー・テキスト・マークアップ・ランゲージ)のみで作成されており、HTML言語はタグと呼ばれる命令をテキストエディタ等で記述して拡張子がhtml(またはhtm)のファイルを作成し、それをブラウザが1行ずつ読み込んで記述された命令通りの表示をするというものでした。

例えば、

<h1>これはタイトルです。</h1>

と、HTML言語で命令を記述したファイルを作成すると、ブラウザはその支指示を読み取り、そのとおりに画面上に表示してくれるわけです。

しかしこの場合、テキストエディタで記載し作成した内容は、ファイルをテキストエディタで編集し直す等しない限りは固定であり、決まった内容でしかなく、条件に応じた動的な表示はできませんでした。

これが、HTML言語で作成されたホームページは静的ページであるという理由です。

この静的ページの問題は、装飾やユーザーインタラクティブなユーザーの興味を引くようなページを作成できないばかりではなく、ブログ投稿やニュースリリース等のような定期的にコンテンツを追加したり、修正したりといった事が難しいという問題がありました。

そこで登場するのがASP(アプリケーション・サービス・プロバイダー)やワードプレスと言ったウェブアプリケーションです。

ASPとは例で説明すればわかりやすいかもしれません。わかりやすい例は、amebaやlivedoorブログ等のブログサイトです。

あのブログサイトは、使ったことがある方は分かるかもしれませんが、ログインして管理画面に入ると、ブログ作成のための設定や入力が可能となります。

本来であればブログ記事をテキストエディタでHTML形式のコードを用いて作成し、ブログを更新する際には、再びテキストエディタでファイルを開き追加編集してアップロードする等が必要なところ、あのようなインターネット上で作動するアプリケーションがあるおかげで、管理画面で簡単にブログを投稿し、保存したり、管理したりも自由にできるわけです。

つまり、ウェブ上のアプリケーションなわけです。

また、ワードプレスについても同じでありまして、サーバー上にワードプレスをインストールすることで、それ以降は、ウェブ上の管理画面にログインすれば、ブログサイト以上の高機能な編集機能を有し、ウェブ上で作動するブログ投稿システム(アプリケーション)として機能するのです。

ホームページによく備えてあるメールフォームですが、あれもウェブアプリケーションです。

このように、ウェブアプリケーションを導入することで、ウェブを閲覧するユーザーに有益なサービスをもたらすことができます。

自身が所有するホームページを頻繁に更新する必要がある場合は動的ホームページの導入を考えた方が良いのです。無料ブログサイト等のASPやワードプレスのような高機能な投稿機能を備えたCMS(コンテンツ・マネジメント・システム)の導入です。

つまり、動的ホームページとはウェブアプリケーション化されたホームページ管理システムと言っても良いでしょう。

冒頭のように、動的ホームページの導入を渋ったばかりに後から困ったことにならないためにも、本来は初めからよく仕様など検討のうえ、ホームページの製作依頼をして下さい。

でも、後からでもウェブアプリケーション技術者であれば、静的ホームページに動的コンテンツの実装を行うことは可能なんですよ!

当オフィスによる制作事例を紹介します。

別のブログ記事で当オフィス制作事例として紹介済みの(株)エスユーホームズ様のホームページですが、まさしく、今回のブログ記事の「困った」と同じ状況でした。

当初の打ち合わせでは、物件一覧の表示や管理機能は不要であり、ニュースリリースやブログ投稿等も不要の静的ホームページでのご依頼だったわけです。

それが納品間近になって、「やっぱり取扱い物件情報一覧を表示させたい」との要望がありまして、そこはやはりお客様ですし、物件情報を更新するたびに毎度手編集で記事投稿してね、とは言えないわけです。(^^;

方法論として、きちんとしたシステムを導入するのであれば、物件情報一覧ページのみワードプレスをインストールして作成するという方法があります。

実はワードプレスは我々開発者には優れたインターフェースとしての機能もありまして、外部ウェブアプリケーションからワードプレスにアクセスし、そのワードプレスで投稿したデータにアクセスし、投稿データ情報を取得、そして外部アプリケーション側でそのデータ、情報を使用するということも可能なのです。

つまり、既に作成していたメインの静的ホームページにウェブアプリケーションを埋め込むんです。

そのウェブアプリケーションの役割は、外部のワードプレスにアクセスして、ワードプレス上で投稿されたデータ(物件情報等)を取得、そのデータをメインのホームページ上に一覧表示させる、というもの。

ただ、既に納期を過ぎていたばかりでなく、上記方法論だと工数もさらにかさんでしまう。

そこで考えたのが、簡易的なCMS機能の実装です。この簡易CMS機能は以下のようなファイルシステム(ローカルファイルの読み書き)を用いた簡易的な仕組みでありまして、簡易的ではありますものの、お客様の負担は十分少なく、物件情報の更新作業ができるというものであります。

【(株)エスユーホームズウェブサイト、物件情報一覧表示用簡易CMS機能の概要】

1.物件情報はお客様の方でエクセルシートにご入力いただき、それをCSV形式のデータとして出力。

2.そのCSVデータをこちらが指定したサーバー上のフォルダにFTPアップロードしていただく。

3.当方でメインのホームページに埋め込んだウェブアプリケーションがそのCSVファイルからデータを読み取り、ホームページ上に物件情報を一覧表示させる。

トップページ物件一覧UI
トップページに表示される物件情報UI

個別物件一覧ページUI
物件一覧表示ページUI

https://www.office-tomo.net/wp-content/uploads/2021/05/簡易CMS機能説明書.pdf

実は、この程度の機能の実装でありましたらそんなには工数もかかりませんので、そんなにお高くはありません。是非一度お問い合わせください。

サイトマップを備えた独自404ページで、ユーザーへの心配りを

404エラー画像

最近、当オフィスによる事例として(株)エスユーホームズ様のウェブサイトをリニューアル納品いたしました。

こちらの会社様はブログ投稿や写真などのギャラリー等も必要ないとのことで、静的ホームページとして納品したのですが、いざ納品してみて良く考えると困ったことに。

インデックス情報がいまだ旧サイトのままであることから、検索エンジンで表示された検索結果をクリックしても、旧サイトのデータは現在サーバー上にはないことから「404エラーページ(ページが存在しない)」が表示されてしまうのです。

この404エラーページは、一般的にはレンタルサーバー会社側で用意したページが表示され、ロリポップの場合下記画像のようなページが表示されます。

ロリポップ404エラー画面

しかし、これはあまり好ましくありません。なぜならば、せっかくアクセスしてくれたユーザーはがっかりですしイメージダウンですし、面白味に欠けます。

また、この404エラーページが表示されたユーザーは直帰すること受け合いですし、心配りが足りません。

従いまして、せっかくアクセスしてくれたユーザーを逃さないためにも、404エラーというイメージダウンをプラスに変える方策として、サイトマップ付きの独自404ページを作成し設置する事を思いつきました。

ワードプレスの場合はサーバー設定不要で404ページを結構簡単に用意できますが、今回は一からコーディングした静的ホームページ。ユーザーが存在しないページをリクエストすると当方で用意した404ページが表示されるように.htaccessファイルでサーバー設定したわけです。

.htaccessの作成や設置方法はレンタルサーバー会社のマニュアルがあるので結構簡単です。

これなら、新たなリニューアル後のウェブサイトの全体像も掴みやすく、ユーザーも気を取り直し、元々アクセスしたかった情報にアクセスができます。そしてなによりユーザーを逃さない(直帰させない)で済むのです。

普段は何気に考えていた404ページですが、このような場面においては便利だし、ちょっとしたした心配りにつながるサービスだと思いました。

せっかくご注文頂き納品するわけですから、最後まで気を抜かず、お客様のイメージダウンにはならないような心配りをしたいものです。

ロリポップにおける.htaccessファイルの設置方法マニュアルはこちら。

https://lolipop.jp/manual/hp/htaccess/

そして新たに作成した404ページの全体像がこちら。

404エラーページ事例

サイテーションシグナルを活用しよう – SEO対策

SEO

ブログや記事投稿を活用して検索エンジンでの上位表示を目指しておられる方々、外部対策としてサイテーションシグナルは活用しておられますか?

そもそも、検索上位を狙うどころか、検索インデックスすら進まない等、それ以前の問題を抱える方も多いのではないでしょうか?

ホームページ自体に何か問題があるのであれば改修すれば改善される事も多いのですが、サーチコンソールに登録してホームページの存在を知らせ、ホームページに問題もなく、サイトマップも取り入れる等、適切に最適化しているにもかかわらず、検索上位はおろかインデックスすらままならないケースもあるかと思います。

この膠着状態になりますと私達ウェブ業者もどうしようもないのです。

何故なら適切な設定を施して納品はしているからです。そして、原因として考えられるのは認知度不足が考えられます。

でも、「お客様からすると何故なんだ?」と疑念を感じる事でしょう。

しかし、施策がないわけではありません。今回お伝えする施策は、あくまで「改善に向けた取り組み」なのであって結果を保証するようなものではありません。

通常のビジネスや業務、仕事においても現状の問題点を洗いだし、改善策を検討して実行し、結果を再度確認する。この繰り返し作業を行い業務改善を図る筈です。

いわゆるPDCAサイクルというものです。

この考え方が理解できずに結果のみ求めるタイプの方はこのブログはスルーして下さい。と言いますか、検索結果において上位表示を実現し、営業に結び付けるのは難しいと考えます。

サイテーションシグナルとは

過去のブログにおきまして、検索結果の順位は人気度的な指標に左右される事は既にお伝え致しました。

そしてこの人気度を図る指標は、トラフィック数やサイト滞在時間、被リンク(バックリンク)の数等であります。

最近では、上記指標以外にも、グーグルさんはサイテーションシグナルを指標として取り入れているのではないかと言われております。

そして、サイテーションとは、ウェブにおきましては「言及」を意味します。

そしてウェブ上でのサイテーション数、つまり言及された数の多さ(シグナル)でそのキーワードの価値を図っているわけです。

例えば様々なサイトやブログ上で「○○○事務所」や「△△△コンサルティング」等の言及が増えれば、より多くの方に認知された会社なんだな、と推定されるわけです。

現在では、他人のホームページからリンクされていなくとも、ウェブ上で自社ブランドに関し、ただ言及がされるだけで一定の評価を受けられるのです。

従いまして、流入数やバックリンク数を増やすだけではなく、サイテーションシグナルを上げる施策も合わせて実施したら良いと思います。

サイテーションシグナル対策 – プレスリリースの実施

ウェブ上での言及が増えるという事は、自社ブランドが話題になっているという事の現れです。つまり話題性が必要なわけです。全く話題性のないブランドや商品、取り組みが言及されるはずもありません。

そして話題性のある取り組みやサービスを日々世の中に紹介してくれているのがメディアです。このメディアを活用するわけです。

メディアを活用するうえで、まずは、他社にはない独自性の高い商品やサービスを考えたり、話題にしたくなるようなユニークな取り組みを実施する必要があります。

そして準備が出来たらプレスリリースします。

実はプレスリリース代行会社というものがあります。ウェブ上で良く知られているのが「PR TIMES」や「バリュープレス」等です。

世の中のメディアやプレス社は、実はこのようなプレスリリース代行会社等からニュースソース等を買っています。プレスリリース代行会社は、様々なプレスやメディアに情報を提供しているのです。

そして、提供されたプレスリリース情報の中から、もしかすると、どこかのメディアやプレスに採用される(言及される)事もあるのです。

しかし、大手のプレスリリース代行会社は1回の配信につき3万円~の料金設定です。ただし、配信先のメディアやプレス数は何百社とか何千社といった規模になりますので、それだけの効果は期待できるかもしtれません。

有料以外にも完全無料のプレスリリース代行会社も存在します。ご予算のない方はこちらを使うしかありませんね。無料ではありますが、残念なことに配信先メディア数が20件とかに限られてしまいます。

※無料のプレスリリース会社

PR-FREE(ピーアールフリー)

DirectPress!(ダイレクトプレス)

ぷれりり(PRERELE)

HARMONY PRESS(ハーモニープレス)

このようなプレスリリース会社を活用することでサイテーションシグナル数を増加させることができます。

その他のサイテーションシグナル対策 – ポータルサイトを活用する

検索エンジン以外にもユーザーが情報を探す場所があります。それは、ショッピングサイトや比較サイト、口コミサイト、業種別ポータルサイトや地域情報サイト等です。このようなポータルサイトに登録掲載され、露出を増やせば、より多くの他社サイトに掲載されることになります。

以上のような取り組みを行うことで、ウェブ上での認知度が向上し、よりクローリングが進むことにつながるのではないでしょうか。

関連記事

不動産コンサルタント会社様のウェブサイトを制作、納品いたしました – 相模原市の株式会社エスユーホームズ様

エスユーホームズトップページ

先月(4月)12日に受注したウェブサイトの制作が終わり、ようやく納品となりました。

先方は、相模原市の不動産会社様でありまして、株式会社エスユーホームズ 様と仰ります。

先方が望むコンセプトは、不動産取引は安心安全なものであるという事を、不動産売却を検討中の方々にアピールしたいとの事でした。

このお客様は、先に当オフィスにて制作、納品を承ったSEKI不動産コンサルティング様からご紹介頂いた方となります。

SEKI不動産コンサルティング様のウェブサイトはワードプレスでの納品でしたが、今回は、静的ウェブサイト(htmlファイル形式)で制作を承り、当オフィスにて一からBootstrapテンプレートを作成しての納品となります。

下記、今回納品したホームページについて簡単にご紹介いたします。

トップページ

エスユーホームズトップページ
トップページヘッダー

〇下層ページ
当社取扱い売却物件一覧

当社取扱い売却物件一覧
「当社取扱い売却物件一覧」ヘッダー

不動産売却のご相談

不動産売却のご相談
「不動産売却のご相談」ヘッダー

不動産相続のご相談

不動産相続のご相談
「不動産相続に関するご相談」ヘッダー

その他不動産に関するご相談

その他不動産に関するご相談
「その他不動産に関するご相談」ヘッダー

当社について

当社について
「当社について」ヘッダー

お問い合わせ

お問い合わせ
「お問い合わせ」ヘッダー

〇コラムページ
不動産売却の一般的な流れ

不動産売却の一般的な流れ

相続の基本

相続の基本

相続を不動産コンサルタントに依頼するメリット

相続を不動産コンサルタントに依頼するメリット

相続以外の場面でも活躍!不動産コンサルタント

相続以外の場面でも活躍!不動産コンサルタント

【事例ホームページ詳細】

注文者株式会社エスユーホームズ 様
納品したホームページのURLhttp://www.s-youhomes.co.jp
ご依頼のコンセプト不動産売却を検討中の方へ向けた企業サイト。安心安全な不動産会社をイメージした内容とし、相続や不動産コンサルティング業務についても情報発信する。
推奨ブラウザ現行のEDGE(エッジ)、クローム、Safari、OPERA、FireFox、IE11
CMS使用の有無なし(HTML形式データにて納品)
フレームワークBootstrap5、Swiper4.5.1
仕様、機能・モバイルレスポンシブ対応
・ローディング画面の実装
・確認画面、完了画面を備え、お問い合わせ内容に応じて入力フォームが変化するメールフォーム
・モバイルユーザーを意識した横スクロール機能(一部ページにのみ搭載)
・ユーザースクロールイベントに連動した、コンテンツのフェードイン、スライドインアニメーションの実装

(動的ホームページとしての機能を追加実装)
・売却物件情報の簡易CMS機能
ホームページ構成1カラム、1ページタイプ
(A4に換算して概ね30ページ)

エスユーホームズ様が実際に取り扱う売却媒介物件情報や相続、不動産コンサルティングについて理解を深めることができるコラム等、情報満載な内容に仕上げました。

相模原市周辺で物件をお探しの方や、相続、不動産コンサルティングについて知りたい方等、是非、アクセスして頂きたく存じます。

よろしくお願いいたします。

株式会社エスユーホームズのウェブサイトスクリーンショット(PC)
株式会社エスユーホームズのウェブサイトスクリーンショット(レスポンシブ)

関連記事

お詫び

5月10日頃、一時当ウェブサイトの閲覧ができなくなっておりました。

これは、SSL証明書の有効期限切れによるものでした。SSL証明書の更新を行い、復旧済みとなります。

関係各者にご迷惑をお掛けしましたこと、お詫び申し上げます。

ブログで検索上位を狙うには – SEO対策

SEO

1.まずは仕組みを知る

検索結果に表示される順番にはルールがあります。意味もなくランダムに表示されている訳ではありません。

では、どのような根拠に基づき検索順位は決まるのでしょうか?

簡単に言うとそのブログの中身で決まります。内容が優れたブログをユーザーの目に止まらせるべきだからです。

では、それは何故なのか?

ウェブは表現の自由に資するツールだからです。

ウェブを使う事で世の中にとって為になる情報や自身の意見等を自由に発信できる事から、それによる世論形成等、公益上とても良い効果につながる訳です。

だから、世の中にとって利益となる、つまりは公益に資するような記事、ブログが求められます。

そして、検索エンジンの事業者は、公益に資するべく、内容が優れた記事を有するページを上位に表示されるようにしているのです。

でも、実際には優れた記事を多数投稿しても結果につながらない事が多いのが現実です。

さらに何故か?

世界中に拡がるウェブの世界には無数のウェブサイトが存在しており、一つのページ毎に内容を人がチェックしている訳にはいきません。

なので、実際にはクローラやボットと呼ばれるソフトウェア(ロボット)を用いて検索エンジン事業者は情報を収集しているのです。

そして、どのようなアルゴリズムで記事の内容の優劣を判断しているかと言いますと、有用なページであるかどうかは、人が実際に見て判断しているのではなく、先のロボットで、被リンクの数、流入トラフィックの頻度、滞在時間等から、有用な情報を発信しているウェブページかどうかを判断していると言われています。

・たくさんのページからリンクされている → 中身が良いから人気があるんだろう ⤴️⤴️
・訪問者が多い → 中身が良いから人気があるんだろう ⤴️⤴️
・滞在時間が長い → 複数のページを閲覧したから滞在時間が長かったんだろう → 中身が良いからだろう⤴️⤴️

ですので、上位表示させるには、流入トラフィック数を増やす、被リンクを増やす等の方法を考えた方が良いのです。このような人気度的な要素で検索順位は決まります。

2.ブログタイトルを工夫する – トラフィック流入数を増やすために

とりあえずブログが検索結果に表示されるが、順位が上がらない場合は、タイトルを工夫してみましょう。

先に説明したとおり、人気度的な要素で検索順位が決まる訳ですから、検索結果に表示されたリンクからユーザーが訪問する数を増やす必要があります。

つまりは、検索結果に表示されたページリンクをクリックして貰う必要があるわけです。

自分より上に表示されているページを追い抜いて上位を目指すには、自分より上のページよりもクリックされる機会を増やす必要があるのです。

私のブログで分かりやすい例があります。

“addeventlistener ie11”

この2つのキーワードでグーグル検索してみてください。私のブログが1~3位前後に表示されている筈です。

そして、私のブログや私のブログと1位を争うブログのタイトルをよく見てほしいんです。

結論が分かりやすく端的にタイトル化されていませんか?

検索して情報を求めるユーザーは、単純に結論・結果を求めているのです。

だから、ユーザーが何を求めているのか(ニーズ)を良く考えて、タイトルを考えましょう。

それにより情報を求めるユーザーがクリックしやすくなります。

3.ブログの中身も工夫する – サイト滞在時間を増やすために

せっかく検索結果から訪問してくれたユーザーですから、そのまま帰してしまうのは惜しいんです。

せっかくだからユーザーの滞在時間を延ばす努力もするべきです。

まず、サイト滞在時間の計算方法ですが、グーグルアナリティクスの滞在時間等を見ると「0時間:0分:0秒」と表示されていませんか?

一瞬だけ訪問があったのか?少し違います。

この理由はサイト滞在時間のカウント方法に起因します。

サイト滞在時間はユーザーが最初に着地したページのみ閲覧して直帰(別のサイトへの移動やブラウザを閉じた等)したのみの場合は時間がカウントされないからです。

ユーザーが着地したページからさらにウェブサイト内の別のページへと移動した場合にのみ着地時点から滞在時間がカウントされる仕組みなのです。

ですから、サイト滞在時間を延ばすには、ユーザーが着地したページから、さらにウェブサイト内の別ページへと読み進めてくれる必要があります。

その工夫としては、関連記事を表示する等です。

最初にユーザーが着地したブログ記事の最後に、そのブログ記事と関連するおすすめ記事のリンクを張るのです。

これによりユーザーが別ページへと読み進めやすくなるのです。

4.SNSや他ウェブサイトとの連携機能を活用する

SNSと連携する機能(OGP)や他サイトと連携する機能(oEmbed、オー・エンブド)がウェブにはあります。このような機能をウェブサイトに追加改修することで、記事が目に留まりやすくなり、トラフィックの向上につながります。

また、SNSシェアボタンを配置しましょう。先のOGP機能と組み合わせる事で、ユーザーが、SNSにシェアしやすくなるのです。

5.ブログ記事の内容もおろそかにしない

検索順位は実際には人気度的指標により決まると書きましたが、だからと言って記事の中身はどうでも良いかと言うとそうではありません。

せっかく訪問してくれたユーザーの為にも、良い記事を書くべきです。

また、中身をおろそかにすると、それ一回きりの訪問となってしまい、繰り返し訪問をしてもらえません。

結果、トラフィックの逸失に繋がります。

以上、ブログ記事で検索順位を上げる方法でした。

【関連記事】

ワードプレスサイトの修正およびSEO(検索エンジン最適化)改善業務を納品致しました – 那覇市の岡部公認会計士税理士事務所 様

サーチコンソール

4月10日に業務の依頼を請け、作業を進めていた案件が27日に納品の運びとなりました。

お客様は沖縄県那覇市に事務所を構える岡部公認会計士・税理士事務所様です。

元々、ご依頼を承った時点では税理士登録前であられまして、近々税理士登録されるにあたり、既存ウェブサイトの記載内容とロゴ画像の修正をお願いしたいというものでした。

また、ウェブサイトを立ち上げてから3か月が経過するが、検索結果に反映されないのが気になるというもの。

ウェブサイトの修正は、26日に税理士登録番号の取得を待ち、最後に税理士登録番号を加えて作業完了。

担当した作業内容はこちら。

岡部公認会計士税理士事務所トップページ
トップページ
岡部公認会計士税理士事務所業務内容
業務内容
岡部公認会計士税理士事務所紹介ページ
事務所紹介ページ
岡部公認会計士税理士事務所英語ページ
英語ページ

業務内容に追加したコンテンツ「料金表」は、PCでの閲覧する場合と、モバイルで閲覧する場合とで表示UIの出し分けを行っております。

税務業務価格表(PC)
パソコンで閲覧時の料金表のUI
税務業務価格表(レスポンシブ)
モバイルで閲覧時の料金表のUI

問題はSEO(検索エンジン最適化)改善の方でした。

当初、岡部様のウェブサイトをチェックした時に気づいたのが、ブログの投稿数がとても多い事。

私のウェブサイトも検索エンジン最適化対策として、ブログ投稿をしており、その記事数約40記事ほど。

岡部様はそれを優に越える投稿数なんです。

聞けば、ご自身のウェブサイトの検索順位を上げるべく、熱心にブログを投稿しておられるとの由。

しかし、次にチェックしたのはインデックス状況なのですが、何故かたったの4ページしかインデックスされていないという状況でした。

しかも、内3ページは404エラー(ページが存在しない)。

検索結果に全く表示されないのが当たり前の状態でした。

普通はこれだけ熱心にブログを書き綴り、投稿し続けていれば、もっとインデックスされていなければならないもの。

まずは、404エラーの原因を探るべく調査の結果、ワードプレスサイトでたまにあるパーマリンク異常が原因でした。

パーマリンクエラーが生じるに至った原因は、定かではないものの、MW WPフォームのパーマリンク変更機能とワードプレスのパーマリンク設定の干渉では?と思われるもの。

この異常を修正し、翌日くらいからようやくブログ記事のインデックスも進み始め、数日前からはスモールキーワードを用いた場合ではあるものの検索結果において比較的上位に表示され始めるに至り、改善されました。

最後に、SEO対策として、

・検索エンジンの検索順位決定の仕組みを良く知るべきである事

・SEO(検索エンジン最適化)における施策には内部対策と外部対策がある旨

・ブログ等の施策は内部対策にあたる旨

・内部対策だけではなく、外部対策も重要である旨

・外部対策として被リンク(バックリンク)の重要性

等を伝授させて頂きました。

当オフィスでは、ウェブサイトを一から制作するばかりではなく、ワードプレスサイトでたまにあるエラーの修正やウェブサイトの改修等の小さなお困り事からご相談を承っております。

また、基本的なSEO対策についても伝授致しますので、お気軽にお問い合わせ頂きますよう、よろしくお願い致します。

こちらもお読み下さい

スモール事業者がブログで検索順位を上げる方法 – ニッチなキーワードを狙いましょう

ソーシャルメディア

ホームページをお持ちの事業者様は、検索エンジンで上位表示させたいとお考えの方も多いのではないでしょうか?

例えばお酒屋さん。「日本酒  川崎市」とか、そんなキーワードで上位表示されたらウハウハですね。

でもそんなに甘くはありません。「日本酒  川崎市」等の範囲の広いキーワードによる検索結果上位表示は困難です。

ウェブの有用性、検索エンジンの仕組みから理由を説明致します。

ウェブは表現の自由に資する事から公益上有用なツールです。そして、その公益性から中身(有用な情報を発信しているか)が重視されます。

検索エンジン事業者も上記理由から、有用なウェブページを上位表示させるような仕組みにしております。

有用なページであるかどうかは、人が実際に見て判断しているのではなく、ロボットで、被リンクの数、流入トラフィックの頻度、滞在時間等から、有用な情報を発信しているウェブページかどうかを判断していると言われています。

・たくさんのページからリンクされている → 中身が良いから人気があるんだろう ⤴️⤴️

・訪問者が多い → 中身が良いから人気があるんだろう ⤴️⤴️

・滞在時間が長い → 複数のページを閲覧したから滞在時間が長かったんだろう → 中身が良いからだろう

ですので、上位表示させるには、流入トラフィック数を増やす、被リンクを増やす方法を考えた方が良いです。

流入数を増やす方法として、

・ブログ数を増やす

 → 単語数が増えるので何かの拍子に検索ヒットして訪問者が来る事につながる。地道に時間をかけて育て作り込む方法です。

・ブログタイトルはニーズを逆手にとって考える

 → 自分が何かを調べたい時にどんなキーワードを使っているかを考えると分かります。例えば、新規開業を考えていて、無料相談を考えている方や相談料金が不安な方の場合「開業 無料相談」や「開業 相談 料金」とかで調べますよね。タイトルにはこのようなキーワードを自然に入れます

 ・SNSとウェブを連携する。フェイスブックが一番効果が大きいそうです。

ブログ数を増やしたり、タイトルを逆手に取る手法は地道な時間のかかる方法です。本来のウェブの役割や有用性を考えると、そのようなウェブページが上位表示されるべきでしょうが、実際には先のとおり人気度的な指標から順位が決まってしまいます。

それでも地道に続けて下さい。そうしないと元も子もないと思います。

ただ、「日本酒  川崎市」等の漠然とした範囲の大きいキーワードの組み合わせで上位表示は難しいと思って下さい。

例えば、日本酒を買いたい方が「日本酒」で検索した場合、日本酒メーカーや大手量販店が表示されるばかりです。日本酒を売っているスモールビジネス業者は目にも止まりません。「日本酒 川崎市」等、地域を組み合わせて調べる人がいても、大手量販店等が表示されるばかりです。スモールビジネス業者は目にも止まりません。

なぜなら、大手はふんだんに広告費を使っているからです。広告費をかけて流入トラフィックを増やしているんですね。だから、こういう大きいキーワードでの検索結果は大手の一人締めであり、スモールビジネス業者は太刀打ちできません。

ただ、そのスモールビジネス業者が、地域限定の独自のお酒を売っていた場合はどうでしょうか?中にはそのようなニーズを持つ方もいるかもしれませんし、ニッチなキーワードの組み合わせだと上位表示の可能性があるわけです。

実際に私のホームページも「川崎市 ホームページ制作」では埋もれてしまい表示されません。しかし、「tcd074」でグーグル検索してみて下さい。4番目くらいに私のブログが表示されます。「addeventlistener  ie11  使えない」このキーワードの組み合わせで検索してみて下さい。私のブログが2番目くらいに表示されトップを取る勢いです。このブログは、最近毎日2~3人はアクセスがあります。そして、徐々に順位が上がり、トップを狙う勢いです。

たぶん、ホームページ制作している方が困って検索し、ニッチなキーワードで競合が少なく、それなりに上位表示されていたので、クリックされる機会が少なくともあり、そしてそれが繰り返され、定期の流入トラフィックがあるので、今の順位にまで徐々に競り上がって来たんだと思います。

ブログで検索上位を狙うのであれば、こういうニッチなスモールキーワードを狙って下さい。漠然とした範囲の大きいキーワードでは、上位を狙うのは難しいです。

ブログの工夫についてはご自身で考えて頂くしかないと思います。何故なら、私ではその業界や業務内容、ニーズに精通していないからです。キーワードを逆手に取る事もできません。

SNSとの連携をするにも工夫が必要です。ウェブにはOGPというSNS連携機能があります。

OGPについて知りたい方はこちら。

以上、参考になれば幸いです。

こちらもお読み下さい

フルスクリーン動画ヘッダー – サンプルソースコード(BootStrap版 ※コピペ、使用ともにフリー)

フルスクリーン動画ヘッダー(BootStrap版)

先に作成しましたフルスクリーン動画ヘッダー(HTML版)は、BootStrapがインストールされた環境においては相性が悪く(モバイルレスポンシブ時に右側に余白が生じてしまう)、「じゃあ、BootStrap版も作ってしまえ」と思い立ち、早速、BootStrap版を作成いたしました。

BootStrap版の方がソースコードが短くて済み、また、ナビゲーションも取り入れやすいと思います。

仕様

特徴レスポンシブ対応。画面サイズが切り替わっても動画中央部分が常時画面中央に配置されるように設定しており、ブラウザ画面一杯に動画が表示される。
使用コンピューター言語HTML、CSS、JavaScript
フレームワークBootStrap5
対応ブラウザ現行の各種ブラウザ(エッジ、クローム、OPERA、ファイアーフォックス、サファリ)
ライセンス動画ライセンスについて
「Pexels」(https://www.pexels.com/ja-jp)の無料動画を使用している。
●ソースコードライセンスについて
100%GPLとします。
使用動画MPEG4、フレーム幅1920×フレーム高1080
推奨動画サイズ動画のフレーム構成にもよりますが、フレームサイズは幅2000×高1000前後が良いと思われます。
使い方コピペして適当に書き換えてお使いください。尚、ソースコード中の動画「フレーム幅」と「フレーム高」の数値、および「動画のパス」は必ず書き換えてお使いください。

フル画面動画ヘッダーのサンプルソースコード(BootStrap版)

<doctype html>
<html lang="ja">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>フル画面動画ヘッダーのサンプルコード(BootStarp版 ※自由にコピペ、使用OK)</title>

		<!-- Bootstrap CSS -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

		<!-- 動画処理用JS -->
		<script>
			//動画サイズの定義
			const mw = 1920;	//動画フレーム幅。使用する動画サイズに応じて数値を書き換える。
			const mh = 1080;	//動画フレーム高。使用する動画サイズに応じて数値を書き換える。

			//ページ読み込み時の動画表示の動的処理
			window. addEventListener('DOMContentLoaded', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.classList.add('top-50');
					headerMp4.classList.add('translate-middle-y');
					headerMp4.classList.remove('start-50');
					headerMp4.classList.remove('translate-middle-x');
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.classList.add('start-50');
					headerMp4.classList.add('translate-middle-x');
					headerMp4.classList.remove('top-50');
					headerMp4.classList.remove('translate-middle-y');
				}
			});

			//ウィンドウリサイズ時の動画表示の動的処理
			window.addEventListener('resize', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.classList.add('top-50');
					headerMp4.classList.add('translate-middle-y');
					headerMp4.classList.remove('start-50');
					headerMp4.classList.remove('translate-middle-x');
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.classList.add('start-50');
					headerMp4.classList.add('translate-middle-x');
					headerMp4.classList.remove('top-50');
					headerMp4.classList.remove('translate-middle-y');
				}
			});
		</script>
	</head>

	<body>
		<header>
			<div class="w-100 vh-100 overflow-hidden">
				<video id="headerMp4" playsinline="" autoplay="" loop="" muted="" src="test4.mp4" class="position-relative"></video>
			</div>

			<div class="position-absolute top-50 start-50 translate-middle" style="z-index:1;">
				<h1 class="container display-6 text-white">貴社ウェブサイトを、ダイナミックで迫力のあるフル画面動画に</h1>
			</div>
		</header>

		<div class="container">
			<h2 class="display-6 text-center text-wrap p-5">フル画面動画ヘッダーのサンプルページです</h2>

			<p class="text-center text-wrap p-3">ブラウザのリサイズやモバイルレスポンスへの切り替え時等、いつでも全画面一杯に動画の中央部を表示する仕様です</p>
		</div>

		<!-- Option 1: Bootstrap Bundle with Popper -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
	</body>
</html>

フル画面動画ヘッダーのサンプルページ(BootStrap版)

フルスクリーン動画ヘッダー – サンプルソースコード(HTML版 ※コピペ、使用ともにフリー)

フルスクリーン動画ヘッダー

最近、フル画面動画ヘッダーへの改修案件に応募する機会がありまして、結果としては流れたのですが、せっかくの機会なので、オリジナルのフル画面動画ヘッダーを作成してみました。

動画は、静止画像のようなbackground系のCSSがないので、様々なブラウザのリサイズやモバイルレスポンシブの点において面倒です。

動画が画面サイズの変化に合わせて適切に表示されるように調整するにはJSを使うしかないと思われます。

仕様

特徴レスポンシブ対応。画面サイズが切り替わっても動画中央部分が常時画面中央に配置されるように設定しており、ブラウザ画面一杯に動画が表示される。
使用コンピューター言語HTML、CSS、JavaScript
フレームワークHTML5
対応ブラウザ現行の各種ブラウザ(エッジ、クローム、OPERA、ファイアーフォックス、サファリ)
ライセンス動画ライセンスについて
「Pexels」(https://www.pexels.com/ja-jp)の無料動画を使用している。
●ソースコードライセンスについて
100%GPLとします。
使用動画MPEG4、フレーム幅1920×フレーム高1080
推奨動画サイズ動画のフレーム構成にもよりますが、フレームサイズは幅2000×高1000前後が良いと思われます。
使い方コピペして適当に書き換えてお使いください。尚、ソースコード中の動画「フレーム幅」と「フレーム高」の数値、および「動画のパス」は必ず書き換えてお使いください。

フル画面動画ヘッダーのサンプルソースコード(HTML版)

<!doctype html>
<html lang="ja">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>フル画面動画ヘッダーのサンプルコード(HTML版 ※自由にコピペ、使用OK)</title>

		<!-- 動画処理用JS -->
		<script>
			//動画サイズの定義
			const mw = 1920;	//動画フレーム幅。使用する動画サイズに応じて数値を書き換える。
			const mh = 1080;	//動画フレーム高。使用する動画サイズに応じて数値を書き換える。

			//ページ読み込み時の動画表示の動的処理
			window. addEventListener('DOMContentLoaded', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');
				const mp4Wrap = document.querySelector('#mp4Wrap');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.style.top='50%';
					headerMp4.style.transform='translatey(-50%)';
					headerMp4.style.webkitTransform='translatey(-50%)';
					headerMp4.style.msTransform='translatey(-50%)';
					headerMp4.style.left='0';
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.style.left='50%';
					headerMp4.style.transform='translatex(-50%)';
					headerMp4.style.webkitTransform='translatex(-50%)';
					headerMp4.style.msTransform='translatex(-50%)';
					headerMp4.style.top='0';
				}
			});

			//ウィンドウリサイズ時の動画表示の動的処理
			window.addEventListener('resize', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');
				const mp4Wrap = document.querySelector('#mp4Wrap');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.style.top='50%';
					headerMp4.style.transform='translatey(-50%)';
					headerMp4.style.webkitTransform='translatey(-50%)';
					headerMp4.style.msTransform='translatey(-50%)';
					headerMp4.style.left='0';
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.style.left='50%';
					headerMp4.style.transform='translatex(-50%)';
					headerMp4.style.webkitTransform='translatex(-50%)';
					headerMp4.style.msTransform='translatex(-50%)';
					headerMp4.style.top='0';
				}
			});
		</script>

		<!-- 独自CSS -->
		<style>
			body{
				margin:0;
			}

			.movie-wrap{
				height:100vh;
				width:100%;
				overflow:hidden;
				z-index:0;
			}

			.branding-title{
				position:absolute;
				z-index:1;
				top:50%;
				-webkit-transform:translatey(-50%);
				    -ms-transform:translatey(-50%);
				        transform:translatey(-50%);
			}

			.title-font-style{
				padding:200px;
				color:white;
				font-size:40px;
				text-align:center;
			}

			@media screen and (max-width:768px){
				.title-font-style{
					padding:10px;
				}
			}
		</style>
	</head>

	<body>
		<header>
			<div class="movie-wrap">
				<video id="headerMp4" playsinline="" autoplay="" loop="" muted="" src="test3.mp4" style="position:relative;"></video>
			</div>

			<div class="branding-title">
				<h1 class="title-font-style">貴社ウェブサイトを、ダイナミックで迫力のあるフル画面動画に</h1>
			</div>
		</header>

		<div style="padding:50px;">
			<h2><center>フル画面動画ヘッダーのサンプルページです</center></h2>

			<p><center>ブラウザのリサイズやモバイルレスポンスへの切り替え時等、いつでも全画面一杯に動画の中央部を表示する仕様です</center></p>
		</div>
	</body>
</html>

フル画面動画ヘッダーのサンプルページ(HTML版)