The Definitive Guide to JavaScript SEO (2021 Edition)
The web is in a golden age of front-end development, and JavaScript and technical SEO are experiencing a renaissance. As a technical SEO specialist and web dev enthusiast at an award-winning digital marketing agency, I’d like to share my perspective on modern JavaScript SEO based on industry best practices and my own agency experience. In this article, you'll learn how to optimize your JS-powered
レンダーバジェットとは何か、あるいはなぜ私は心配するのをやめてサーバーサイドレンダリングを愛するようになったか - ブログ - 株式会社JADE
こんにちは、株式会社JADEの長山一石です！ 5年ほど前、Google の公式ブログ上で ウェブページをより深く理解するようになりました と言う記事を書きました (英語原本はこちら)。この記事は、検索エンジンが JavaScript を実行し、ウェブページをレンダーすることができるようになったことを告知するもので、当時としては非常に画期的なものだったと言えます。これによりインデックスされていなかった数多くのページが Google に認識されるようになり、ウェブ全体の検索可能性が上がることになりました。最初はインデックスの一部分からはじめて、徐々に範囲を拡大していき、最終的には長らく現役だった AJAX クローリングスキームも無事撤廃することができました。それについても、AJAX クロールに関するスキームを廃止します と言うブログ記事で書きました (英語原本はこちら)。 レンダリングをするボ
hiraku.js - オフキャンバスメニュー用 jQuery プラグイン をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。 オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。 オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。 appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
Google SEOに適したJavaScript/プログレッシブウェブアプリの推奨構成【2016年3月現在 最新版】
[レベル: 上級] JavaScriptとProgressive Web Apps（プログレッシブ ウェブ アプリ）のGoogle検索における2016年3月現在の扱われ方と推奨を、GoogleのJohn Mueller（ジョン・ミューラー）氏がGoogle+で共有しました。 JavaScriptをベースにしたサイトをGoogleフレンドリーに構成する際の参考になるので日本語に訳します。 なお、技術的な用語に関しては特に補足しません。 必要な人ならわかるはずです。 カタカナでも使われることがありそうな用語はカタカナ書きを付けています。 投稿の後に参照先をミューラー氏は提示していますが、説明文で直接リンクするようにこの記事では編集しています。 Google検索におけるJavaScript/Progressive Web Appsの推奨構成 Googlebotをクローキングしてはいけない。すべて
Canvasで漫画にあるような吹き出しを書いてみた - Qiita
はじめに Canvasを使用して、漫画で使われるような 吹き出し表現を再現してみました。形自体にも汎用性があると思うので、吹き出し以外にも使えそうです。これで漫画表現シリーズは三作目となりました。（今までに書いたものは最下部を参照ください）今回書いた吹き出しは以下の3種類になります。 吹き出しのシッポ（何ていうのか分からない。。発言者を示す細い三角のやつです）は想定していません。 [動作イメージ] パーッとした吹き出し パンクな吹き出し モコモコな吹き出し なお実際の動作は以下で確認できます http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/light/ http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/punk/ http://nekonek
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize 回転イベントorientationchange 画面が回転したときに何かさせたいときはorientationchangeで設定できます。 ※Androidは2.2から対応しました。2.1の端末では動きません。 $(window).on(“orientationchange”,function(){ alert("画面が回転しました"); // ここに実行したい処理を書く }); 回転したときだけ実行する場合は、これでいけますが ページ読み込み直後にも処理を実行したい場合だったら、 resizeもセットで設定します。 $(window).on(“orientationchange resize”,function(){ alert("この端末の横幅は"+wind
We Tested How Googlebot Crawls Javascript And Here's What We Learned
Search Engine Land » Platforms » Google » We Tested How Googlebot Crawls Javascript And Here’s What We Learned We Tested How Googlebot Crawls Javascript And Here’s What We Learned Think Google can't handle JavaScript? Think again. Contributor Adam Audette shares the results of a series of tests conducted by his colleagues at Merkle | RKG to examine how different JavaScript functions would be crawl
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
JPEG画像の約半分のファイルサイズで同品質のものを表示できる画像形式「BPG」が誕生、実際に使ってみるとこんな感じ
同品質のJPEG画像と比較するとファイルサイズを約半分以下に縮小できる新しい画像形式が「BPG」で、FFmpegやJavaScriptだけで動くLinux「JSLinux」などを開発したFabrice Bellard氏が開発した画像形式です。ただサイズが軽いというだけではなく、グレイスケール・YCbCr＝4:2:0・4:2:2・4:4:4・RGB・YCgCo・CMYKなどの色空間をサポートし、アルファチャンネルや可逆圧縮にも対応しています。 BPG Image format http://bellard.org/bpg/ BPGが他の画像形式と比べてどれくらい優れているのかを比較できるのが以下のページ。2種類の画像形式で同程度のファイルサイズの画像を表示させており、「mozjpeg」とBPGとで同じ画像を比較すると、BPG画像の鮮明さが際立ちます。 BPG Image Comparison
<input type=
どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:file').css({ //元々のファイルフォームを隠す。 'opacity':0, 'display':'none' }); $('a').on('click', function(e) { //装飾用のリンクをクリックしたタイミング $('input:file').click(); //ファイルフォームをクリック e.preventDefault(); }); 実はこのままだと
プログラミングやったこと無い奴はJavaScriptから始めろ : IT速報
1: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:04.45 ID:ZsWrBm0M0 まずはNode.jsをインストールしろ話はそれからだ Download：http://nodejs.org/ 2: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:42:26.57 ID:hzAFYxvI0 一方俺はコボルから始めた 3: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:57:50.90 ID:ZsWrBm0M0 インストールしたかてめぇら 4: 以下、名無しにかわりましてVIPがお送りします 投稿日：2014/03/09(日) 16:59:13.96 ID:2B5lF2zi0 javaでいい？ 5: 以下、名無しにかわりましてVIPがお送りします 投稿
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
画像のLazyLoaderにアニメーション機能を加えた「BttrLazyLoading」:phpspot開発日誌
Demo Animations | BttrLazyLoading 画像のLazyLoaderにアニメーション機能を加えた「BttrLazyLoading」 読み込んだ際にフェードインというのがよくあるパターンですが、こちらのライブラリを使えば回転させたりサイドからアニメーションさせたりと様々なアニメーション機能を実装できるようです スクロールしていくと画像がアニメーション付きで表示されるのはインパクトがありますね。更にLazyLoaderがあるのでサーバにもやさしい。 画像数がおおくなるとブラウザに負担がかかりそうなので注意は必要ですが、なかなかおもしろい効果も作れるようです 関連エントリ SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」 LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 SVG関連の操作・アニメーショ
AjaxアプリケーションのSEOについて調べてみた | keisuke tsukayoshi
Backbone.jsやEmber.js、AngularJSなどの流行りのMVCフレームワークを用いたAjaxアプリケーションのSEOについて少ししらべてみました。SEOというかクローラー対策っぽいですが。ブログ的には始めての開発系の記事。 AjaxアプリケーションのSEO的な問題 そもそもどうしてAjaxアプリケーションがSEO的にやばいかというと、一旦空のHTMLを読み込んだあとJavaScriptを使ってクライアントサイドでコンテンツをレンダリングする仕組み上、Googleのクローラーのような特殊な環境だと内容を正常に読めないというのが現状らしい。というわけでこれを如何にして読み込ませるかが本件のゴールになります。 STEP1:Ajaxアプリであることをクローラーに伝える #!(ハッシュフラグメント)をURLにつける URLに#!(ハッシュフラグメント)が含まれているとクローラーはそ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
TechCrunch | Startup and Technology News
omotan.com
http://www.hp-stylelink.com/news/2013/10/20131008.php
