![ローカルSEOを勝ち抜くためにチェックすべき13個の方法](../images/localseo_method_img1.png)
Googleのローカル検索に表示されるためには、マイビジネスをきちんと設定する事、口コミやコメントをもらってそれに対し返答する事、SNSを運営してできるアクションを起こす事、地域への活動をPRする事・地元の堅実なWEBサイトからのリンクをもらう事などが必要です。
![javascriptでナビゲーションメニューバーを作る方法(基本編)](../images/javascript_navimenu_img1.png)
javascriptでレスポンシブルデザイン対応のナビゲーションメニューを作る方法を紹介します。メニューが上下に展開される動作は、CSSのtranslateY();、easing、opacityプロパティが担当しています。javascriptは、ボタンを押した時にtranslateY();などの数値を変更したactiveクラスを付け外しするために使われています。
![カスタム投稿記事一覧にページネーション機能を付ける方法](../images/custom_post_type_pagenation_img1.png)
オリジナルの自作テーマでカスタム投稿記事一覧ページにページネーション機能を付ける方法をご紹介しています。最新記事を表示させたまま、次の10件・前の10件という形で下に見出しリンクを表示します。ページの下にarchive-○○〇.phpのソースコードを丸ごと紹介しています。
![ローカルSEOとは何か?ローカル検索最適化(MEO)が重要な理由](../images/meo_img1.png)
ローカルSEOは地域密着型ビジネスサービスを展開する場合に大切なSEOです。「行く」「買う」「解決する」などユーザーに即時直接行動を取らせるため、成約率が高くなります。ユーザーは常に情報の真偽を確かめますので、その店舗やサービスの情報が常に正しいかどうかが検証されています。
![サイト内検索はこれだけある!簡単便利な5つの方法をご紹介(リンク検索・全文検索・商品検索)](../images/site_search_img1.png)
サイト内検索はサイト全体を対象にした検索方法が豊富にあります。Googleカスタム検索(Chromeプラグイン)、siteコマンド検索、リンク切れチェックツール(Wordpressプラグイン)、独自検索エンジン登録などです。Googleのインデックス情報をもとにした検索は生データの検索ではないので注意しましょう。
![クライアントエピソード11 健康に気を付けましょう。](../images/episode11_img1.png)
例え料金の安い保守契約であってもサーバー維持管理を担当していなくても、WEBサイトは1日1回見るべきです。今回の様にWEBサイトが映らない事にしばらく気づかないのは業者として恥ずかしい事です。自分の健康管理には多いな責任があります。健康でいる事も業者としての品質の一つです。
![XMLhttpRequestオブジェクトの利用方法について](../images/xmlhttprequest_img1.png)
XMLhttpRequestオブジェクトは、ページを再読み込みせずにデータの送受信をおこなえる便利な機能です。対象データはtxt形式・XML形式・json形式と様々なデータをやり取りする事が可能です。取得したデータを抽出したり加工したりする事でパフォーマンスを維持しつつ自在にデータを操作する事ができます。
![htmlとCSSを使った棒グラフ・javascriptライブラリを使った棒グラフ](../images/html_javascript_graph_img1.png)
本記事ではhtmlとCSSのみで作る帯グラフ(棒グラフ)、javasciptライブラリを使った棒グラフの実装方法を紹介します。HTMLとCSSでの手作りも良いのですが、ライブラリが豊富にあるのでそちらを使った方が簡単に実装できます。最近のライブラリであれば、レスポンシブルデザインに対応している事もメリットです。
![PDFの表をhtmlテーブルタグに変換する方法(Word・Excel・WEBツール)](../images/pdf_table_html_img1.png)
PDF形式でもらった表データをhtmlのtableタグソースに変換する方法をご紹介します。一旦Wordに変換し、Excelのセルにコピペ、WEBツールでhtmlソースに変換する流れです。PDFはアウトラインのものでも変換される事が多く、大変便利です。
![CSS containment(封じ込め)による動的コンテンツのパフォーマンス向上](../images/css_containment_img1.png)
CSScontainmentは動的コンテンツの内容変更による再レンダリングの負担を軽くする機能です。開発者がCSSを使って封じ込めする要素をブラウザに指示する事で、再描画パフォーマンスを向上させる効果があります。封じ込めには通常以外に、描画させない封じ込め、サイズ的な封じ込め、スタイル的な封じ込めなどがあります。
![Google Fontsのパフォーマンスを最適化する6つの方法](../images/google_fonts_img1.png)
Google Fontsを利用する際も細かい工夫を重ねる事でWEBパフォーマンスをさらに向上させる事ができます。Google Fontsは常にユーザー環境・ブラウザに応じた最適な形式を提供する機能・キャッシュ機能が搭載されています。基本は全てのバリエーションではなく、部分的に限定して利用する事です。
![CDNを導入する事でDDoS攻撃からWEBサイトを守る](../images/cdn_ddos_img1.png)
CDNサービスを利用していればオリジンサーバーの代わりにキャッシュサーバーがDDoS攻撃を受けてくれます。正常なユーザーアクセスを妨げる事もなく、サーバー運営コストの削減や負荷軽減につながります。しかしキャッシュサーバーが攻撃を受けるため、CDN側の責任は重大になります。
![CDNのパフォーマンス機能を向上させる6つの方法](../images/cdn_performance_img1.png)
コンテンツ配信ネットワーク(CDN)にはパフォーマンスを向上させる機能があります。ファイルを圧縮したり、TLS1.3・HTTP/2(HTTP/3)、画像を最適化したりコード自体を縮小化するなどの方法です。これらの設定を使わないままの管理者が多く、パフォーマンスUPの機会を失っていると言えます。
![コンテンツ配信ネットワーク(CDN)とは?](../images/cdn_img1.png)
CDNとは本来のサーバーよりも距離が近いサーバーネットワーク上からキャッシュ情報を表示してパフォーマンスを向上させる仕組みです。トラフィックが急増した時なども本来のサーバーへの負担を軽減できますし優れたキャッシュ管理能力で通信品質を維持できます。CDNはパフォーマンスを維持しつつ、常に1拠点当たりのキャッシュ量を増やす事が評価につながります。
![プログレッシブJPEGでWEBパフォーマンスを向上させるアイデア](../images/progressive_jpg_img1.png)
プログレッシブJPEGは、ピクセル数が大きく荒い画像を一旦表示し、その後鮮明な画像を読み込む形式です。プログレッシブJPEGのバイト数のみを先にロードし、鮮明な画像の表示時に残りをロードするアイデアを紹介しています。WEBパフォーマンスを向上させる新しい画像遅延読み込みであり、SEOの観点からもブラウザ実装を期待します。
![CSSの中央寄せについてまとめてみた(左右・上下中央揃え)](../images/css_centering_img1.png)
CSSのセンタリングに関する記述方法をまとめています。水平方向のインライン要素・ブロック要素、垂直方向のインライン要素・ブロック要素、さらに水平垂直方向のインライン要素・ブロック要素という流れです。それぞれ単一要素・複数要素のバリエーションまで紹介しています。
![Wordpress カスタム投稿タイプの記事詳細・一覧ページを表示する方法](../images/custom_post_type_img1.png)
カスタム投稿タイプを設定する方法にはプラグインを使う方法とfunctions.phpに直接書く方法とがあります。どちらの方法を使う場合も、一覧を表示する機能をONにしないと一覧ページは表示されません。基本テンプレート名+「-スラッグ名」を付けた別名phpを作ると通常テンプレートとは別に管理できます。
![WEBサイトサーバーのIPアドレスを調べる方法(ロリポップ・さくらインターネット・エックスサーバー)](../images/server_moving_ipcheck_img1.png)
WEBサーバーのIPアドレスはhostsファイルの編集を行う際によく調べます。IPアドレスを調べるにはドメイン名ではなく、移転先のWEBサーバーアドレスを調べる必要があります。IPアドレスはWEBツールで調べる方法とコマンドで調べる方法とがあります。
![AVIF:新しい次世代の画像圧縮形式の使い方](../images/image_avif_img1.png)
AVIF画像は様々な可能性を秘めた高い圧縮率を誇る画像フォーマットです。もともとはロイヤリティフリーの映像コーデックの静止画版として開発されています。AVIFはHDRカラーをサポートしており、アルファチャンネルやアニメーションにも対応します。
![YMYLやE-A-Tを通してGoogleが知ってほしい事(Google品質評価ガイドライン)](../images/eat_ymyl_img1.png)
YMYLやE-A-TはGoogle品質評価ガイドラインに明記されているランキング要因です。GoogleはE-A-TやYMYLの要素を通して常に正確な情報を提供し、ユーザーを誤った方向に導かないように努めています。そのため独自の厳しい基準をクリアしたコンテンツのみが上位表示される仕組みになっています。
![Google DriveでWEBサイトを開設する方法(独自ドメインでホスティング)](../images/google_drive_hosting_img1.png)
無料で使えるオンラインストレージサービスであるGoogle DriveをWEBサーバーとして利用する事ができます。公開できるのはHTML・CSS・JSなどの静的ページのWEBサイトだけです。独自ドメインのDNSレコードを追加して紐づけが必要です。
![javascriptでリダイレクト設定を掛ける方法](../images/javascript_redirect_img1.png)
javascriptによるリダイレクトはブラウザで実行される機能です。サーバー側HTTPリダイレクトが使えない場合の対応です。301リダイレクトではないので、ページ価値を100%転送先へ継承できません。リダイレクトコード生成ツールを使えば、アクセス解析のリダイレクト元記録を外したりリファラーURLを継承したりできます。
![facebookページが埋め込みできない場合の3つの対処法(フェイスブックプラグイン導入)](../images/facebook_embed_img1.jpg)
WEBページにfacebookページのプラグインコードを埋め込んでも表示れない場合は、URLのミス・「公開範囲、国別制限、年齢制限」が掛かっている・個人アカウントのページではないかの以上3点に注意しましょう。プレビューでも映らない場合は3つのどれかが影響しています。
![再確認:画像imgタグにサイズ指定をする事はSEO上重要です](../images/img_width_height_img1.jpg)
HTMLでimgタグに直接widthとheightの数値を入れる事はSEO上重要です。各ブラウザが直接記述とCSS設定を併用する新しい機能を導入した事で、ページ読込速度の向上とコンテンツ移動防止が可能になったため、GoogleがSEOのランキング要因に採用した事が理由です。
![FlexboxとCSSアニメーションを使ったSF風カードデザインの作り方](../images/css_flexbox_card_img1.jpg)
今回はSF映画で出てくる様な光沢のあるアニメーションパネルの紹介カードをHTMLおよびCSSで設計します。本記事を通してFlexboxの基本やネストされたFlexbox、CSSアニメーション、境界線、シャドウ、その他使用されるCSSプロパティについておさらいしましょう。
![パソコンデータ復旧業者を選ぶ5つのポイント(ハードディスクデータの取り出し)](../images/data_retrieval_img1.jpg)
データを取り出す場合は取り出し専門の業者(少ない)を探しましょう。悪徳業者に注意してください。他業者と比較させないように仕向けてきますが、毅然とした態度で決めましょう。普段からデータを置いている位置は把握しておくと便利です。データは100%復旧できるものではないので、それでも買い取るかどうか決める必要があります。
![新画像形式「WebP」とは(JPEGやPNGを変換して画質を維持しつつ軽量化)](../images/image_webp_img1.jpg)
WebPは、Googleが開発した画質を維持しつつファイル圧縮率を高める事ができる新世代の画像フォーマット。JPEGの非可逆圧縮とPNGの可逆圧縮を併用できるので「精密な画像データでかつ背景透過の状態」でも効率的に圧縮できます。WebPに変換すればWEBサイトの表示速度は格段に速くなるのでSEOに非常に有利です。
![CORS(Cross-Origin Resource Sharing)同一生成元ポリシーによる外部リソースを共有する方法](../images/cors_img1.jpg)
CORS(Cross-Origin Resource Sharing)とは、本来同一生成元ポリシー(セキュリティポリシー)によるリソース利用制限を一部解除する手段です。ブラウザとサーバーとが通信をするHTTPヘッダーに追加する事で、同一生成元の範囲に入れるか入れないかを設定できます。HTTPヘッダーが変更された場合にはプリフライトリクエストが可能ですし、その情報を一定期間保存する事もできます。
![クロスドメインについて(クロスドメイン制約・トラッキング設定)](../images/cross_domain_img1.jpg)
クロスドメインとはWEBサイトが2つ以上のドメインをまたいで運営されている状態です。商品ページとショッピングカート部分でサイト間を行き来する場合や、ページ内でコンテンツや画像など外部のリソースを直接利用する場合もそうです。javascript等プログラムコンポーネントで外部サイトのソースを活用する事は制限されていますが、双方の同意があればCORSなどで解除する方法があります。
![被リンクを獲得する7つの方法(2020年外部リンクSEO最新バージョン)](../images/backlink_img1.jpg)
SEOの重要な要素ではあるものの、なかなか獲得が難しいのが「被リンク」です。本記事では7つの被リンクを獲得する方法を詳しくご紹介します。どれを取っても簡単なものはありませんが、上質な被リンクが獲得できる可能性がありますのでぜひ実践してみて下さい。