How to Add Codes in Header Section?
Header code is the section available in Weebly site editor facilitating users to add custom HTML, CSS and JavaScript code in the header section of a page, site or blog. There are many situations users may need to add custom codes between <head>….</head> tags of the page or site. For example, webmaster tools meta tag verification code is to be added in the header code section at site level.
Weebly offers three possibilities to add codes into the header:
- Site header – code inserted here will impact throughout the site. Site level codes can be added under “Settings > SEO > Header Code”.
- Page header – code inserted here will impact the elements on that page. Page level codes can be added under “Pages > Select the page > Advanced > Header Code”
- Blog post header – code inserted here will impact all blog posts. Post level codes can be inserted under “Settings > Blog > Post header code”.
Weebly Header Code Section
There is no possibility of adding code into the header section of individual Weebly posts.
How to Add Codes in Footer Section?
Similar to header code section, Weebly also offers a footer code section facilitating users to add custom HTML, CSS and JavaScript code in the footer section of a page, site or blog. There are many situations users may need to add custom codes before end of the body tag. Adding script in footer section allows to load the page faster and avoid the issues like “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in Google PageSpeed Insights tool. This can also help the code not conflicting with other content on the page. For example, Google Analytics tracking code is to be added in the footer code section at site level.
Weebly offers three possibilities to add codes into the footer:
- Site footer – code inserted here will impact throughout the site. Site level codes can be added under “Settings > SEO > Footer Code”.
- Page footer – code inserted here will impact the elements on that page. page level codes can be added under “Pages > Select the page > Advanced > Footer Code”
- Blog post footer – code inserted here will impact all blog posts. Post level codes can be inserted under “Settings > Blog > Post footer code”.
Weebly Footer Code Section
It is recommended to add CSS in the header code section and scripts under footer code section for fast loading of the page.
Why Should You Use Header and Footer Code Sections?
There are many situations you need to add codes into the header and footer sections of site or page.
- Verification meta tag for webmaster tools, Alexa, Pinterest, etc.
- Analytics tracking code for getting traffic statistics.
- Linking external style sheets like font awesome, bootstrap, etc.
- Adding jQuery, Ajax and other scripts from CDN sites for faster delivery.
Sometimes you may need to try adding the code with header and footer sections alternatively to achieve the function. For example, Weebly recommends to add Google Analytics code in footer section but Google recommends to add it in header section.
Using Embed Code Element
Embed Code element is used to insert codes from third parties in order to add new features on Weebly site. Generally embed code element is used along with header and footer code sections. Following are the guidelines when using embed code element:
- Add HTML code on the content area using “Embed Code” element.
- Add CSS code under the “Header Code” section.
- Add script code under the “Footer Code” section.
4 Comments
Leave your reply.