IT系女子ログスマートフォン用の表示で見るIT系女子ログWebデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。Webheadとは、HTMLページの情報を書いておくところです。記述しておくことで、ユーザーがページを訪問する前に「どんな内容が書かれているページなのか」が分かりやすくなります。なんとなく使いまわしてきたhead内の記述を、最近のアップデートに合わせて重要なタグだけに整理してみました。href="/css/style.css"></head>head内の記述だけでもたくさん種類があります。記述方法を調べて、最低限必要なタグを厳選しました。公式ドキュメントを探しましたが、たどり着けないものは、GoogleやMozilla、Appleなど信用のあるサイトを主に参考にしています。prefix="og:http://ogp.me/ns#">headタグにOGPの設定してますよ宣言のprefix属性を書きます。htmlタグに書いたりいろいろ方法があるようですが、Facebookの推奨の記述に準じておきます。charset="utf-8">文字コードはUTF-8一択になりましたね。大文字小文字はHTML5では区別されないので、どちらでもOKです。content="IE=edge">IEで最新バージョンの標準モードで表示させる指定です。CSSやJSの読み込み前で、なるべく早い段階での記述が推奨されています。IE対策:互換表示させない。content="width=device-width">viewportはモバイル対応で必須の記述です。viewportがないとうまく表示されない恐れがあり、モバイル対応していないとクローラーに認識されるとスマホからの検索結果で順位を下げられてしまいます。portfolio</title>HTMLページには基本必須です。検索ワードで使用されたり検索結果で表示される、とても重要な箇所です。なんでもいいから設定するだけではなく、言葉の言いまわしや漢字・カナの表記など細かく気を配りましょう。全ページ共通のタイトルにするのは極力避けましょう。違うページなら、違う内容、すなわち違うタイトルになるはずで、同じタイトルだと同じページ(重複コンテンツ)だとクローラーに認識されてしまうことがあります。クローラーに同じページが複数あると認識されてしまったら、メインと判断されたページ以外は検索結果から除外されてしまうことがあります。content="とある福岡のWebデザイナーのポートフォリオ">titleタグと同じくらい重要です。titleタグと同じように、すべてのページでオリジナルのdiscriptionを設定するのがSEOにとても効果があります。面倒ですが、一度適切に設定すれば、あとはサイトの宣伝をまかせられる心強い存在になります。rel="canonical">設定しておくとURLごとの評価の分散を防げます。httpなのか、httpsなのか。最後に/つけるかつけないか。URLの分散はこちらが意図せずとも起こってしまうので、設定しておくのが安心です。content="http://tosssaurus.com/snscard.png">リンクは必ず絶対パスで!ここで、前述の「正しいURLの設定」として指定したリンクと差異がないかも注意してくださいね。websiteはトップページの設定です。下層ページはすべてarticleにしておきます。content="@tosssaurus">Twitter用の設定があります。忘れず設定しておくとシェアされた時の見た目が適切になるので、宣伝の効果を高めることができます。href="/img-common/apple-touch-icon.png">「ホームボタンに追加」する時や「ブックマーク追加」する時などに表示されるアイコンの設定ができます。気に入ったサイトでも、ここがのっぺらぼうだと残念です。設定してあると、再訪問が数ヶ月後でも、画像とセットなので思い出しやすく、他サイトと区別がつきやすいですよね。href="/favicon.ico">最近はrel属性はiconでよいとのこと。私はapple-touch-iconもfaviconも、使いまわしやすくルートパスにしています。解析タグは?あとは各々の解析タグなどをご自由に。headの閉じタグの直前だったりbodyの直下だったり、サービスごとで設置場所が違うので、必ず確認しましょう。Javascriptは?Javascriptは、読み込みに影響を与えないようbodyの閉じタグの直前が推奨されています。コンテンツの読み込み前にJSを読む必要があるときは、cssの記述の後に書きます。不要なものキーワードの設定keywordタグはGoogleは見ていないと明言されていたことが話題になりましたね。「工数のムダ」とはっきりおっしゃっていたので本当に今は不要なんでしょう。Bingも見ていないようです。検索結果に反映するよう指定することも不要です。通常、特に指定しなくてもインデックスされるからです。consoleでするのが直接的です。インデックスの指定をrobotsでするのはかなり遠回りです。閉じスラッシュ「/」いるの?いらないの?HTML5では、閉じスラッシュは不要です。ついてるサイト結構見かけない?XHTMLでの記述では、閉じスラッシュが必須でした。HTML5の宣言であるDOCTYPEは、HTML4.01やXHTMLの記述もサポートしていますし、閉じスラッシュが不要なだけで、禁止ではないのでついていても問題はないです。Wordpressの記事投稿などデフォルトでは閉じタグありの記述になるみたいですね。ひとりごと冒頭で「HTML5です!」って宣言してるのに、XHTMLのルールの閉じスラッシュつけたりつけなかったり、統一されてなくて落ち着かない...。「取り急ぎXHTML文書をHTML5に移行した」みたいな理由があるなら分かるけど、新規ファイルやのにわざわざ閉じスラッシュいれるの、変な感じ。2017年11月12日まとめどんなに素敵なデザインを仕上げても、適切なマークアップ、適切なSEOができていなければ、たくさんの方に見つけていただく機会を失ってしまうかもしれません。Webサイトの舞台はWebです。Webの世界は変化のスピードが速いですが、お作法をきっちり守れば機会を増やせる、誠実な世界になってきているので良い時代だなぁと思います。一方で、今は推奨されている方法でも、数年後には古い技術になってしまうことがしばしば起きます。1度調べたことに満足せず、なるべくアンテナを張って変化に柔軟に対応していけるように心がけたいです。»SearchProfileWebデザイナー4年目。ヒトクセあるけど軽やかでふところの深いデザイナー、目指してます。読者になるRankingRecommend2018-12-17ジェネレーティブアートに挑戦するならp5.jsがはじめやすい2018-12-11【2018年版】社内じんわりアクセシビリティ普及活動記録2017-12-24canvas勉強メモ2017-10-02コーディングが苦手なWebデザイナーにおすすめしている独学方法はてなブログをはじめよう!tosssaurusさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。