タグ検索:web制作 , a-blogcms

Webサイトを運用していると、システムのバージョンアップや掲載内容の改修、またはサーバの移設など、様々なケースでWebサイトを一時的にメンテナンス画面に切り替え、運用を停止しなくてはいけない場面に遭遇します。理想的にはWebサイトの運用を止めずに、スムーズにメンテナンス作業が完了することが望ましいのですが、現実的には難しい場合が多々あります。

メンテナンスページを設ける方法として、一般的にはルート階層にメンテナンス内容を記載したファイル(index.htmlなど)を設置して、あとは.htaccessでリダイレクトをかけるなど、割とざっくりと対応しているケースもある様ですが、検索エンジンのクローラーが回ってきた場合に意図しない判断をされてしまう可能性があるため、正しい方法でメンテナンス画面を用意することが推奨されています。

.htaccessで503ページを用意する

Google検索セントラルを確認すると、「サイトのダウンタイムへの対処の仕方」には、下記の様に「503」を利用することが推奨されております。503を使うことによりGoogleにメンテナンス中であることが伝わるため、インデックスなどに影響が出る事もない様です。SEOを重要視されているWebサイトにとってインデックスは非常に重要ですので、Googleの推奨される方法で実装されることをお勧めいたします。

・サイトのダウンタイムへの対処の仕方
「サイトのダウンタイムへの対処の仕方」の詳細はこちら

ページのリクエストに対して、HTTP ステータス コード 404 (Not Found) を返したり、エラー ページを表示しているのに 200 (OK) を返したりする方法は、ダウン タイムへの対処法としてお勧めできません。それよりも、HTTP ステータス コードとして 503 (Service Unavailable) を返すように設定した方が、検索エンジンのクローラに対してダウン タイムが一時的であることを伝えることができます

503でリダイレクトをかける場合、一般的にはhtmlを設置するroot階層の.htaccessに下記の様な記述で対応します。
(サーバの仕様により書き方が変わる場合がありますので、実施にはご利用中のサーバに合わせて記述してください)

#root階層にmaintenance.html(メンテナンスページ)を設置する場合
#自分のIPを除外する場合はIP箇所のコメントアウトを外してIPを設定してください
ErrorDocument 503 /maintenance.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !/maintenance.html
#RewriteCond %{REMOTE_ADDR} !=000.000.00.00
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(jpg|png|css)$
RewriteRule ^.*$ - [R=503,L]
</IfModule>

#メンテナンス終了予定日時
<IfModule mod_headers.c>
Header set Retry-After "Fri, 5 July 2024 7:00:00 GMT"
</IfModule>

a-blog cmsならシステムに503ページが用意されています



a-blog cmsには「管理ページ」のダッシュボードに、メンテナンス画面に切り替える機能が備わっております。
こちらからモードを切り替える事で「503」ページに転送できますので、簡単に切り替えが可能です。
503ページの内容を変更したい場合は、あらかじめ作成した503.htmlをサーバのhtmlを設置するroot階層にアップロードしておく必要がありますのでご注意ください。(root階層にファイルがない場合は、a-blog cmsが用意した定型のメンテナンスページが表示されます)

CPIは503が利用できないらしい

今回メンテナンスページを表示するサーバがCPIだったのですが、調べたところCPIでは.htaccessの503エラーの操作についてサーバ側で制限がかかっており、ユーザー側では503用ページを設定することが出来ない事が分かりました。
CPIでメンテナンスページを表示する場合は、302のリダイレクトなどでメンテナンスページへ転送するなど、他の手段を使う必要があるようですのでご注意ください。

・CPI .htaccess の設定方法
「CPI .htaccess の設定方法」の詳細はこちら

この様に.htaccessに制限がかかっている場合もありますので、ご利用のサーバを事前に調べておくことをお勧めいたします。

#CPIでサイト全体のアクセスをmaintenance.htmlに302リダイレクトをする場合
#root階層にmaintenance.html(メンテナンスページ)を設置
Options +SymLinksIfOwnerMatch
RewriteEngine On
RewriteCond %{REQUEST_URI} !/maintenance.html$
RewriteRule ^(.*)$ /maintenance.html [R=302,L]

最後に

メンテナンスページを表示するという単純な作業が、思わぬところで「Googleからのインデックスを削除されてしまう」場合があると思うだけでドキッとします。メンテナンス中は時間との戦いです。メンテナンス自体の作業に追われ余裕がない事も多いと思いますので、ぜひ事前にしっかりと準備をして、心に余裕をもって対応されることをお勧めいたします。(自分自身への忠告も込めて…)

