EMMETに組み込むソースも記述します。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="canonical" href=""> 5 <meta charset="UTF-8"> 6 <meta name="author" content=""> 7 <meta name="copyright" content="copyright©" /> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <meta name="format-detection" content="telephone=no, email=no, address=no"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <meta http-equiv="Imagetoolbar" content="no"> 13 <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 14 <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 15 <link rel="apple-touch-icon" sizes="192x192" href="/apple-touch-icon.png"> 16 <link rel="manifest" href="manifest.json"> 17 <meta name="theme-color" content="#ffffff"> 18 <meta name="msapplication-TileColor" content="#ffcc22"> 19 <meta name="msapplication-TileImage" content="mstile-144x144.png"> 20 <meta name="msapplication-config" content="browserconfig.xml" /> 21 <link rel="stylesheet" href="css/style.css"> 22 <title>site-title</title> 23 <meta name="apple-mobile-web-app-title" content="site-title"> 24 <meta name="application-name" content="site-title"> 25</head> 26<body> 27 <header><div id="header"> 28 29 </div></header> 30 <nav><div id="nav"> 31 32 </div></nav> 33 <main><div id="main"> 34 35 </div></main> 36 <footer><div id="footer"> 37 38 </div></footer> 39<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 40<!--[if lte IE 8]> 41 <script src="js/html5shiv.min.js"></script> 42 <script src="js/selectivizr-min.js"></script> 43<![endif]--> 44</body> 45</html>
↑フォーマット
html5の要素は
css
1margin: 0; 2padding: 0;
をしてレガシーブラウザを考慮したスタイルでいこうと思っています。
↓EMMET
"html": { "profile": "html", "snippets": { "!!": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n\t<link rel=\"canonical\" href=\"\">\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"author\" content=\"\">\n\t<meta name=\"copyright\" content=\"copyright©\" />\n\t<meta name=\"description\" content=\"\">\n\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n\t<meta name=\"format-detection\" content=\"telephone=no, email=no, address=no\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t<meta http-equiv=\"Imagetoolbar\" content=\"no\">\n\t<link rel=\"icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"apple-touch-icon\" sizes=\"192x192\" href=\"/apple-touch-icon.png\">\n\t<link rel=\"manifest\" href=\"manifest.json\">\n\t<meta name=\"theme-color\" content=\"#ffffff\">\n\t<meta name=\"msapplication-TileColor\" content=\"#ffcc22\">\n\t<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">\n\t<meta name=\"msapplication-config\" content=\"browserconfig.xml\" />\n\t<link rel=\"stylesheet\" href=\"css/style.css\">\n\t<title>site-title</title>\n\t<meta name=\"apple-mobile-web-app-title\" content=\"site-title\">\n\t<meta name=\"application-name\" content=\"site-title\">\n</head>\n<body>\n\t<header><div id=\"header\">\n\t\t\n\t</div></header>\n\t<nav><div id=\"nav\">\n\t\t\n\t</div></nav>\n\t<main><div id=\"main\">\n\t\t\n\t</div></main>\n\t<footer><div id=\"footer\">\n\t\t\n\t</div></footer>\n<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>\n<!--[if lte IE 8]>\n\t<script src=\"js/html5shiv.min.js\"></script>\n\t<script src=\"js/selectivizr-min.js\"></script>\n<![endif]-->\n</body>\n</html>" }
すみません、一読をお願いします。
OGPにつきましては今回書き加えていません。
<meta http-equiv="Imagetoolbar" content="no">はIe6用に書いています。
追記2016/8/4
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="canonical" href=""> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta name="author" content=""> 7 <meta name="copyright" content="copyright©" /> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <meta name="format-detection" content="telephone=no, email=no, address=no"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 13 <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 14 <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon.png"> 15 <link rel="manifest" href="manifest.json"> 16 <meta name="theme-color" content="#ffffff"> 17 <meta name="msapplication-TileColor" content="#ffcc22"> 18 <meta name="msapplication-TileImage" content="mstile-144x144.png"> 19 <meta name="msapplication-config" content="browserconfig.xml" /> 20 <meta http-equiv="content-style-type" content="text/css"> 21 <meta http-equiv="content-script-type" content="text/javascript"> 22 <link rel="stylesheet" href="css/style.css"> 23 <title>site-title</title> 24 <meta name="apple-mobile-web-app-title" content="site-title"> 25 <meta name="application-name" content="site-title"> 26</head> 27<body> 28 <header><div id="header"> 29 30 </div></header> 31 <nav><div id="nav"> 32 33 </div></nav> 34 <main><div id="main"> 35 36 </div></main> 37 <footer><div id="footer"> 38 39 </div></footer> 40<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 41<!--[if lte IE 8]> 42 <script type="text/javascript" src="js/html5shiv.min.js"></script> 43 <script type="text/javascript" src="js/selectivizr-min.js"></script> 44<![endif]--> 45</body> 46</html>
こうなりました。
どうでしょうか?
<meta http-equiv="content-style-type" content="text/css">
、<meta http-equiv="content-script-type" content="text/javascript">
を記述することで順位がさがるとかありえる話ですか?
seo的に。
回答2件
あなたの回答
tips
プレビュー