Last active
December 30, 2022 10:02
-
-
Save FredSRocha/a064b9dd9c91b87fabb4db4361a8aa49 to your computer and use it in GitHub Desktop.
Build pages with: HTML5, Meta(Open Graph/Twitter) and JsonLD.
This file contains 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
| <!doctype html> | |
| <html itemscope itemtype="http://schema.org/WebPage" class="no-js" lang="[ISO-Code]"> | |
| <head> | |
| <!-- | |
| To lang: | |
| ISO [639-1] Language Codes: | |
| (http://www.w3schools.com/tags/ref_language_codes.asp) | |
| ISO Country Codes: | |
| (http://www.w3schools.com/tags/ref_country_codes.asp) | |
| --> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <base href="/"> | |
| <meta name="robots" content="[selection]"> | |
| <!-- | |
| To robots: | |
| (http://www.metatags.org/meta_name_robots/) | |
| --> | |
| <link rel="canonical" href="[url]"> | |
| <link rel="alternate" href="[url]"> | |
| <!-- | |
| To rel Attribute: | |
| (http://www.w3schools.com/tags/att_link_rel.asp) | |
| --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <meta name="format-detection" content="telephone=no"> | |
| <meta name="msapplication-tap-highlight" content="no"> | |
| <!-- | |
| To Responsive Web Design: | |
| viewport: | |
| (http://www.html-5.com/metatags/viewport-meta-tag.html) | |
| format-detection: | |
| (http://www.html-5.com/metatags/format-detection-meta-tag.html) | |
| msapplication-tap-highlight: | |
| (https://msdn.microsoft.com/en-us/library/bg182645(v=vs.85).aspx) | |
| --> | |
| <meta itemprop="name" content="[Title]"> | |
| <title>[Title]</title> | |
| <!-- Title (60- characters.) --> | |
| <meta itemprop="description" content="[Description.]"> | |
| <meta name="description" content="[Description.]"> | |
| <!-- Description (150- characters.) --> | |
| <meta name="keywords" content="[keyword, keyword, ...]"> | |
| <!-- Keywords (25- keywords.) --> | |
| <!-- | |
| To limit [Title], [Description] and [Keywords]: | |
| (http://www.scrubtheweb.com/tools/metatag-generator.html) | |
| --> | |
| <meta name="author" content="[name], [e-mail]"> | |
| <!-- Open Graph --> | |
| <meta property="og:locale" content="[ISO-Code]"> | |
| <!-- | |
| To Facebook App: | |
| <meta property="fb:app_id" content="[ID]"> | |
| --> | |
| <meta property="og:url" content="[urlObject]"> | |
| <meta property="og:type" content="[typeObject]"> | |
| <meta property="og:title" content="[Title]"> | |
| <!-- Title (60- characters.) --> | |
| <meta property="og:description" content="[Description.]"> | |
| <!-- Description (150- characters.) --> | |
| <meta property="og:image" content="[url].fileExtension"> | |
| <meta property="og:image" content="[url].fileExtension"> | |
| <meta property="og:image" content="[url].fileExtension"> | |
| <meta property="og:image" content="[url].fileExtension"> | |
| <meta property="og:image" content="[url].fileExtension"> | |
| <!-- | |
| To slide images: | |
| Use more than one image. | |
| NOTE: | |
| Use images with at least 1200 x 630 pixels for best viewing on high-resolution devices. | |
| (https://developers.facebook.com/docs/sharing/best-practices/) | |
| --> | |
| <meta property="og:image:type" content="[imageType]"> | |
| <meta property="og:image:width" content="[imageWidth - Only value!]"> | |
| <meta property="og:image:height" content="[imageHeight - Only value!]"> | |
| <!-- | |
| To Open Graph for Facebook tips: | |
| (https://developers.facebook.com/docs/sharing/webmasters/) | |
| --> | |
| <!-- Twitter Card --> | |
| <meta name="twitter:card" content="[type]"> | |
| <meta name="twitter:site" content="@[usrname]"> | |
| <meta name="twitter:creator" content="@[username]"> | |
| <!-- Title (60- characters.) --> | |
| <meta name="twitter:title" content="[Title]"> | |
| <!-- Description (150- characters.) --> | |
| <meta name="twitter:description" content="[Description.]"> | |
| <meta name="twitter:image" content="[url].fileExtension"> | |
| <!-- | |
| To Twitter card: | |
| (https://dev.twitter.com/cards/overview/) | |
| (https://dev.twitter.com/cards/types/) | |
| Tools (create cards): | |
| (http://webcodetools.com/twitter-card-generator/) | |
| (http://www.seocentro.com/tools/seo/twitter-card-generator.html) | |
| --> | |
| <!-- Favicons --> | |
| <meta itemprop="image" content="[url].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="57x57" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="60x60" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="72x72" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="76x76" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="114x114" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="120x120" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="144x144" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="152x152" href="[path].fileExtension"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="[path].fileExtension"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="[path].fileExtension"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="[path].fileExtension"> | |
| <link rel="icon" type="image/png" sizes="96x96" href="[path].fileExtension"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="[path].fileExtension"> | |
| <link rel="manifest" href="[path]/manifest.json"> | |
| <meta name="msapplication-TileColor" content="#ffffff"> | |
| <meta name="msapplication-TileImage" content="[path].fileExtension"> | |
| <meta name="theme-color" content="#ffffff"> | |
| <link rel="stylesheet" href="[url]"> | |
| <!-- | |
| To Google fonts: | |
| (https://fonts.google.com/) | |
| --> | |
| <link rel="stylesheet" href="[path]"> | |
| </head> | |
| <body> | |
| <svg class="svg-source" width="0" height="0" aria-hidden="true"> | |
| <!-- SVG's Source. --> | |
| </svg> | |
| <div> | |
| <!-- Backgrounds and loadings. --> | |
| <script type="application/ld+json"> | |
| { | |
| "image": "https://schema.org/ImageObject", | |
| "video": "http://schema.org/VideoObject" | |
| } | |
| </script> | |
| </div> | |
| <main> | |
| <nav> | |
| <!-- WebPageElement. --> | |
| <ul> | |
| <li> | |
| <!-- Link. --> | |
| </li> | |
| </ul> | |
| <script type="application/ld+json"> | |
| { | |
| "ListNavigation": "http://schema.org/BreadcrumbList", | |
| "sideBar": "http://schema.org/WPSideBar" | |
| } | |
| </script> | |
| </nav> | |
| <article role="application"> | |
| <header> | |
| <!-- WebPageElement. --> | |
| <h1> | |
| <!-- Heading. --> | |
| </h1> | |
| <figure><img src="https://www.w3.org/html/logo/badge/html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png" width="357" height="64" alt="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage"/> | |
| <figcaption> | |
| <!-- Figcaption image. --> | |
| </figcaption> | |
| </figure> | |
| <script type="application/ld+json"> | |
| { | |
| "image": "https://schema.org/ImageObject" | |
| } | |
| </script> | |
| <script type="application/ld+json"> | |
| { | |
| "header": "https://schema.org/WPHeader" | |
| } | |
| </script> | |
| </header> | |
| <section> | |
| <!-- WebPageElement. --> | |
| <h2> | |
| <!-- Heading. --> | |
| </h2> | |
| <p> | |
| <!-- Paragraph. --> | |
| </p> | |
| <figure><img src="https://www.w3.org/html/logo/img/footer_W3C_logo.png" alt="W3C" width="114" height="61"/> | |
| <figcaption> | |
| <!-- Figcaption image. --> | |
| </figcaption> | |
| </figure> | |
| <script type="application/ld+json"> | |
| { | |
| "image": "https://schema.org/ImageObject" | |
| } | |
| </script> | |
| <script type="application/ld+json"> | |
| { | |
| "content": "https://schema.org/<variable>" | |
| } | |
| </script> | |
| <div> | |
| <form> | |
| <input type="submit" value="Send"/> | |
| </form> | |
| <script type="application/ld+json"> | |
| { | |
| "interactionsFormularies": "http://schema.org/WebSite" | |
| } | |
| </script> | |
| </div> | |
| </section> | |
| <footer> | |
| <!-- WebPageElement. --> | |
| <script type="application/ld+json"> | |
| { | |
| "footer": "http://schema.org/WPFooter" | |
| } | |
| </script> | |
| </footer> | |
| <script type="application/ld+json"> | |
| { | |
| "article": "https://schema.org/NewsArticle" | |
| } | |
| </script> | |
| </article> | |
| </main> | |
| <!-- We recommend explicit declaration if these properties are specified, but if they are found outside of an itemscope, they will be assumed to be about the page. --> | |
| <script type="application/ld+json"> | |
| { | |
| "page": "http://schema.org/WebPage" | |
| } | |
| </script> | |
| <!-- | |
| To content page: | |
| SEO: (http://schema.org/) | |
| Standard: (https://www.w3.org/) | |
| Structure: (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/[tagName]) | |
| --> | |
| <script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script> | |
| <script>window.jQuery || document.write('<script src="[path]/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script> | |
| <!-- | |
| To jQuery load: | |
| Credit: (https://github.com/h5bp/html5-boilerplate/blob/master/src/index.html) | |
| --> | |
| <script async src="[path]"></script> | |
| <!-- Google Analytics: Change UA-XXXXX-Y to be your site's ID. --> | |
| <script> | |
| window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date; | |
| ga('create','UA-XXXXX-Y','auto');ga('send','pageview') | |
| </script> | |
| <script src="https://www.google-analytics.com/analytics.js" async defer></script> | |
| <!-- | |
| To Analytics call: | |
| Credit: (https://github.com/h5bp/html5-boilerplate/blob/master/src/index.html) | |
| --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment