Dans cet article, nous allons apprendre à générer et configurer un sitemap HTML dans Blogger . Suivez simplement les étapes simples ci-dessous.
Mais avant de configurer un sitemap, comprenons ce qu'est un sitemap et quels sont les avantages d'avoir un sitemap sur un site Web.
Mise à jour : Un nouveau sitemap élégant est ajouté ci-dessous.
Table des matières:
- qu'est-ce qu'un plan du site ?
- Types de sitemaps :
- Étapes pour ajouter un sitemap HTML dans Blogger
- Nouveau sitemap HTML pour Blogger
qu'est-ce qu'un plan du site ?
Un sitemap est un fichier dans lequel vous fournissez des informations sur les pages, les vidéos et les autres fichiers de votre site. Il aide les moteurs de recherche comme Google, Bing, Yahoo à explorer efficacement votre site et éventuellement à indexer les pages rapidement.Par exemple , cela aide à identifier des informations telles que la dernière mise à jour et la fréquence de modification de la page, ainsi que toute autre version linguistique d'une page.
Types de sitemaps :
Il existe deux types de sitemaps :
- Plans de site HTML
- Plans de site XML
Les sitemaps XML sont en outre divisés selon les types suivants :
- Plans de site d'images
- plans de site vidéo
- Plans du site pour les actualités
- Plans de site mobiles
Plan du site HTML :
Un plan de site HTML est une page HTML sur laquelle toutes les sous-pages d'un site Web sont répertoriées de manière organisée et se trouve généralement dans la zone de pied de page du site Web.
➤Vous pouvez également trouver le plan du site HTML de notre site Web ici.
Les sitemaps HTML sont principalement créés pour les utilisateurs, car ils les aident à avoir un aperçu de la structure de votre site et à naviguer dans toutes les sous-pages de votre site Web.
Cela aide également les moteurs de recherche à mieux comprendre votre contenu et à l'indexer rapidement dans les résultats de recherche.
L'ajout d'un sitemap HTML dans Blogger est très simple. Il vous suffit d'ajouter un simple code HTML donné ci-dessous à votre section de page.
Suivez simplement les instructions ci-dessous et votre sitemap HTML sera prêt en moins d'une minute. Si vous rencontrez des difficultés, regardez la vidéo ci-dessous.
Étapes pour ajouter un sitemap HTML dans Blogger
Pour ajouter un sitemap élégant à votre site Web Blogger, vous devez ajouter un code HTML et créer une page nommée sitemap.
Étape 1 : Accédez à votre tableau de bord Blogger et ouvrez la section Page.
Étape 2 : créez une nouvelle page et passez l'éditeur en vue HTML .
Étape 3 : Maintenant, copiez le code ci-dessous et collez-le.
Étape 4 : Définissez maintenant le titre sur Sitemap et publiez la page.
Vous avez maintenant créé avec succès votre plan de site HTML élégant sur le site Web de Blogger.
Code pour le sitemap HTML :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wWR6DOzmKkp1i5vyLfNE_envfSClOlnVWSJp2UD8t1vZUNd6t1bUeQ_gxLcvgVhxxPcN0Z8wr54pevIs-iPr0tTsdxBNyl1AFdesMn8NTJdgSG97BVokVZrYkL2dgtll2DQz9Pkkp8UT/s1600/Sitemap+Arlina+Code.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap Arlina Code" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wWR6DOzmKkp1i5vyLfNE_envfSClOlnVWSJp2UD8t1vZUNd6t1bUeQ_gxLcvgVhxxPcN0Z8wr54pevIs-iPr0tTsdxBNyl1AFdesMn8NTJdgSG97BVokVZrYkL2dgtll2DQz9Pkkp8UT/s1600/Sitemap+Arlina+Code.png" title="Sitemap Arlina Code" /></a></div>
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=99999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7}
#bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
#bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
@media screen and (max-width:768px) {
#bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}}
</style> ✅ Tutoriel vidéo pour le sitemap HTML 👇
Après avoir collé le code, votre sitemap HTML est généré automatiquement. Vous pouvez voir le nom de la publication , la date et le nom de l'étiquette sous forme de tableau, comme indiqué dans la capture d'écran ci-dessous. Vous pouvez également consulter la démo sur notre page Plan du site dans la section Pied de page.
Le nouveau sitemap élégant pour Blogger (2021)
Si vous souhaitez ajouter un fichier de plan de site avec des catégories et un beau design, vous pouvez consulter l'aperçu du plan de site ci-dessous.
Ici, vous pouvez afficher les articles par catégorie et vous pouvez également afficher la vignette de l'article de blog (si vous le souhaitez) et vous pouvez afficher la date de publication, etc.
Télécharger le code pour ce plan du site
Le processus d'ajout de ce sitemap HTML est le même que ci-dessus. alors, remplacez simplement le code précédent par ce code et votre sitemap est prêt.
Nouveau sitemap HTML pour Blogger
<div class='postSection sitemaps' id='sitemaps'>
<div class='loading'>Sitemap is Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemapBox\"><h4 class=\"sitemapTitle\">'+n[g]+'</h4>',l+='<div class=\"sitemapContent\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>
<style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:0px solid black;border-radius:5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style> ➤Si vous rencontrez un problème, demandez-moi dans la section des commentaires ou rejoignez-nous sur les plateformes de médias sociaux pour une résolution plus rapide.
Partagez également vos commentaires sur ce nouveau plan de site HTML élégant sur Blogger et partagez-le avec vos amis.