メンテナンスページ自体は人が見るだけですが、その裏でWebサイトの評価を落とさない様に、この様な情報を頭の片隅にでも覚えておいていただければ幸いです。


自社Webサイトやお客様のWebサイトなど、弊社では複数のWebサイトのSEOランキングを日々計測しています。
当たり前ですが、どのWebサイトもサイト構成やデザイン、掲載内容、更新頻度、Core Web Bitals の対策具合は異なっています。

もちろん一番良いのは、a-blog cms(CMS)を常に最新にして、サーバ環境も最新に(または定期的に見直し)、Core Web Bitalsを改善しつつ諸々の対策、そして何よりしっかりと目的を持って定期的にWebサイトを更新をしていただく事です。これが一番効果が出ますし、日々の更新の中で常に改善が出来ますので、実際のビジネスのスピードに合わせたWebサイトの運営ができ、検索順位だけでなくユーザーにとっても有益なWebサイトになります。

ただ、複数管理させていただいているWebサイトの中には、普段あまり更新をしないWebサイト(年に数回程度)もあります。そんな普段更新をしないWebサイトでも、下記の対策を行ったことで順位が改善しているものがあります。

SEOの改善に行った対策

  • a-blog cmsを最新版にバージョンアップ
  • 最新サーバに乗り換え
  • PHPを8.x以降に(できればPHP8.3)/PHP関連の各メモリ割り当てを増加(できれば2G程度)
  • a-blog cmsとサーバのキャッシュ関連の適切な設定
  • Core Web Bitalsを改善
  • 構造化データの導入・見直し
  • Search Consoleの情報を元に「インデックス/重複/canonical」などの調整

Webサイトの基礎が活きる

サイトごとに狙うキーワードのシェアや競合サイトなども違いますし、サイト自体のGoogleの評価も変わってきますので一概には言えませんが、サーバの環境やWebサイト構造など、Webサイトの基礎の部分を見直し改善すると、あまりサイトを更新していなくても一定の評価が上がると感じています。

上記の様な見直しや改善は、全て結果的にWebサイトのパフォーマンスやセキュリティなどの向上につながります。パフォーマンスやセキュリティの改善は、効果があることをGoogleも公表していますが、日々実測していると経過が分かりますので非常に面白いです。

また、Core Web Bitalsにはユーザービリティやアクセシビリティに関する項目もあるため、例えSEO目的の対策であったとしても、結果的にはWebサイトやそのユーザーに対して非常に有益な施策だと言えると思います。

Core Web Bitalsに関しては以前にも「Web制作会社がおこなうSEO施策とCore Web Bitalsの改善」「SEOとは「UXを高めていく事」という時代になったのだと思う」で書いておりますので、興味がある方はぜひご覧ください。

最後に

もしSEOで検索順位を上げたくても効果が出ない場合は、ぜひこの辺りの改善も視野に入れてみてはいかがでしょうか。
Webサイトやサーバが数年前の環境のままでしたら、改善はしても悪くなることはないと思います。
上記の施策だけでしたら、Webサイトに掲載している内容に変更を加えませんので、この施策で順位が悪化することはないと思いますので、評価を全体的に底上げする意味でも効果的だと思います。

a-blog cmsでのWebサイト運用にはノウハウもございますので、「Webサイトが見てもらえない」など、Webサイトの効果に疑問を感じたり、何かWebサイトの事でお困りでしたら、是非お気軽にご相談ください。


SNSが盛んになってから随分と月日が経ちました。
最近ではX、FaceBook、Instagram(Thereds)、Youtube、LINEなどのSNSに多くの人が集まり、活発に活用されています。

Webサイト制作の現場にいると、「WebサイトはSNSがあるからあまり活用していない」「WebサイトよりSNSの方が便利」などといった声も聞こえてくるほど、Webサイトの代わりとして運用されている人も多いのではないでしょうか。Webサイトの更新が止まっている代わりに、SNSを盛んに運用している事例も拝見します。

しかしビジネス的な視点でみると、SNSのみ利用される場合はリスクがあります。
そこで今回はSNSとWebサイトの良い関係性を考えてみようと思います。

SNSの良さとウィークポイント

SNSの良さはとは?それは「写真や文章、動画の投稿が手軽に出来ること」「同じ趣味などの仲間と繋がれること」「いいねやDMなどのメッセージで簡単にコミュニケーションが取れること」などでしょうか。実際の生活で知っている人とのコミュニケーションだけではなく、SNS上で知り合うことも出来ますので、今まで出会えなかった人と出会う事が出来ます。多くの人と人とが出会い、簡単に情報交換が可能な場がSNSの良さなのだと思いますが、最大のポイントはそこに「多くの人が集まっている」ということだと思います。

