/Top headlines JS auto-submit code should be placed at which position in the template (head, before body end) effect**??
As an experienced website operation expert, I am deeply familiar with the various functions and content operation strategies of AnQiCMS (AnQiCMS), and I am willing to provide you with a detailed analysis and practical suggestions on the topic of 'The placement position of JS automatic submission code in headlines'.In the practice of website optimization and content promotion, the placement of JavaScript code seems minor, but it has a significant impact on website performance and search engine crawling efficiency.
Determine the destination of the JS automatic submission code in AnQi CMS: before the Head or at the end of the Body?
In the background management of Anqi CMS, we often encounter scenarios where we need to integrate third-party JS code, such as the JS automatic submission code mentioned in the document for platforms like 360, Toutiao, etc. (See details inhelp-plugin-push.md）。These codes are intended to help website content be discovered and indexed by search engines more quickly. However, where should these seemingly simple JS snippets be placed in the template?<head>Or</body>Before the tag ends, the effect can be achieved. This is not a simple yes-or-no question, it concerns the user experience, search engine crawling efficiency, and the balance of the overall website performance.
First, let's understand how AnQi CMS handles this type of JS code.AnQi CMS provides a centralized management entry for you to directly paste these JS codes in the background (link push function).This means, as a website operator, you do not need to directly modify the template file, but through the backend configuration, AnQi CMS will use built-in{{- pluginJsCode|safe }}Tags (seetag-tongji.md）These codes should be unified output to the template. Therefore, the core issue becomes: As a template designer, we should put{{- pluginJsCode|safe }}this tag in which position in the template?
1. Place the JS code in<head>consideration of the region
Place the JS code in<head>An area, meaning it will be loaded and executed at the beginning of page rendering. For the automatic submission JS of search engines, this seems to be an intuitive choice:
- Advantages:
- Early execution:Search engine spiders will first parse the HTML header when crawling pages. If the JS code is located
<head>In theory, the crawler can see and execute these submission codes earlier, which may speed up the submission of new content. - The necessity of some key scripts:Scripts that are crucial for the presentation of the page (such as font loading, preloading of critical CSS, or certain analysis scripts that need to take effect immediately) must be placed
<head>in order to ensure their function.
- Early execution:Search engine spiders will first parse the HTML header when crawling pages. If the JS code is located
- Disadvantages:
- Blocking rendering:The browser pauses the parsing of HTML and the building of the DOM when it encounters an external JS file, until the JS file is downloaded, parsed, and executed.This means that if the amount of auto-submitted JS code is large, or its dependent external resources load slowly, it will seriously delay the first content drawing (First Contentful Paint, FCP) and the largest content drawing (Largest Contentful Paint, LCP) of the page, bringing users the perception of 'white screen' or slow loading, and damaging the user experience.AnQi CMS emphasizes in the project advantages of "enhancing user experience and search engine friendliness", blocking rendering is obviously contradictory to "enhancing user experience".
- Non-critical:The core function of automatic submission JS is to notify search engines, it has no direct relationship with the interaction of the user interface or the presentation of page content. Therefore, it is not a necessary script that blocks rendering.
2. Place the JS code in</body>Consideration before the end
Place the JS code in</body>Before the tag ends, it is the recommended non-critical JS loading method in modern front-end development:
- Advantages:
- Non-blocking rendering:The page content (HTML and CSS) is parsed and rendered first, allowing users to see the main content of the page faster.The download and execution of JS code is performed after the content is displayed, greatly enhancing the user experience.For an enterprise CMS that focuses on "high-performance architecture" and "static caching and SEO optimization" systems (
AnQiCMS 项目优势.mdIt is crucial to ensure the page loading speed and user experience. - Better user experience:The main content of the page appears quickly to the user, even if the JS loads slowly, the user will not feel the page is stuck or blank, enhancing the perception performance of the website.
- Search engine friendliness:Although JavaScript code execution is slightly late, search engine spiders will usually fully crawl and parse the entire HTML document, including
<body>JavaScript before the end. They have enough patience to wait for the page content to load and execute these submission scripts.
- Non-blocking rendering:The page content (HTML and CSS) is parsed and rendered first, allowing users to see the main content of the page faster.The download and execution of JS code is performed after the content is displayed, greatly enhancing the user experience.For an enterprise CMS that focuses on "high-performance architecture" and "static caching and SEO optimization" systems (
- Disadvantages:
- Deferred execution:The execution of JavaScript code will indeed be placed
<head>A bit later. For scenarios that require extreme speed of submission, this theoretically may have a slight impact, but for automatic submission of JS, this minor delay is usually negligible.
- Deferred execution:The execution of JavaScript code will indeed be placed
Comprehensive analysis and practice
Given the nature of JS auto-submitting code on headlines and similar platforms——they do not directly affect the visual presentation or user interaction of the page, their primary purpose is to send notifications to search engines——therefore,to{{- pluginJsCode|safe }}Label placement in the template</body>It is more recommended and secure to place the label before the end of the tag
The benefits of doing this are obvious: you ensure that the search engine can receive the submitted information normally while optimizing the website's loading speed and user experience as much as possible.This fully meets the project positioning of Anqi CMS for 'high concurrency', 'efficiency', 'user experience', and 'SEO optimization'.
Specific operation suggestions:
In your Anqi CMS template (usuallytemplateUnder the directorybase.htmlorfooter.htmletc., public files), find</body>Label, then{{- pluginJsCode|safe }}Code adjacent</body>Place above the label.
{# 其他脚部JS或内容 #}
{{- pluginJsCode|safe }} {# 放置在这里，紧邻</body>结束标签 #}
</body>
</html>
This placement method ensures that the JS submitted code can be effectively executed by search engines and avoids unnecessary page rendering blocking, achieving a balance between user experience and search engine optimization.
Frequently Asked Questions (FAQ)
Ask: If I put the JS submission code of the top news section
<head>What specific consequences will there be?- Answer:In theory, search engine crawlers will encounter and attempt to execute your submitted code earlier.However, since these JS are usually external scripts, the browser may pause the rendering of page content when loading them, which may cause the user to see a blank screen or elements appearing one by one in a short period of time, thus damaging the first content rendering speed and overall user experience.Unless you have clear data indicating that it must be executed early and the impact on user experience is acceptable, it is not recommended to place non-critical JS inside
<head>.
- Answer:In theory, search engine crawlers will encounter and attempt to execute your submitted code earlier.However, since these JS are usually external scripts, the browser may pause the rendering of page content when loading them, which may cause the user to see a blank screen or elements appearing one by one in a short period of time, thus damaging the first content rendering speed and overall user experience.Unless you have clear data indicating that it must be executed early and the impact on user experience is acceptable, it is not recommended to place non-critical JS inside
Ask: Should other JS code (such as statistics code, Markdown rendering JS) also be placed before
</body>the end?- Answer:This needs to be analyzed specifically. The document mentions that (
help-markdown.md)，like MathJax and Mermaid such Markdown rendering JS, usually placed in<head>withasyncProperties, because they need to be initialized or configured before the page content is loaded, and belong to the necessary scripts of the page functionality. While statistical codes like Google Analytics, although they are often placed<head>Now, the mainstream approach also tends to load asynchronously or defer to<body>Before ending, to reduce the impact on page performance. For pure 'notification' type JS submitted to search engines, the weight of performance optimization consideration is greater, therefore it is placed</body>It is a safer choice before ending.
- Answer:This needs to be analyzed specifically. The document mentions that (
Question: Does Anqi CMS support placing different JS submission codes on different pages?
- Answer:The 'Link Push' feature in the Anqi CMS backend is typically a site-wide setting, meaning that the JS code you enter there will be
{{- pluginJsCode|safe }}The tag is output to all pages. If you indeed need to customize the JS submission code for a specific page or content type, you may need to modify the template files, combined with the conditional judgment tags of Anqi CMS (such as{% if ... %}）to determine the current page type (such asarchive.Id/category.IdThis output different JS code, but this falls under the category of advanced customization, which requires template development experience.However, the submission code provided by platforms like Toutiao for website owners is usually universal across the entire site.
- Answer:The 'Link Push' feature in the Anqi CMS backend is typically a site-wide setting, meaning that the JS code you enter there will be