As an experienced website operation expert, and deeply familiar with the various functions and content operation strategies of AnQiCMS, I am more than willing to provide you with a detailed analysis and practical suggestions on the topic of 'the placement position of the JS automatic submission code for headlines'.In the practice of website optimization and content promotion, the placement of JavaScript code seems trivial, but it actually has an indispensable impact on website performance and search engine crawling efficiency.

洞悉安企CMS中JS自动提交代码的**归宿：Head还是Body结束前？ (English translation: Understand where the JS automatic submission code in AnQi CMS ends: in the Head or before the Body ends?)

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>area, or</body>Label must be closed before reaching **effect? This is not a simple yes-or-no question, it concerns the balance of user experience, search engine crawling efficiency, and overall website performance.

Let's first understand how the security CMS handles this JS code.AutoCMS provides a centralized management entry, allowing you to directly paste these JS codes in the background (link push function).{{- pluginJsCode|safe }}Tags (seetag-tongji.mdThese codes should be unified output to the template. Therefore, the core of the problem becomes: As a template designer, we should place this tag at which position in the template?{{- pluginJsCode|safe }}Where should this tag be placed in the template?

1. Place JS code in<head>consideration of

Place JS code in<head>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 crawlers will first parse the HTML header when crawling pages. If the JS code is located<head>In theory, crawlers can "see" and execute these submission codes earlier, thus potentially speeding up the submission speed of new content.
    • The necessity of certain key scripts:Some scripts that are crucial for the page rendering (such as font loading, preloading of critical CSS, or certain analysis scripts that need to take effect immediately) must be placed<head>to ensure their function.
  • Disadvantages:
    • Blocking render:The browser pauses the parsing of HTML and the construction of the DOM when encountering external JS files, until the JS file is downloaded, parsed, and executed.This means that if the amount of JavaScript code submitted automatically is large, or if the loading of its external resources is slow, it will severely delay the first contentful paint (First Contentful Paint, FCP) and the largest contentful paint (Largest Contentful Paint, LCP) of the page, giving users the perception of a 'white screen' or slow loading, which damages the user experience.The Anqi CMS emphasizes "improving user experience and search engine friendliness
    • Non-critical:The core function of auto submission of JavaScript is to notify search engines, which has no direct relationship with the interaction of the user interface or the presentation of page content. Therefore, it is not an essential script for blocking rendering.

2. Place JS code in</body>Considerations before ending

Place JS code in</body>Before the tag ends, it is the recommended non-critical JS loading method in modern frontend 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 occur after the content is displayed, greatly enhancing the user experience.AnQiCMS 项目优势.mdIt is crucial to ensure 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 a bit slowly, the user will not feel the page to be laggy or blank, enhancing the perception performance of the website.
    • Search engine friendliness:Although JavaScript code may execute slightly later, search engine crawlers will usually completely crawl and parse the entire HTML document, including<body>The JS before the end. They have enough patience to wait for the page content to load and execute these submission scripts.
  • Disadvantages:
    • Deferred execution:The execution of JS code will indeed be slower than placing it in<head>Some time later.For scenarios that require the ultimate speed of submission, this may theoretically have a negligible impact, but for automated submissions of JavaScript, this minor delay is usually negligible.

Comprehensive Analysis and Practice

Considering the nature of automatic submission of codes by headlines and JS like - they do not directly affect the visual presentation or user interaction of the page, their main purpose is to notify search engines - therefore, to{{- pluginJsCode|safe }}Label placement in the template</body>It is more recommended and safe to do so before the label ends.

The benefits of doing so are evident: You ensure that the search engine can receive the submitted information normally while optimizing the website's loading speed and user experience to the maximum extent.This fully conforms to the project positioning of Anqi CMS in terms of "high concurrency

Specific operation suggestions:

In your security CMS template (usuallytemplatethe directory.base.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 executed effectively by search engines while avoiding unnecessary page rendering blocks, achieving a balance between user experience and search engine optimization.

Common Questions (FAQ)

  1. 问：If I submit JS code to the top stories feature<head>What specific consequences may occur in the region?

    • Answer:In theory, the search engine crawler 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, leading to users seeing a blank screen or page elements appearing one by one in a short period of time, thus damaging the first content rendering speed and the overall user experience.<head>.

  2. 问：Security CMS backend other JS code (such as statistics code, Markdown rendering JS) should also be placed</body>before finishing?

    • Answer:This needs to be analyzed specifically. The document mentions (help-markdown.md），like MathJax and Mermaid such Markdown rendering JS, usually placed<head>in, and withasyncProperties, because they need to be initialized or configured before page content loading, which belong to the necessary scripts for page functionality. And like Google Analytics statistical code, although it is often placed<head>Now the mainstream approach also tends to be asynchronous loading or deferred.<body>Before ending, to reduce the impact on page performance. For pure "notification" type JS submitted to search engines, the weight of performance optimization considerations is greater, therefore it is placed</body>End before is a safer choice.

  3. Question: Does the Anqi CMS support placing different JS submission codes on different pages?

    • Answer:The “Link Push” feature of the “AnQi CMS Back-end” is usually a site-wide setting, meaning that the JS code you enter there will be processed through{{- pluginJsCode|safe }}Labels are output to all pages. If you do indeed need to customize the JS submission code for specific pages or specific content types, you may need to modify the template files, combined with the security CMS conditional judgment tags such as{% if ... %}）to determine the current page type (such asarchive.Id/category.Id）Output different JS code, which belongs to the advanced customization category and requires template development experience.However, the submitted code provided by platform owners such as Toutiao is usually universal for the entire site.