SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ こんにちは、じつかわです。ナイルという会社でSEOコンサルタントをやっています。 さて、いきなりですが、皆さんがSEOを勉強し始めたとき、一番最初に覚えたことはどんなことでしょうか。おそらく「titleに対策キーワードを入れる」ことではなかったでしょうか。 「title」「meta description（メタディスクリプション）」「h1」というあたりのHTMLタグは、SEOでは非常に重要な役割を果たします。 とくに「titleに対策キーワードが入っていなければ、SEOはほとんどできない」といっても過言ではないほど、検索エンジンの評価において主要HTMLタグにキーワードが含まれていることは重要です。 SEOに取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ
[Javascript] 非同期設定でレスポンス速度を改善させる | mkoba のお部屋 ： DREAMHIVE Staff Blog
この記事は2年以上前の投稿になります。 記載された情報が古くなっている可能性がございますので十分ご注意ください。 ウェブサイトのレスポンス速度を改善させる手法の1つとして、読み込む JavaScript ファイルの非同期化というものがあります。 通常、外部の JavaScript ファイルを呼び出す場合、特に何も指定しなければ同期設定で読み込まれます。 これを非同期にすることで待ち時間を減らしてレスポンス速度を改善させることができます。 先日ご紹介した「GTmetrix」や「PageSpeed Insights」でも非同期を推奨していますね。 設定の仕方も簡単です。 <script async src="//xxxxxxxxxxxxxxx.js"></script> や、こんな感じで設定します。 (function(){ var elm = document.createElement('
![[Javascript] 非同期設定でレスポンス速度を改善させる | mkoba のお部屋 ： DREAMHIVE Staff Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf9f20a6b7d49de5a75020648483027fb553aa5b/height=288;version=1;width=512/https%3A%2F%2Fblog.dreamhive.co.jp%2Fmkoba%2Fwp-content%2Fuploads%2Femblem-mkoba_200x200.png)
Sublime textでコードをなるべく楽に綺麗に書くための機能紹介 3つ - megane9988のブログ
1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。 ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。 Parent child vertical list menu コードはこんな感じです。 HTML リストは階層ごとに入れ子を使用します。 コードは、CodeのjQueryまで。 <nav class="nav"> <ul class=list> <li> <a href="#">Home</a> <ul> <li> <a href="#">Lab</a> <ul> <li> <a href="#">Code</a> <ul> <li> <a href="#">Html</a> </li> <li> <a href="#">Css</a> </li> <li> <a href="#">Jquery<
twitter bootstrap and angularjs directives | Errietta's blog ☕
The past few days, I’ve been experimenting with angularjs. It’s an awesome javascript MVC framework and I recommend checking it out if you haven’t! One of its features are directives which, among other things, allow you to replace html elements with a specific tag name or attribute name with a template and adjust their behaviour. This is nice if you have complex HTML structures in a website which
CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Capturing: レスポンシブデザインにおけるパフォーマンスを向上させる - ワザノバ | wazanova.jp
https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web/ 先日紹介した、WebRTC: サーバのない世界でwebをつくり直す [Realtime Conf. 2013Real] の中でFeross Aboukhadijehが”Super Crazy Hack”と絶賛していたのがCapturing。Capturingは、Mobify.jsの主要機能で、リソースの読み込み前にDOMをコントロールできるクライアントAPIです。 基本的な仕組みとしては、 <plaintext>タグをファイルの頭において、ブラウザがリソースをダウンロードしないようにする。<plaintext>タグをクローズしないので、その後に続くHTMLはplain textとして解析される。 リソースのダウンロード
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
<html>,<body>は要らない？Googleが推奨するHTMLファイルの記法 - Qiita
つまりhtml, head, bodyなどの使い慣れたお決まりのタグは今更書くまでもないということ。 参考: どのようなタグが省略可能か http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission P.S. STORYS.JP、 coincheck などのサービスを運営、開発しています。興味のある方はぜひ 和田まで連絡を！ Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can
ローカルのWebサイトを確認する方法
ローカルのWebサイトを確認する方法 ローカルのWebサイトを作成している際に確認するTIPSをいくつかご紹介します。 解説はMacのみですが、Windowsでも足りないソフトをインストールすればできると思います。 まずは、 たとえば以下のようなディレクトリで作業していてindex.htmlを確認したいとします。 /Users/nishihata/Desktop/htdocs/index.html 普通にやるとブラウザのアドレスバーに以下のURLを入力するとブラウザでindex.htmlが確認できます。 file:///Users/nishihata/Desktop/htdocs/index.html ただ、このままでは絶対パスでサイトを作成していたりすると確認できません。 ローカルサーバーを起動 そこで、Macでターミナル (Terminal)で以下のコマンドを入力してみましょう。 cd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Inline SVG - トラブルとその対策