Search code examples
htmlthymeleafmeta-tags

Thymeleaf functionality on Meta tag

I'm not sure if this could be a known scenario. But I'm confused since I couldn't find any discussions on this.

Raising my clarification. Does thymeleaf based html page allow meta tags within its head?

I've this code:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <title>Data Services Platform Support</title>
      <div th:replace="fragments/header :: header-css" />
      <script
         src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
      <link rel="stylesheet"
         href="https://fonts.googleapis.com/css?family=Open+Sans" />
      <link rel="stylesheet" type="text/css"
         href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
      <link rel="stylesheet" th:href="@{/css/main.css}"
         href="../../css/main.css" />
      <script
         src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script
         src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>
   <body>
      ...
   </body>
</html>

which displays the page I'm looking for.

But when I tried adding the meta tag to upgrade my page with few functionalities(which require a meta tag), Whitelabel Error Page is all what I get.

My modified code:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <title>Data Services Platform Support</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <div th:replace="fragments/header :: header-css" />
      <script
         src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
      <link rel="stylesheet"
         href="https://fonts.googleapis.com/css?family=Open+Sans" />
      <link rel="stylesheet" type="text/css"
         href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
      <link rel="stylesheet" th:href="@{/css/main.css}"
         href="../../css/main.css" />
      <script
         src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script
         src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>
   <body>
      ...
   </body>
</html>

Is there something I need to consider? Please help.

Solution

  • Yes, Thymeleaf supports all tags. If you are using an old version of thymeleaf, it may be likely that it needs to be valid xhtml. So your meta tags should looks like this:

    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

    (with the ending slash). The server log error message will contain the details of the error.