Last active
November 10, 2016 20:16
-
-
Save Ferrmolina/fe45a6bf3a34c16a27413e33438375d9 to your computer and use it in GitHub Desktop.
Ejemplo de un head html con sintaxis JADE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- var site_name = "Nombre del sitio." | |
- var titulo = "Titulo del sitio." | |
- var theme_color = "#color" | |
- var descripcion = "Descripcion de hasta 155 caracteres." | |
//- Facebook Vars | |
- var url_site = "http://www.example.com" | |
//- Twitter Vars | |
- var username = "@username" | |
- var creator = "@username" | |
doctype html | |
html(lang="es" itemscope itemtype="http://schema.org/WebPage") | |
head(prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#") | |
//- A tener en cuenta antes de entregar un sitio: | |
//- - Imagenes optimizadas | |
//- - Google Analytics | |
//- - Robots.txt | |
//- - Sitemap.xml | |
//- - www. en URL | |
//- - Metadatos | |
//- - Teléfonos clickeables desde el celular | |
//- - Alt en Imágenes | |
//- - Full Responsive | |
meta(charset="utf-8") | |
meta(http-equiv="X-UA-Compatible" content="IE=edge") | |
meta(name="mobile-web-app-capable" content="yes") | |
meta(name="apple-mobile-web-app-capable" content="yes") | |
meta(name="theme-color" content="#{theme_color}") | |
meta(name="msapplication-TileColor" content="#{theme_color}") | |
meta(name="msapplication-navbutton-color" content="#{theme_color}") | |
meta(name="apple-mobile-web-app-status-bar-style" content="black-translucent") | |
meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no") | |
//- ======================== Favicons ======================== | |
//- Default Favicons | |
link(rel="icon" type="image/png" sizes="16x16" href="#{url_site}/css/assets/favicons/favicon-16x16.png") | |
link(rel="icon" type="image/png" sizes="24x24" href="#{url_site}/css/assets/favicons/favicon-24x24.png") | |
link(rel="icon" type="image/png" sizes="32x32" href="#{url_site}/css/assets/favicons/favicon-32x32.png") | |
link(rel="icon" type="image/png" sizes="64x64" href="#{url_site}/css/assets/favicons/favicon-64x64.png") | |
link(rel="icon" type="image/png" sizes="96x96" href="#{url_site}/css/assets/favicons/favicon-96x96.png") | |
//- Android Favicons | |
link(rel="icon" type="image/png" sizes="32x32" href="#{url_site}/css/assets/favicons/android-chrome-32x32.png") | |
link(rel="icon" type="image/png" sizes="48x48" href="#{url_site}/css/assets/favicons/android-chrome-48x48.png") | |
link(rel="icon" type="image/png" sizes="72x72" href="#{url_site}/css/assets/favicons/android-chrome-72x72.png") | |
link(rel="icon" type="image/png" sizes="96x96" href="#{url_site}/css/assets/favicons/android-chrome-96x96.png") | |
link(rel="icon" type="image/png" sizes="144x144" href="#{url_site}/css/assets/favicons/android-chrome-144x144.png") | |
link(rel="icon" type="image/png" sizes="192x192" href="#{url_site}/css/assets/favicons/android-chrome-192x192.png") | |
//- Apple Favicons | |
link(rel="apple-touch-icon" href="#{url_site}/css/assets/favicons/apple-touch-icon.png") | |
link(rel="apple-touch-icon" sizes="57x57" href="#{url_site}/css/assets/favicons/apple-touch-icon-57x57.png") | |
link(rel="apple-touch-icon" sizes="60x60" href="#{url_site}/css/assets/favicons/apple-touch-icon-60x60.png") | |
link(rel="apple-touch-icon" sizes="72x72" href="#{url_site}/css/assets/favicons/apple-touch-icon-72x72.png") | |
link(rel="apple-touch-icon" sizes="76x76" href="#{url_site}/css/assets/favicons/apple-touch-icon-76x76.png") | |
link(rel="apple-touch-icon" sizes="114x114" href="#{url_site}/css/assets/favicons/apple-touch-icon-114x114.png") | |
link(rel="apple-touch-icon" sizes="120x120" href="#{url_site}/css/assets/favicons/apple-touch-icon-120x120.png") | |
link(rel="apple-touch-icon" sizes="144x144" href="#{url_site}/css/assets/favicons/apple-touch-icon-144x144.png") | |
link(rel="apple-touch-icon" sizes="152x152" href="#{url_site}/css/assets/favicons/apple-touch-icon-152x152.png") | |
link(rel="apple-touch-icon" sizes="180x180" href="#{url_site}/css/assets/favicons/apple-touch-icon.png") | |
//- Windows Tiles | |
meta(name="msapplication-TileImage" content="#{url_site}/css/assets/favicons/mstile.png") | |
meta(name="msapplication-square70x70logo" content="#{url_site}/css/assets/favicons/mstile-70x70.png") | |
meta(name="msapplication-square150x150logo" content="#{url_site}/css/assets/favicons/mstile-150x150.png") | |
meta(name="msapplication-wide310x150logo" content="#{url_site}/css/assets/favicons/mstile-310x150.png") | |
meta(name="msapplication-square310x310logo" content="#{url_site}/css/assets/favicons/mstile-310x310.png") | |
//- Schema.org markup for Google | |
meta(property="og:type" content="website") | |
meta(name="description" content="#{descripcion}") | |
meta(itemprop="name" content="#{titulo}") | |
meta(itemprop="description" content="#{descripcion}") | |
meta(property="og:image" itemprop="image primaryImageOfPage" content="#{url_site}/css/assets/home.jpg") | |
//- Twitter Card data | |
meta(name="twitter:card" content="summary_large_image") | |
meta(name="twitter:title" property="og:title" itemprop="title name" content="#{titulo}") | |
meta(name="twitter:description" content="#{descripcion}") | |
meta(name="twitter:site" content="#{username}") | |
meta(name="twitter:creator" content="#{creator}") | |
meta(name="twitter:image:width" content="768") | |
meta(name="twitter:image:height" content="320") | |
meta(name="twitter:image" property="og:image" itemprop="image primaryImageOfPage" content="#{url_site}/css/assets/home.jpg") | |
//- Facebook Open Graph data | |
meta(prefix="og: http://ogp.me/ns#" property="og:title" itemprop="title name" content="#{titulo}") | |
meta(prefix="og: http://ogp.me/ns#" property="og:url" content="#{url_site}") | |
meta(prefix="og: http://ogp.me/ns#" property="og:image" itemprop="image primaryImageOfPage" content="#{url_site}/css/assets/home.jpg") | |
meta(prefix="og: http://ogp.me/ns#" property="og:description" content="#{descripcion}") | |
meta(prefix="og: http://ogp.me/ns#" property="og:site_name" content="#{site_name}") | |
meta(prefix="og: http://ogp.me/ns#" property="og:type" content="article") | |
meta(prefix="og: http://ogp.me/ns#" property="og:image:width" content="768") | |
meta(prefix="og: http://ogp.me/ns#" property="og:image:height" content="320") | |
title #{titulo} | |
link(href="css/styles.css" rel="stylesheet") |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment