Pour chaque page HTML, vous devez disposer de quelques éléments clés pour assurer un chargement rapide et un bon référencement. Le modèle ci-dessous vous offre toutes ces fonctionnalités, que vous pouvez rapidement personnaliser selon vos besoins.
J’ai également répertorié ci-dessous toutes les balises méta utiles si vous souhaitez les extraire individuellement.
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="icon" type="text/png" href="https://fjolt.com/favicon.png">
<!-- load if you are using google fonts -->
<!--<link rel="preconnect" href="https://fonts.gstatic.com">-->
<meta name=”description” content="Description of my website">
<meta name="robots" content="index,follow">
<meta name="keywords" content="tags,for,your,site">
<link rel="canonical" href="URL for this page">
<meta property="og:title" content="My Website" />
<meta property="og:description" content="Description of my website" />
<meta property="og:image" content="Image URL representing my website" />
<meta property="og:url" content="URL for this page" />
<meta property="og:site_name" content="My Website" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="https://fjolt.com">
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:image" content="{{image}}">
<!-- For mobile devices -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- Use if you are using google analytics, replace [[ID HERE]] in script and code with your ID -->
<!--
<script async src="https://www.googletagmanager.com/gtag/js?id=G-[[ID HERE]]"></script>
<script>
var host = window.location.hostname;
if(host !== "localhost") {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[[ID HERE]]');
}
</script>-->
<!-- Preload your stylesheets -->
<link rel="preload" href="http://dzone.com/style.css" as="style" />
<!-- if you want to load some CSS async uncomment this -->
<!--<link rel="preload" href="http://dzone.com/async.css" as="style" />-->
<!-- Preload your fonts if necessary -->
<link rel="preload" href="http://dzone.com/fonts/fontName.ttf" as="font" crossorigin="anonymous" />
<link rel="preload" href="http://dzone.com/fonts/fontName.ttf" as="font" crossorigin="anonymous" />
<!-- Load your stylesheets -->
<link rel="stylesheet" href="http://dzone.com/style.css" />
<!-- if you want to load some CSS async uncomment this -->
<!--link rel="stylesheet" href="http://dzone.com/async.css" media="print" onload="this.media="all"">-->
</head>
<body>
<!-- Your Website Body -->
<!-- Your Main JS Script -->
<script defer src="local.js"></script>
</body>
</html>
Balises méta
<meta name="description" content="Description of my website">
<meta name="robots" content="index,follow">
<meta name="keywords" content="tags,for,your,site">
<link rel="shortlink" href="https://dzone.com/articles/Short form link for this page">
<link rel="canonical" href="URL for this page">
<link rel="prev" href="URL for the prev page in this series">
<link rel="next" href="URL for the next page in this series">
<link rel="dns-prefetch" href="Link to a DNS server far to lookup early on">
<link rel="prefetch" href="Link to a document or file to prefetch and cache">
<link rel="prerender" href="The document should be optimised for rendering on the page">
<link rel="preload" href="Link to a document or file to prefetch and cache which will be used in the page" as="script"> <!-- "as" can be script, font, stylesheet -->
-
Page générale des médias sociaux
<meta property="og:title" content="My Website">
<meta property="og:description" content="Description of my website">
<meta property="og:image" content="Image URL representing my website">
<meta property="og:url" content="URL for this page">
<meta property="og:site_name" content="My Website">
<meta name="twitter:card" content="summary_large_image"> <!-- Don't change this one -->
<meta name="twitter:site" content="Website URL">
<meta name="twitter:title" content="Title for page">
<meta name="twitter:description" content="Description of page">
<meta name="twitter:image" content="Image of page">
html Copy
<!-- indicates this will run in full screen mode on iOS devices -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- set color of top band in iOS, requires apple-mobile-web-app-capable to be set -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- auto detect phone numbers on apple devices on this page -->
<meta name="format-detection" content="telephone=yes">
<!-- For mobile devices -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1" user-scalable="no">
<meta name="og:video" content="Video URL">
<meta name="og:video:secure_url" content="Secure Video URL">
<meta name="og:video:types" content="Video Format"> <!-- can be application/x-shockwave-flash or video/mp4. -->
<meta name="og:video:width" content="Video Width i.e. 100px">
<meta name="og:video:height" content="Video Height i.e. 200px">
<meta name="og:video:image" content="Placeholder image for video">
<meta property="og:type" content="threed.asset"> <!-- set to threed.asset for 3d -->
<meta property="og:asset" content="/link/to/asset.glb">
<meta property="og:title" content="Title of asset">C’est tout pour aujourd’hui. Si vous avez des suggestions, n’hésitez pas à laisser un commentaire !