Porte Bonheur

珈琲や美味しいもの、建築やデザインなど好きなものだけ。映画ブログではないつもり

CSS,HTML基本記述

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="vewport" contenr="width=device-width,initial-scale=1.0"> レスポンシブ
metaの追加記述は下記の物を上から順に記述
OGP記述はここに
<link rel="alternate" media="only screen and〜>はここ
<link rel="stylesheet" href="style.css"> 自分のcss
<script src=""">
 
browsehappy記述は<body>直下
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
条件付きコメントで、IE7未満には「お使いのブラウザは古いです!
新しいのにするかChrome frameをインストールしてください」というメッセージを表示する
 
@charset "UTF-8";* {margin: 0;padding: 0;box-sizing: border-box;
}
 
 
meta
 
<meta http-equiv="robots" content="all" />
検索エンジンに、インデックスに掲載されないようにする。
低品質なページや、ユーザーにとって価値のないページに対して指定しておくのがおすすめ。
普通にインデックスもクロールもして欲しい場合には、このメタタグは全く何も書かなければOKです。
 
<meta name="keywords" content="keywordsを,で区切って指定">
そのページの内容を表すキーワードを半角カンマ(,)区切りで書きます。
ただし、Googleは検索順位を決めるうえでメタキーワードを一切見ていません。
Googleがサポートしているメタタグ(公式ページ)
 
<meta name="discription" content="内容">
メタディスクリプションとして書かれたものは、検索結果に表示されることがある。
(必ずしも表示されるとは限らない)
ページの内容を表す魅力的な文章をメタディスクリプションに書いておけば、クリックされやすくなる
 
<meta name="google-site-verification" content="xxx" />
Google系サービス(サーチコンソールなど)のサイトの所有権確認コード
 
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.yashima.ac.jp/univ/sp/" />
モバイルページ(スマホタブレットで見た時のページ)のURLが、PCページのURLと別の場合に指定するものです。ここでもrel="alternate"を使って「スマホ版のページはここだよ!」と検索エンジンなどに伝えているわけです。なお、このタグを使うときには合わせて後述のlink rel="canonical"も指定しておくようにしましょう。
レスポンシブが聞かない時に使うっぽい?
 
<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードページのURL" />>
このタグを記述しておくとRSSリーダーがそのサイトのRSSフィードを見つけることができます。
rel = "alternate"はフィード以外のlinkタグでもよく使われるもので
「そのページの代替ページ」であることを意味します。
つまり上の場合「ページのRSSフィード版はここだよ!」と伝えているのです。
こちらもWordPressでは自動出力されます。
 
<script type="text/javascript" src=""></script>
スクリプトの言語を type="text/javascript" のような MIMEタイプで指定します。
HTML4.01では必須の属性として定義されていましたが、HTML5 では省略時は type="text/javascript" とみなされるようになり
※HTML5では不要
 meta robots使い方例
低品質なページ noindex,nofollow 検索結果ページ noindex,nofollow タグ/日付別ページ noindex,follow トップページやカテゴリーページの2ページ目以降 noindex,follow <meta property="og:url" content="ページのURL" />

参照:メタタグとは?SEO効果は?metaタグ一覧と書き方まとめ

 

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ"><meta property="og:description" content="記事の抜粋" /><meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" /><meta name="twitter:site" content="@Twitterユーザー名" /><meta property="og:site_name" content="サイト名" /><meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">
facebooktwitterでシェアされたときに、アイキャッチ画像などやタイトルを魅力的に表示してくれる設定。
ソーシャル流入を重視するのであれば必須
OGPを設定するメリットや、WordPressでの設定方法
 

プロフィール


音楽(Jazz,Funk,Soul,R&B)、珈琲、ネコ、建築など
私の好きが詰まったブログ。
それを眺めてホッコリしてくれる人がたら良いなぁ。

コメントを頂けると嬉しいです。

詳しいプロフィールはコチラ


当ブログはアフィリエイトリンクを含みます。