しかし優れたツールでも少し方向性を誤ったり、他に人気のツールが登場すれば、さほど執着もなく人々は離れていき、そのSNSの良さは失われていきます。急なアカウントの停止等により、積み上げた情報が一気にSNS上から失われ機能しなくなる恐れもあります。

SNSは非常に優れたツールですが、海外の企業が運用する無料サービスである以上、ネット上のビジネスの軸足をおくには危うい部分がありますので、あくまで情報を拡散しコミュニケーションを取るための窓口と考えておいた方が良さそうです。

自社Webサイトの良さとウィークポイント

Webサイトの良さとはなんでしょうか。
SNSと比較した場合の最大のメリットは、やはり自らが設計しWebを活用した仕組みで、コンテンツを制作する事が出来ます。SNSに比べてコストは掛かりますが、作り上げたコンテンツを蓄積しながら育てていく事が出来ます。この育てていくという作業は、自社のサービスや商品・もしくは企業自体のブランディングにも効果的で、こだわりのあるコンテンツを構築する事も可能です。

一方SNSと比べ弱いところは、サイト自体が独立した存在である場合が多く、そのWebサイト自体(企業・サービス・商品など)に魅力や興味・目的がなければ人が集まってこないということです。人に見ていただくためには流入元をしっかりと計画しておく必要があります。一般的に流入元としては、SNSなどの各種ツール、検索エンジン、広告、オウンドメディア(パンフレットなども含む)などです。

「SNS」はX、Facebook、Instagram(Thereds)、Youtube、LINEなどがよく活用されています。また検索エンジンからは、検索順位の上位を狙う「SEO対策」、Adsenseなどの検索エンジンやポータルサイトに出稿する「有料広告」、Googleの地図検索でサイトの表示を狙う「MEO」、Googleでビジネス情報を掲載するGoogleビジネスプロフィールなどです。
地域性を絞らず広く展開することもできますし、地域性のあるビジネスでは地図検索やビジネスプロフィールでローカル性を高めていく方法も効果があります。この様にWebサイト単体ではなく、検索エンジンや広告、そしてSNSを利用して、集客をされているケースが非常に多いです。

自社ツールという「オウンドメディアの強み」を持つことで、必要な情報をコントロールした発信ができ、営業・広報活動の中でブランディングが可能になりますが、一方集客性が弱いところを別のツールでSNSで補うことが必要となります。

自社のWebサイトを中心に各種SNSの利点を活かすことを考える

自社サイトはもちろん、各種SNSツールにもそれぞれに特化した良さがありますので、話をとりまとめますと「自社Webサイトを中心に、SNSや検索エンジンなどの利点を活かした、幅広い集客・広報活動を展開する」ことが大切だといえます。

例えば「X」は情報の拡散性に優れています。広く拡散することはメリットですが、匿名性が高く同じ人が複数のアカウントを持っていることも多く、掲載されている情報の信頼性も低い場合があります。広まりやすい反面、炎上しやすいリスクもありますし、最近では投稿が収益化されたことで、インプレッションを稼ぐだけの目的で運用されているケースも多くみられます。

「Instagram」は写真の投稿が必須なため、リアルな生活の一部が垣間見えることで、情報の信頼度は「X」よりは高い傾向です。ただしInstagram自体の情報拡散能力が低いため、フォロー外の幅広い層にアプローチすることは苦手だといえます。また趣味性が高いアカウントが多いので、アカウントの趣味嗜好が強く反映するSNSです。

「Youtube」は趣味・ビジネス・教育・エンタメと幅広いジャンルで人気があり、Youtubeに掲載が無いジャンルを探す方が難しいほどです。動画という情報量が多いコンテンツのため、運用する側からみると「サービス・商品のアピール、ブランディングに使いやすいSNS」ですが、映像をつくる制作コストが高いため運営には体力が必要になります。
数年前まではYoutuberという存在が目立ちましたが、数年前のコロナ期を境に「ビジネスでの運用」をされるケースが増えており、現在は広報活動の有力なツールとして注目されています。

最後に

今回は自社WebサイトとSNSなどの外部ツールの役割のお話を考えてみました。
「こんなに色々やらなくてはいいけないのか…大変だ」と思う方もいるかもしれませんが、ビジネスで競合より1歩リードするためには必要なことだと思いますので、ぜひそれぞれのツールの利点を活かしながら、計画的に運営されることをお勧めいたします。

お客様からは「自社サイトを運用するコツは?」「複数あるSNSをどう活用したら良いのだろう?」というお悩みもよく伺いますので、今後また「自社サイトを運用するコツ」も考えてみようと思います。長文お付き合いいただきまして、ありがとうございました。


