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に取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ
IE8以下でレスポンシブWebデザインを実現するRespond.js
レスポンシブWebデザインはディスプレイサイズ（特に横幅）に合わせてデザインを最適化する事で、1URLで全てのデバイスに対応できることが強み。 導入することで最も威力を発揮するデバイスはスマートフォンですが、マーケティング的にIEでもレスポンシブWebデザインが機能（閲覧可能）した方が良いケースもあるでしょう。 そういった状況下でお勧めするのがRespond.js。 Respond.js（github） Respond.jsとは IE6～8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするpolyfill（※）。 ネイティブで非対応の機能をpolyfillで実現すると、大半が処理が重くなったり動作が不安定など実用的ではないですが、Respond.jsは高速かつ安定しています。 ※非対応のブラウザに相応のインターフェースを実装 Respond.j
スマートフォンを考慮したフォント指定の検討 | Web Tips
公開日：2014年8月22日 最終更新日：2019年3月25日 Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。 欧文フォントだけを考えればいいのなら、Webフォントで対応することが現在は主流です。 しかし文字種類の多い日本語フォントが必要なサイトでは、どうしても端末にインストールされているデバイスフォントを使用せざるを得ません。 どういうデバイスフォントがインストールされているかは、端末により異なります。 MacとWindowsで共通しているフォントもありますが、デフォルトで使用するフォントは違いますので、Webページの表示を整えたいのならきちんと指定することが必要です。 スマートフォンまで考えたら
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
TechCrunch | Startup and Technology News
Yellow, an asset financier for solar energy and digital devices in Africa has raised $14 million series B funding in a round led by Convergence Partners with participation from the Energy Entrepreneur Fisker, the electric carmaker founded by the Danish auto designer Henrik Fisker, is gearing up to enter the Chinese market where competition is increasingly cut-throat, following in the footsteps of
Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始
[レベル：中〜上級] ※長い記事になりますが、ものすごく重要な仕組みなので確実に理解してほしい内容です。 ひと続きのコンテンツを複数のページに分割する“Pagination”（ページネーション）によって起こる可能性がある、重複コンテンツ問題に対処するために、rel=“next”要素とrel=“prev”要素のサポートをGoogleが開始しました。 「ページネーション」は、いわゆる「ページ送り」のことです。 一連の長い記事を複数のページに分けたり、多数のカテゴリがある時にいくつかのまとまりに分けたりするときによく使われます。 ページネーションを利用していた場合、rel=”canonical”タグを使って2ページ目より後のページを1ページ目に正規化することをGoogleは推奨していません。 上は僕がセミナーで使ったスライドの一部分です。 詳しいことはブログでも説明しています。 ページネーション
rel=“prev”とrel=“next”のページネーションにおける正しい使い方
[対象: 上級] 今日の記事は、rel=”prev”とrel=”next”によるページネーションを扱ったかなり難易度が高いトピックになります。 rel=”prev/next”とビューオールページを用いたGoogleが推奨するページネーション処理を確実に理解している状態でないと意味不明でしょう。 Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始 Googleが推奨するビューオールページとページ分割のベストプラクティス 僕自身の理解度を深めるための記事とも言えます。 なので今日は興味がある方だけ読んでください。 ページネーションについての処理方法をGoogleのMaile Ohye(マイリー・オイェ)さんがビデオで解説しました。 使用しているスライドと補足説明がWebmaster Centralブログの記事でも公開されています。 マイ
rel=”next”とrel=”prev” の使い方
様々なサイトを見ていると、数あるタグの中で意外と間違って設定されているのが、このrel=”next”とrel=”prev”タグだ。 このタグを間違えて使ってしまうと、検索エンジンがサイトの構成を誤解してしまう可能性が少なからずある。そうなると、コンテンツが正しく評価されずに、本来あるべき検索順位よりも低い順位になってしまう可能性がある。 そこで、このページでは、そもそもrel=”next”とrel=”prev”とは何なのかと、どういう場合に使うと効果的なのかを解説する。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続けている。 各サイトの成功要因をインタビューしているので、 あなたのサイトに役立てて欲しい⇒25サイトの成功事例インタビューはこ
Google に対してコンテンツのページ指定を示す - Search Console ヘルプ
"+a+"","text/html").body.children[0]} function Qf(a,b){if(!a)return ac;var c=document.createElement("div").style,d=Tf(a);bb(d,function(d){var e=N.Fd&&d in Nf?d:d.replace(/^-(?:apple|css|epub|khtml|moz|mso?|o|rim|wap|webkit|xv)-(?=[a-z])/i,"");0!=e.lastIndexOf("--",0)&&0!=e.lastIndexOf("var",0)&&(d=Kf(a,d),d=kf(e,d,b),null!=d&&Lf(c,e,d))});return $b(c.cssText||"")} function Uf(a){var b=Array.from(C
単なる流行りじゃない？！水戸黄門型レイアウトが定番化した理由を考えてみた
定番っていいですよね。わずかな退屈さはありつつも、安心できます。 スニーカーならオールスター、スマホならiPhone、ビールならスーパードライみたいな。 Webサイトにも2012年ごろから急増し、現在では定番化したレイアウトパターンがあります。 ちなみにこのパターン▼ その代表例、Evernoteのサイト▼ http://evernote.com/intl/jp/ このパターンで商材となっているものの多くが、物理的なプロダクツではなくクラウドなど新しめのウェブサービスで、皆さんも頻繁に遭遇するのではないでしょうか。 グリッドレイアウトの亜種ともいうべきこれに正式名称があるのかわからないのですが、とりあえず僕は心の中で水戸黄門型と呼んでいます。時代劇の定番だし。 ※あくまでイメージです 定番化して今もなお増え続けている理由をちょっと考えてみました。 多分この辺じゃないかなーと A. 整然とし
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
東京で働き続けながら、好きな京都に住む。ウェブ制作会社経営、八十住孝さんの場合
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
雑誌の編集者がWEBに転向するとぶち当たるらしい「3つの壁」 : 焼きそば生活
物心ついて初めての「将来の夢」はウルトラマンでしたが、巡り巡ってWEB編集者10年目に突入しました。どうも。夢破れたすべての大人を応援している@sakucchiです。 最近、雑誌社からWEBに転向する編集者と仕事をする機会も増えてきました。 サンプリング数が少ないのでなんとも言えませんが、彼ら彼女らが入社後にぶち当たる「壁」のようなものが見えてきたので、今日はそのことを書こうと思います。 それは「流通」「展開」「数字」の3つの壁です。 1.流通の壁 コンテンツビジネスは「生産」と「流通」の2つの力を、いかに最大化できるかがひとつのポイントです。 たとえ面白いものができても、それが誰にも届かなければ存在しないのと同じですし、流通網が整備されていても、届けられるものが面白くなければ、誰にも読まれません。 あくまでも一般論ですが、雑誌社は編集部と販促部に分かれてることが多く、既に書店やコンビニへ
ミュージシャンやバンドマンなら知っておくべきウェブサービス47選
みんなに聞いてもらう！音源リリース編 まずは自分のつくった音楽を世の中に発信しましょう。 今はたくさんの方法やプラットフォームがあります。 それぞれの特徴をふまえて、自分にあったビジネスモデルを作るにはまずココがキモになります。 1.大手配信サイトにリリースできる「TUNECORE JAPAN」 TUNECORE JAPANを利用すれば、ほとんど全てのデジタル音楽配信サイトに楽曲をリリースできます。 最近流行のストリーミングサービスをはじめ、もちろんi tunesでも。 利用料は1アルバム4750円/年です。 売り上げの還元率はアーティストに100％とかなり良心的。 音源をリリースするならまずは候補に入るサービスです。 2.自分のウェブショップが無料でもてる「BASE」 BASEは誰にでも簡単にウェブショップが開設できるサービスです。 利用はなんと無料。 月額料金などもかかりません。 売れ
2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望
Webデザインやグラフィックデザインのトレンドをしっかり知っておくことは、非常に大切です。廃れゆくものを採用するのではなく、今必要とされているものが何なのか、そしてなぜそれが必要とされているのか理解することで、よりよいものが制作できます。 Webとグラフィックデザインのトレンドとその背景、目的、展望などを紹介します。 16 Graphic Design Trends To Watch In 2016 各項目ごとのグラフィックも分かりやすく、注目です。 01. ユーザーが使いやすいこと 02. レスポンシブデザインの考え方 03. アプリを彷彿させるWebデザイン 04. ナビゲーションの進化 05. モジュール式のテキスト 06. モジュール式と無限スクロール 07. Material Design 08. フラットデザイン 09. 1,000の言葉よりもビジュアルで 10. インフォグラ
2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
HTTPS ページが優先的にインデックスに登録されるようになります
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://chrome.google.com/webstore/detail/screenshot-capturebetter/kfgmnlgjmofpiicpgohgfpeabgpmhjdp?hl=ja