Optimisation SEO : Maîtriser la Balise Title pour Booster son Référencement
Introduction
Dans l'univers compétitif du référencement naturel, chaque détail compte. Parmi les éléments clés qui influencent le positionnement d'une page web, la balise title occupe une place de choix. Cette balise, souvent sous-estimée, joue un rôle crucial dans l'optimisation SEO et l'expérience utilisateur. Mais comment bien l'utiliser pour maximiser son impact ? Quels sont les pièges à éviter et les bonnes pratiques à adopter ? Cet article explore en profondeur la balise title, ses avantages, ses inconvénients, et vous guide pas à pas pour l'optimiser efficacement.
Contexte et définition
La balise title, ou titre de page, est un élément HTML essentiel qui apparaît dans les résultats de recherche des moteurs comme Google. Elle est également affichée dans l'onglet du navigateur lorsque l'utilisateur visite une page. Techniquement, elle est définie par la balise `
` dans le code HTML d'une page.</p>
<p>Contrairement à ce que l'on pourrait penser, la balise title ne doit pas être confondue avec le <strong>titre H1</strong> de la page. Bien qu'ils soient souvent similaires, ils ont des rôles distincts. Le titre H1 est un élément de structure interne à la page, tandis que la balise title est un élément méta qui s'affiche dans les résultats de recherche.</p>
<h3>Analyse approfondie</h3>
<h4>Avantages et inconvénients</h4>
<p><strong>Avantages :</strong></p>
<ul>
<li><strong>Amélioration du référencement</strong> : Une balise title bien optimisée peut significativement améliorer le classement d'une page dans les résultats de recherche.</li>
</ul>
<ul>
<li><strong>Meilleure expérience utilisateur</strong> : Un titre clair et accrocheur incite les utilisateurs à cliquer sur le lien.</li>
</ul>
<ul>
<li><strong>Augmentation du taux de clics (CTR)</strong> : Un titre bien rédigé peut augmenter le taux de clics, ce qui est un signal positif pour les moteurs de recherche.</li>
</ul>
<p><strong>Inconvénients :</strong></p>
<ul>
<li><strong>Risque de sur-optimisation</strong> : Une balise title trop chargée en mots-clés peut être pénalisée par les algorithmes des moteurs de recherche.</li>
</ul>
<ul>
<li><strong>Longueur limitée</strong> : Google affiche généralement les 50 à 60 premiers caractères d'une balise title, ce qui impose une contrainte de concision.</li>
</ul>
<h4>Comparaisons</h4>
<p>Comparée à d'autres balises méta comme la <strong>balise meta description</strong>, la balise title a un impact plus direct sur le référencement. Cependant, elles se complètent. La meta description, bien qu'elle n'influence pas directement le classement, peut améliorer le CTR, ce qui indirectement peut aider au référencement.</p>
<h4>Études de cas et exemples concrets</h4>
<p>Un exemple concret de l'impact d'une balise title bien optimisée est celui d'un site e-commerce qui a vu son trafic augmenter de 30 % après avoir revu et optimisé ses titres de page. En intégrant des mots-clés pertinents et en rendant les titres plus accrocheurs, le site a pu attirer plus de visiteurs qualifiés.</p>
<h4>Tendances actuelles et perspectives futures</h4>
<p>Les tendances actuelles montrent une préférence pour des titres plus naturels et moins chargés en mots-clés. Les moteurs de recherche, notamment Google, privilégient les titres qui répondent aux intentions de recherche des utilisateurs. À l'avenir, l'accent sera probablement mis sur la personnalisation des titres en fonction du contexte de la recherche.</p>
<h3>Guide pratique</h3>
<h4>Étapes à suivre</h4>
<ul>
<li><strong>Identifier les mots-clés pertinents</strong> : Utilisez des outils comme Google Keyword Planner pour trouver les mots-clés les plus pertinents pour votre contenu.</li>
</ul>
<ul>
<li><strong>Rédiger des titres accrocheurs</strong> : Intégrez les mots-clés de manière naturelle et rendez les titres attractifs.</li>
</ul>
<ul>
<li><strong>Respecter la longueur</strong> : Limitez la balise title à 50-60 caractères pour éviter la truncation dans les résultats de recherche.</li>
</ul>
<ul>
<li><strong>Éviter la duplication</strong> : Chaque page doit avoir une balise title unique pour éviter la confusion des moteurs de recherche.</li>
</ul>
<h4>Conseils et bonnes pratiques</h4>
<ul>
<li><strong>Éviter les titres génériques</strong> : Privilégiez des titres spécifiques qui reflètent le contenu de la page.</li>
</ul>
<ul>
<li><strong>Utiliser des chiffres et des symboles</strong> : Les titres avec des chiffres ou des symboles comme des astérisques peuvent attirer plus de clics.</li>
</ul>
<ul>
<li><strong>Mettre à jour régulièrement</strong> : Les titres doivent être revus et mis à jour en fonction des performances et des tendances.</li>
</ul>
<h4>Outils ou ressources utiles</h4>
<ul>
<li><strong>Google Search Console</strong> : Pour analyser les performances des titres de vos pages.</li>
</ul>
<ul>
<li><strong>Yoast SEO</strong> : Un plugin WordPress qui aide à optimiser les balises title.</li>
</ul>
<ul>
<li><strong>SEMrush</strong> : Pour des analyses approfondies des mots-clés et des titres.</li>
</ul>
<h3>
<div class="polgy-faq" style="background:#f8f9fa;padding:15px;margin:20px 0;border-radius:8px">
<h2>❓ Foire Aux Questions</h2>
<p><strong>(FAQ)</h3>
<p><strong>1. Quelle est la longueur idéale pour une balise title ?</strong></p>
<p></strong><br />
La longueur idéale est de 50 à 60 caractères pour éviter la truncation dans les résultats de recherche.</p>
<p><strong>2. Peut-on utiliser plusieurs mots-clés dans une balise title ?</strong><br />
Oui, mais il est important de les intégrer de manière naturelle et sans surcharge.</p>
<p><strong>3. Comment vérifier si ma balise title est bien optimisée ?</strong><br />
Utilisez des outils comme Google Search Console ou des extensions comme Yoast SEO pour analyser et optimiser vos titres.</p>
<p><strong>4. La balise title influence-t-elle directement le classement dans les résultats de recherche ?</strong><br />
Oui, elle est un facteur important dans l'algorithme de classement des moteurs de recherche.</p>
<p><strong>5. Peut-on utiliser des emojis dans une balise title ?</strong><br />
Oui, mais avec modération. Les emojis peuvent rendre un titre plus attractif, mais ils doivent être pertinents et utilisés judicieusement.</p>
<p><strong>6. Comment éviter la duplication des balises title ?</strong><br />
Assurez-vous que chaque page de votre site a une balise title unique et descriptive.</p>
<p><strong>7. La balise title doit-elle inclure le nom de l'entreprise ?</strong><br />
Ce n'est pas obligatoire, mais cela peut être utile pour le branding, surtout sur les pages principales.</p>
<p><strong>8. Comment mesurer l'impact d'une balise title sur le CTR ?</strong><br />
Utilisez Google Search Console pour analyser les performances de vos titres et leur impact sur le taux de clics.</p>
<p><strong>9. Peut-on utiliser des majuscules dans une balise title ?</strong><br />
Oui, mais il est préférable de les utiliser avec modération pour éviter un titre trop agressif.</p>
<p><strong>10. Comment adapter les balises title pour le mobile ?</strong><br />
Les principes restent les mêmes, mais il est important de s'assurer que les titres sont lisibles et attractifs sur les petits écrans.</p>
</div>
<h3>Conclusion</h3>
<p>La <strong>balise title</strong> est un élément fondamental pour une stratégie SEO efficace. En suivant les bonnes pratiques et en évitant les pièges courants, vous pouvez significativement améliorer le référencement de vos pages et attirer plus de visiteurs qualifiés. N'oubliez pas de surveiller régulièrement les performances de vos titres et de les adapter en fonction des tendances et des retours des utilisateurs.</p>
<p>Pour aller plus loin, explorez les outils mentionnés et n'hésitez pas à expérimenter avec différents formats de titres pour trouver ce qui fonctionne le mieux pour votre audience. Commencez dès aujourd'hui à optimiser vos balises title et observez les résultats positifs sur votre trafic et votre classement.</p>
<p>** Découvrez comment optimiser la balise title pour améliorer votre référencement et attirer plus de visiteurs. Guide pratique, conseils et outils inclus.</p>
</div><!-- .entry-content -->
</article><!-- #post-239 -->
</main><!-- #main -->
<footer class="pagelayer-footer"><div pagelayer-id="eyw7607" class="p-eyw7607 pagelayer-post_props">
</div>
<div pagelayer-id="wg87901" class="p-wg87901 pagelayer-row pagelayer-row-stretch-auto pagelayer-height-default">
<style pagelayer-style-id="wg87901">.p-wg87901 .pagelayer-col-holder{padding: 10px}
.p-wg87901 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
.p-wg87901 .pagelayer-svg-top .pagelayer-shape-fill{fill:#227bc3}
.p-wg87901 .pagelayer-row-svg .pagelayer-svg-top{width:100%;height:100px}
.p-wg87901 .pagelayer-svg-bottom .pagelayer-shape-fill{fill:#e44993}
.p-wg87901 .pagelayer-row-svg .pagelayer-svg-bottom{width:100%;height:100px}
.p-wg87901{background: var(--pagelayer-color-secondary);padding-top: 50px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px}
</style>
<div class="pagelayer-row-holder pagelayer-row pagelayer-auto pagelayer-width-auto">
<div pagelayer-id="njy4820" class="p-njy4820 pagelayer-col">
<style pagelayer-style-id="njy4820">.p-njy4820 .pagelayer-col-holder > div:not(:last-child){margin-bottom: 15px}
.pagelayer-row-holder .p-njy4820{width: 25%}
.p-njy4820 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
@media (max-width: 768px) and (min-width: 501px){.pagelayer-row-holder .p-njy4820{width: 100%}
}
@media (max-width: 500px){.pagelayer-row-holder .p-njy4820{width: 100%}
}
</style>
<div class="pagelayer-col-holder">
<div pagelayer-id="gay1536" class="p-gay1536 pagelayer-heading">
<style pagelayer-style-id="gay1536">.p-gay1536 .pagelayer-heading-holder *{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-gay1536 .pagelayer-heading-holder{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
@media (max-width: 768px) and (min-width: 501px){.p-gay1536 .pagelayer-heading-holder *{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-gay1536 .pagelayer-heading-holder{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-gay1536 .pagelayer-heading-holder *{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-gay1536 .pagelayer-heading-holder{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-heading-holder"><h4>À Propos de Nous</h4></div>
</div>
<div pagelayer-id="ejg314" class="p-ejg314 pagelayer-heading">
<style pagelayer-style-id="ejg314">.p-ejg314 .pagelayer-heading-holder *{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family) !important; font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-ejg314 .pagelayer-heading-holder{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family) !important; font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
@media (max-width: 768px) and (min-width: 501px){.p-ejg314 .pagelayer-heading-holder *{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-ejg314 .pagelayer-heading-holder{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-ejg314 .pagelayer-heading-holder *{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-ejg314 .pagelayer-heading-holder{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-heading-holder"><p>SEO MOROCCO est votre partenaire de confiance pour le référencement naturel au Maroc. Notre objectif est de vous rendre visible et d'augmenter votre chiffre d'affaires grâce à des pratiques SEO efficaces et adaptées.</p></div>
</div>
</div></div>
<div pagelayer-id="rt06949" class="p-rt06949 pagelayer-col">
<style pagelayer-style-id="rt06949">.p-rt06949 .pagelayer-col-holder > div:not(:last-child){margin-bottom: 15px}
.pagelayer-row-holder .p-rt06949{width: 25%}
.p-rt06949 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
@media (max-width: 768px) and (min-width: 501px){.pagelayer-row-holder .p-rt06949{width: 100%}
}
@media (max-width: 500px){.pagelayer-row-holder .p-rt06949{width: 100%}
}
</style>
<div class="pagelayer-col-holder">
<div pagelayer-id="rlw8478" class="p-rlw8478 pagelayer-heading">
<style pagelayer-style-id="rlw8478">.p-rlw8478 .pagelayer-heading-holder *{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-rlw8478 .pagelayer-heading-holder{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
@media (max-width: 768px) and (min-width: 501px){.p-rlw8478 .pagelayer-heading-holder *{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-rlw8478 .pagelayer-heading-holder{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-rlw8478 .pagelayer-heading-holder *{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-rlw8478 .pagelayer-heading-holder{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-heading-holder"><h4>Services</h4></div>
</div>
<div pagelayer-id="fmx9972" class="p-fmx9972 pagelayer-list">
<style pagelayer-style-id="fmx9972">.p-fmx9972 li{list-style-type: none;font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-fmx9972 .pagelayer-list-icon-holder{padding-bottom: calc(10px/2); padding-top: calc(10px/2)}
.p-fmx9972 .pagelayer-list-item{color:var(--pagelayer-color-accent);margin-left: 10px}
.p-fmx9972 li > a{font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-fmx9972 .pagelayer-list-item, .p-fmx9972 .pagelayer-list-ul > div{transition: all 800ms}
.p-fmx9972 .pagelayer-list-ul > div:hover .pagelayer-list-item{color:var(--pagelayer-color-primary)}
.p-fmx9972 .pagelayer-list-icon{color:var(--pagelayer-color-primary)}
@media (max-width: 768px) and (min-width: 501px){.p-fmx9972 li{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-fmx9972 li > a{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-fmx9972 li{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-fmx9972 li > a{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><ul class="pagelayer-list-ul pagelayer-list-type-none">
<div pagelayer-id="66k1900" class="p-66k1900 pagelayer-list_item">
<li class="pagelayer-list-li">
<a class="pagelayer-list-url pagelayer-ele-link" href="#">
<span class="pagelayer-list-icon-holder">
<span class="pagelayer-list-item">Audit SEO</span>
</span>
</a>
</li></div>
<div pagelayer-id="jaf3506" class="p-jaf3506 pagelayer-list_item">
<li class="pagelayer-list-li">
<a class="pagelayer-list-url pagelayer-ele-link" href="#">
<span class="pagelayer-list-icon-holder">
<span class="pagelayer-list-item">Stratégie de contenu</span>
</span>
</a>
</li></div>
<div pagelayer-id="5468029" class="p-5468029 pagelayer-list_item">
<li class="pagelayer-list-li">
<a class="pagelayer-list-url pagelayer-ele-link" href="#">
<span class="pagelayer-list-icon-holder">
<span class="pagelayer-list-item">SEO Technique</span>
</span>
</a>
</li></div>
<div pagelayer-id="a526798" class="p-a526798 pagelayer-list_item">
<li class="pagelayer-list-li">
<a class="pagelayer-list-url pagelayer-ele-link" href="#">
<span class="pagelayer-list-icon-holder">
<span class="pagelayer-list-item">Création de liens</span>
</span>
</a>
</li></div>
</ul></div>
</div></div>
<div pagelayer-id="ufa5248" class="p-ufa5248 pagelayer-col">
<style pagelayer-style-id="ufa5248">.p-ufa5248 .pagelayer-col-holder > div:not(:last-child){margin-bottom: 15px}
.pagelayer-row-holder .p-ufa5248{width: 25%}
.p-ufa5248 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
@media (max-width: 768px) and (min-width: 501px){.pagelayer-row-holder .p-ufa5248{width: 100%}
}
@media (max-width: 500px){.pagelayer-row-holder .p-ufa5248{width: 100%}
}
</style>
<div class="pagelayer-col-holder">
<div pagelayer-id="6he1039" class="p-6he1039 pagelayer-heading">
<style pagelayer-style-id="6he1039">.p-6he1039 .pagelayer-heading-holder *{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-6he1039 .pagelayer-heading-holder{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
@media (max-width: 768px) and (min-width: 501px){.p-6he1039 .pagelayer-heading-holder *{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-6he1039 .pagelayer-heading-holder{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-6he1039 .pagelayer-heading-holder *{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-6he1039 .pagelayer-heading-holder{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-heading-holder"><h4>Contactez-nous</h4></div>
</div>
<div pagelayer-id="bx68631" class="p-bx68631 pagelayer-address">
<style pagelayer-style-id="bx68631">.p-bx68631 .pagelayer-address *, .p-bx68631 .pagelayer-address{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
body:not(.rtl) .p-bx68631 .pagelayer-address-icon{margin-right: 10px}
body.rtl .p-bx68631 .pagelayer-address-icon{margin-left:10px}
.p-bx68631 .pagelayer-address-icon i{color:var(--pagelayer-color-accent);font-size: 18px}
@media (max-width: 768px) and (min-width: 501px){.p-bx68631 .pagelayer-address *, .p-bx68631 .pagelayer-address{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-bx68631 .pagelayer-address *, .p-bx68631 .pagelayer-address{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-address-holder">
<span class="pagelayer-address-icon"><i class="fas fa-map-marker-alt"></i></span>
<span class="pagelayer-address">marrakech-Safi , Maroc</span>
</div></div>
<div pagelayer-id="e2h1536" class="p-e2h1536 pagelayer-email">
<style pagelayer-style-id="e2h1536">.p-e2h1536 .pagelayer-email *, .p-e2h1536 .pagelayer-email{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-e2h1536 .pagelayer-email-holder{justify-content: flex-start}
body:not(.rtl) .p-e2h1536 .pagelayer-email-icon{margin-right: 10px}
body.rtl .p-e2h1536 .pagelayer-email-icon{margin-left:10px}
.p-e2h1536 .pagelayer-email-icon i{color:var(--pagelayer-color-accent);font-size: 15px}
@media (max-width: 768px) and (min-width: 501px){.p-e2h1536 .pagelayer-email *, .p-e2h1536 .pagelayer-email{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-e2h1536 .pagelayer-email *, .p-e2h1536 .pagelayer-email{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-email-holder">
<span class="pagelayer-email-icon"><i class="fas fa-envelope"></i></span>
<span class="pagelayer-email">admin@seomorocco.com</span>
</div>
</div>
<div pagelayer-id="aml9447" class="p-aml9447 pagelayer-phone">
<style pagelayer-style-id="aml9447">.p-aml9447 .pagelayer-phone *, .p-aml9447 .pagelayer-phone{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
body:not(.rtl) .p-aml9447 .pagelayer-phone-icon{margin-right: 10px}
body.rtl .p-aml9447 .pagelayer-phone-icon{margin-left:10px}
.p-aml9447 .pagelayer-phone-icon i{color:var(--pagelayer-color-accent);font-size: 15px}
@media (max-width: 768px) and (min-width: 501px){.p-aml9447 .pagelayer-phone *, .p-aml9447 .pagelayer-phone{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-aml9447 .pagelayer-phone *, .p-aml9447 .pagelayer-phone{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-phone-holder">
<span class="pagelayer-phone-icon"><i class="fas fa-phone-alt"></i></span>
<span class="pagelayer-phone">0670991937</span>
</div></div>
</div></div>
<div pagelayer-id="xhq3797" class="p-xhq3797 pagelayer-col">
<style pagelayer-style-id="xhq3797">.p-xhq3797 .pagelayer-col-holder > div:not(:last-child){margin-bottom: 15px}
.pagelayer-row-holder .p-xhq3797{width: 25%}
.p-xhq3797 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
@media (max-width: 768px) and (min-width: 501px){.pagelayer-row-holder .p-xhq3797{width: 100%}
}
@media (max-width: 500px){.pagelayer-row-holder .p-xhq3797{width: 100%}
}
</style>
<div class="pagelayer-col-holder">
<div pagelayer-id="zzn9208" class="p-zzn9208 pagelayer-heading">
<style pagelayer-style-id="zzn9208">.p-zzn9208 .pagelayer-heading-holder *{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-zzn9208 .pagelayer-heading-holder{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-accent-font-family) !important; font-size: 28px !important; font-style: !important; font-weight: var(--pagelayer-font-accent-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
@media (max-width: 768px) and (min-width: 501px){.p-zzn9208 .pagelayer-heading-holder *{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-zzn9208 .pagelayer-heading-holder{font-family: !important; font-size: 25px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-zzn9208 .pagelayer-heading-holder *{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-zzn9208 .pagelayer-heading-holder{font-family: !important; font-size: 22px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-heading-holder"><h4>Inscrivez-vous à notre newsletter</h4></div>
</div>
<div pagelayer-id="hv31134" class="p-hv31134 pagelayer-heading">
<style pagelayer-style-id="hv31134">.p-hv31134 .pagelayer-heading-holder *{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family) !important; font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-hv31134 .pagelayer-heading-holder{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family) !important; font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
@media (max-width: 768px) and (min-width: 501px){.p-hv31134 .pagelayer-heading-holder *{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-hv31134 .pagelayer-heading-holder{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-hv31134 .pagelayer-heading-holder *{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-hv31134 .pagelayer-heading-holder{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-heading-holder"><p>Recevez les dernières nouvelles et conseils SEO directement dans votre boîte mail.
</p></div>
</div>
<div pagelayer-id="vrd6052" class="p-vrd6052 pagelayer-contact">
<style pagelayer-style-id="vrd6052">.p-vrd6052 .pagelayer-contact-form{text-align: left}
.p-vrd6052 label{padding-top:px; padding-right:px; padding-bottom:10px; padding-left:px}
.p-vrd6052 ::placeholder{color: var(--pagelayer-color-text);font-family: var(--pagelayer-font-text-font-family) !important; font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 select, .p-vrd6052 input,.p-vrd6052 textarea{font-family: var(--pagelayer-font-text-font-family) !important; font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 input, .p-vrd6052 select, .p-vrd6052 textarea{padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px;-webkit-transition: all 400ms; transition: all 400ms}
.p-vrd6052 input[type="checkbox"] + label:before, .p-vrd6052 input[type="radio"]{height:10px; min-height:10px; width:10px}
.p-vrd6052 .pagelayer-btn-text{font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 .pagelayer-btn-holder{font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important;padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;background-color: var(--pagelayer-color-primary);color: var(--pagelayer-color-accent);-webkit-transition: all 400ms !important; transition: all 400ms !important}
.p-vrd6052 pagelayer-contact-submit-holder {display:flex;}
@media (max-width: 768px) and (min-width: 501px){.p-vrd6052 ::placeholder{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 select, .p-vrd6052 input,.p-vrd6052 textarea{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 .pagelayer-btn-text{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 .pagelayer-btn-holder{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-vrd6052 ::placeholder{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 select, .p-vrd6052 input,.p-vrd6052 textarea{font-family: !important; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 .pagelayer-btn-text{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-vrd6052 .pagelayer-btn-holder{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-contact-form-div pagelayer-contact-form-holder">
<div class="pagelayer-message-box pagelayer-message-top"></div>
<form class="pagelayer-contact-form" id="footer-form" name="Footer-form" onsubmit="return pagelayer_contact_submit(this, event)" method="POST">
<div class="pagelayer-contact-holder">
<div pagelayer-id="v2x4152" class="p-v2x4152 pagelayer-contact_item">
<style pagelayer-style-id="v2x4152">.p-v2x4152{width:100%;padding-top:px; padding-right:px; padding-bottom:10px; padding-left:px}
</style><input type="text" required="required" placeholder="Adresse Email" name="email" /></div>
</div>
<input type="hidden" name="cfa-pagelayer-id" />
<input type="hidden" name="cfa-post-id" value="64" />
<input type="hidden" name="cfa-custom-template" value="true" />
<div class="pagelayer-contact-submit-holder">
<button type="submit" form="footer-form" class="pagelayer-contact-submit-btn pagelayer-btn-holder pagelayer-ele-link pagelayer-btn-custom pagelayer-btn-custom {{icon_position}}">
<i class="fa fa-circle-o-notch fa-spin" style="display:none;margin-right:5px;"></i>
<span class="pagelayer-btn-text">S'inscrire</span>
</button>
</div>
</form>
<div class="pagelayer-message-box pagelayer-message-bottom"></div>
</div></div>
</div></div>
</div></div>
<div pagelayer-id="lky6119" class="p-lky6119 pagelayer-row pagelayer-row-stretch-auto pagelayer-height-default">
<style pagelayer-style-id="lky6119">.p-lky6119 .pagelayer-col-holder{padding: 10px}
.p-lky6119 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
.p-lky6119 .pagelayer-svg-top .pagelayer-shape-fill{fill:#227bc3}
.p-lky6119 .pagelayer-row-svg .pagelayer-svg-top{width:100%;height:100px}
.p-lky6119 .pagelayer-svg-bottom .pagelayer-shape-fill{fill:#e44993}
.p-lky6119 .pagelayer-row-svg .pagelayer-svg-bottom{width:100%;height:100px}
.p-lky6119{background: #000000;padding-top: 0px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px;border-style: solid;border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;border-color: rgba(203,199,199,0.56)}
</style>
<div class="pagelayer-row-holder pagelayer-row pagelayer-auto pagelayer-width-auto">
<div pagelayer-id="tx95996" class="p-tx95996 pagelayer-col pagelayer-col-4">
<style pagelayer-style-id="tx95996">.p-tx95996 .pagelayer-col-holder > div:not(:last-child){margin-bottom: 15px}
.p-tx95996 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
</style>
<div class="pagelayer-col-holder">
<div pagelayer-id="ato1202" class="p-ato1202 pagelayer-wp_title">
<style pagelayer-style-id="ato1202">.p-ato1202 .pagelayer-wp-title-heading{font-family: var(--pagelayer-font-primary-font-family); font-size: var(--pagelayer-font-primary-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-primary-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important;color:var(--pagelayer-color-primary);text-align:left;padding: 0px 0px 0px 0px}
@media (max-width: 768px) and (min-width: 501px){.p-ato1202 .pagelayer-wp-title-heading{font-family: ; font-size: var(--pagelayer-font-primary-font-size) !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
@media (max-width: 500px){.p-ato1202 .pagelayer-wp-title-heading{font-family: ; font-size: var(--pagelayer-font-primary-font-size) !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
}
</style><div class="pagelayer-wp-title-content">
<div class="pagelayer-wp-title-section">
<a href="https://seomorocco.com" class="pagelayer-wp-title-link pagelayer-ele-link">
<div class="pagelayer-wp-title-holder">
<div class="pagelayer-wp-title-heading">SEO MOROCCO</div>
</div>
</a>
</div>
<div></div></div></div>
</div></div>
<div pagelayer-id="mi41032" class="p-mi41032 pagelayer-col pagelayer-col-4">
<style pagelayer-style-id="mi41032">.p-mi41032{align-content: center !important}
.p-mi41032 .pagelayer-col-holder > div:not(:last-child){margin-bottom: 15px}
.p-mi41032 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
</style>
<div class="pagelayer-col-holder">
<div pagelayer-id="5eb1967" class="p-5eb1967 pagelayer-copyright">
<style pagelayer-style-id="5eb1967">.p-5eb1967 .pagelayer-copyright *, .p-5eb1967 .pagelayer-copyright{color:var(--pagelayer-color-accent);font-family: var(--pagelayer-font-text-font-family); font-size: var(--pagelayer-font-text-font-size) !important; font-style: !important; font-weight: var(--pagelayer-font-text-font-weight) !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: var(--pagelayer-font-text-line-height) !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-5eb1967 .pagelayer-copyright{text-align: center}
@media (max-width: 768px) and (min-width: 501px){.p-5eb1967 .pagelayer-copyright *, .p-5eb1967 .pagelayer-copyright{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-5eb1967 .pagelayer-copyright{text-align: left}
}
@media (max-width: 500px){.p-5eb1967 .pagelayer-copyright *, .p-5eb1967 .pagelayer-copyright{font-family: ; font-size: px !important; font-style: !important; font-weight: !important; font-variant: !important; text-decoration-line: !important; text-decoration-style: !important; line-height: em !important; text-transform: !important; letter-spacing: px !important; word-spacing: px !important}
.p-5eb1967 .pagelayer-copyright{text-align: left}
}
</style><div class="pagelayer-copyright">
<a href="https://seomorocco.com">
© 2026 SEO MOROCCO
</a>
</div></div>
</div></div>
<div pagelayer-id="zro9929" class="p-zro9929 pagelayer-col pagelayer-col-4">
<style pagelayer-style-id="zro9929">.p-zro9929 .pagelayer-col-holder > div:not(:last-child){margin-bottom: 15px}
.p-zro9929 > .pagelayer-background-overlay{-webkit-transition: all 400ms !important; transition: all 400ms !important}
</style>
<div class="pagelayer-col-holder">
<div pagelayer-id="q7y7164" class="p-q7y7164 pagelayer-social_grp pagelayer-social-shape-circle">
<style pagelayer-style-id="q7y7164">.p-q7y7164 i{height:1em; width:1em; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%)}
.p-q7y7164 .pagelayer-icon-holder{position: relative; min-height: 1em; min-width: 1em;padding: calc(0.5em + 10px);font-size: 18px;background-color: var(--pagelayer-color-secondary) !important;border-style: solid;border-color: rgba(254,254,254,0.73);border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px;-webkit-transition: all 400ms; transition: all 400ms}
.p-q7y7164{text-align: right}
.p-q7y7164 > div{display: inline-block}
.p-q7y7164 .pagelayer-social{padding: 5px}
.p-q7y7164 .pagelayer-social-fa{font-size: 18px;color: var(--pagelayer-color-accent) !important;-webkit-transition: all 400ms; transition: all 400ms}
.p-q7y7164 .pagelayer-icon-holder:hover .pagelayer-social-fa{color: var(--pagelayer-color-accent) !important}
.p-q7y7164 .pagelayer-icon-holder:hover{border-style: solid;border-color: var(--pagelayer-color-accent);border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px}
@media (max-width: 768px) and (min-width: 501px){.p-q7y7164{text-align: left}
}
@media (max-width: 500px){.p-q7y7164{text-align: left}
}
</style>
<div pagelayer-id="hc63350" class="p-hc63350 pagelayer-social">
<div class="pagelayer-icon-holder pagelayer-facebook-f" data-icon="fab fa-facebook-f">
<i class="pagelayer-social-fa fab fa-facebook-f"></i>
</div></div>
<div pagelayer-id="zi61431" class="p-zi61431 pagelayer-social">
<div class="pagelayer-icon-holder pagelayer-linkedin-in" data-icon="fab fa-linkedin-in">
<i class="pagelayer-social-fa fab fa-linkedin-in"></i>
</div></div>
<div pagelayer-id="0no3299" class="p-0no3299 pagelayer-social">
<div class="pagelayer-icon-holder pagelayer-twitter" data-icon="fab fa-twitter">
<i class="pagelayer-social-fa fab fa-twitter"></i>
</div></div>
</div>
</div></div>
</div></div>
</footer><link rel="preload" href="https://fonts.googleapis.com/css?family=Heebo%3A400%2C600" as="fetch" crossorigin="anonymous"><script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/popularfx/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="independent-analytics-script" >
// Do not change this comment line otherwise Speed Optimizer won't be able to detect this script
(function () {
function sendRequest(url, body) {
if(!window.fetch) {
const xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(body))
return
}
const request = fetch(url, {
method: 'POST',
body: JSON.stringify(body),
keepalive: true,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
}
const calculateParentDistance = (child, parent) => {
let count = 0;
let currentElement = child;
// Traverse up the DOM tree until we reach parent or the top of the DOM
while (currentElement && currentElement !== parent) {
currentElement = currentElement.parentNode;
count++;
}
// If parent was not found in the hierarchy, return -1
if (!currentElement) {
return -1; // Indicates parent is not an ancestor of element
}
return count; // Number of layers between element and parent
}
const isMatchingClass = (linkRule, href, classes, ids) => {
return classes.includes(linkRule.value)
}
const isMatchingId = (linkRule, href, classes, ids) => {
return ids.includes(linkRule.value)
}
const isMatchingDomain = (linkRule, href, classes, ids) => {
if(!URL.canParse(href)) {
return false
}
const url = new URL(href)
const host = url.host
const hostsToMatch = [host]
if(host.startsWith('www.')) {
hostsToMatch.push(host.substring(4))
} else {
hostsToMatch.push('www.' + host)
}
return hostsToMatch.includes(linkRule.value)
}
const isMatchingExtension = (linkRule, href, classes, ids) => {
if(!URL.canParse(href)) {
return false
}
const url = new URL(href)
return url.pathname.endsWith('.' + linkRule.value)
}
const isMatchingSubdirectory = (linkRule, href, classes, ids) => {
if(!URL.canParse(href)) {
return false
}
const url = new URL(href)
return url.pathname.startsWith('/' + linkRule.value + '/')
}
const isMatchingProtocol = (linkRule, href, classes, ids) => {
if(!URL.canParse(href)) {
return false
}
const url = new URL(href)
return url.protocol === linkRule.value + ':'
}
const isMatchingExternal = (linkRule, href, classes, ids) => {
if(!URL.canParse(href) || !URL.canParse(document.location.href)) {
return false
}
const matchingProtocols = ['http:', 'https:']
const siteUrl = new URL(document.location.href)
const linkUrl = new URL(href)
// Links to subdomains will appear to be external matches according to JavaScript,
// but the PHP rules will filter those events out.
return matchingProtocols.includes(linkUrl.protocol) && siteUrl.host !== linkUrl.host
}
const isMatch = (linkRule, href, classes, ids) => {
switch (linkRule.type) {
case 'class':
return isMatchingClass(linkRule, href, classes, ids)
case 'id':
return isMatchingId(linkRule, href, classes, ids)
case 'domain':
return isMatchingDomain(linkRule, href, classes, ids)
case 'extension':
return isMatchingExtension(linkRule, href, classes, ids)
case 'subdirectory':
return isMatchingSubdirectory(linkRule, href, classes, ids)
case 'protocol':
return isMatchingProtocol(linkRule, href, classes, ids)
case 'external':
return isMatchingExternal(linkRule, href, classes, ids)
default:
return false;
}
}
const track = (element) => {
const href = element.href ?? null
const classes = Array.from(element.classList)
const ids = [element.id]
const linkRules = [{"type":"extension","value":"pdf"},{"type":"extension","value":"zip"},{"type":"protocol","value":"mailto"},{"type":"protocol","value":"tel"}]
if(linkRules.length === 0) {
return
}
// For link rules that target an id, we need to allow that id to appear
// in any ancestor up to the 7th ance