この度XSERVERで利用可能なPHPのバージョンに、PHP8.3.7が導入された様です。
PHP8.3ではそれ以前のバージョンよりも安定性が向上し、従来のPHPと比較してパフォーマンスが大幅に強化されているとのことです。

当サイトでも利用しているa-blog cmsでは、すでにPHP8.3には対応済み(ver3.1.14以降)です。
PHP8.3.7を利用した最新スペックでのご利用をご希望の方は、ぜひa-blog cmsのバージョンアップも含めてサーバ環境の整備をご検討ください。

実施日時

2024年6月19日(水)

変更内容

エックスサーバーの全プラン

最後に

XSERVERは弊社で取り扱いの多いサーバですが、機能追加や機能性の向上など、積極的にサービスの改善がおこなわれている印象があります。今回の様に最新版のPHPが追加されるなど、さらなるサービスの強化は大変助かります。

XSERVERは通信速度も高速で安定しておりますし、非常にコストパフォーマンスの高いサービスになりますので、大変おすすめのホスティングサービスとなります。費用対効果の高い安全で高速なサーバをお探しの方は、ぜひ弊社までお問い合わせください。


先に前回のブログ「a-blog cmsにhtmx(jsライブラリ)を実装してみました【ver3.1.17対応版】」の続きになりますが、絞り込み中のタグをより分かりやすくするために、選択中のボタンに変化を加える処理を考えてみました。

自分でjsを作れば色々対応は出来ますが、a-blog cmsにはシステムに用意された「組み込みJS」という機能があります。こちらの機能はWebサイトを制作する上でよく使う機能があらかじめ用意されており、目的に合うものがあれば便利に使う事ができます。

a-blog cms Developers 組み込みJS

今回はそんな「組み込みJS」の中から、現在位置の状態を取得可能な「linkMatchLocation」を使ってみることにしました。

linkMatchLocationとは

表示中のページのURLとclassを付与した<a>の「href」を比較して、条件が合う場合に指定した別のclassを<a>に付与する事が出来る機能です。下記はテンプレートの記述例とその実行後の状態になります。条件に合うとclassに「指定した値(今回はstay)」が付与されます。

a-blog cms Developers 現在位置を装飾する

<!-- 例:ブラウザのアドレスが「https://www.ideasource.jp/blog/」の場合で付与するclassが「stay」の場合 -->
<!-- テンプレートの記述 -->
<a href="https://www.ideasource.jp/blog/" class="js-link_match_location">ブログ</a>

<!-- 実行後 -->
<a href="https://www.ideasource.jp/blog/" class="js-link_match_location stay">ブログ</a>

linkMatchLocationの種類

「linkMatchLocation」には複数種類があります。
値を含んでいる場合、完全一致する場合、ブログ、カテゴリー、エントリーが含まれている場合など、判定したい用途に合わせて設定します。



linkMatchLocationMark 現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に指定したclassを付与します
linkMatchLocationFullMark 現在表示しているページのURLと、アンカーリンクのリンク先URLが完全一致した場合にclassを付与します
linkMatchLocationBlogMark 現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します
linkMatchLocationCategoryMark 現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します
linkMatchLocationEntryMark 現在表示しているエントリーのURLが、アンカーリンクのリンク先URL中に含まれている場合にclassを付与します

今回は「linkMatchLocationMark(.js-link_match_location)」を利用して実装


linkMatchLocationでタグの絞り込みをわかりやすく実装

「主要なキーワード(tag)」で絞り込んだ際に、ボタンの<a>にclassで「stay」を付与し、cssで色を変えています。
「linkMatchLocationMark」はURLを含む値で判定できますので、ページャーなどで次ページに移った際にも判定出来ますので、ボタンの「stay」の状態が切れることはありません。htmxでURLを変更した際にも「linkMatchLocation」は問題なく動作しますので、htmxのSPA的な動きと組み合わせると色々なところで応用が効きそうです。

・実装したページはこちら(弊社の制作事例ページ

最後に

今回はa-blog cmsの「組み込みJS」とhtmxを使い、簡単に現在位置の反映ができました。この様にa-blog cmsはhtmxとの連携にも強く、a-blog cmsに元々備わっている「組み込みJS」を使った場合にも、効率的に動作させる事が出来ます。a-blog cms ver3.1.17でhtmxの利用が従来より簡単になり、セキュリティ面も強化されましたので、さらに安心して利用する事が出来る様になりました。htmxはUXの改善にも使いやすいので非常に嬉しいです。

ということで、今回はa-blog cmsとhtmxで「組み込みJS」を使ってみました。
またa-blog cmsとhtmxにつきましては、随時レポートしていこうと思います。

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由