I have this fragment:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header-imports">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport"
<!-- Other meta tags -->
<meta content="" name="ZRTHEMES"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/stylesheets/font-awesome.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="assets/stylesheets/styles.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style-links.css}"/>
<link rel="stylesheet" th:href="@{/css/responsive.css}"/>
</head>
</html>
and this:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="common-header" id="header" class="header d-flex align-items-center sticked stikcy-menu">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<img src="assets/images/logo.png" alt="logo">
</a>
<nav id="navbar" class="navbar">
<ul>
<li><a href="/" class="">Home</a></li>
<!--li><a href="services.html" class="">Services</a></li>
<li><a href="portfolio.html" class="">Portfolio</a></li>
<li><a href="testimonials.html" class="">Testimonials</a></li>
<li><a href="team.html" class="">Team</a></li>
<li class="dropdown"><a href="#"><span>Menu</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="packages.html">Pricing</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="privacy-policy.html">Terms & Conditions</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="blog-details.html">Blog Detail Page</a></li>
</ul>
</li-->
<li><a href="/blogs">News</a></li>
</ul>
</nav><!-- .navbar -->
<!--a href="contact.html" class="btn-get-started hide-on-mobile">Get Quotes</a-->
<button id="darkmode-button"><i class="bi bi-moon-fill"></i></button>
<i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
<i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
</div>
</header>
</html>
and this:
<!DOCTYPE html>
<html lang="zxx">
<head th:replace="~{common/headerImports :: common-header-imports}">
<title>title</title>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RWXQZB9MDJ');
</script>
<body>
<header th:replace="~{common/header :: common-header}">
....
</html>
but I only see a white page, nothing is loaded
Whenever you experience problems like this, it makes a lot of sense to check the page source from the browser and see what was actually generated as well as the request's response to see what was received from the server.
Make sure your scripts are inside the head or body, so move this:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RWXQZB9MDJ');
</script>
into where Google instructs you to move, presumably at the end of the head tag (inside of it). Based on the content you have shared it seems you have html embedded into another html and that you have put content outside head and body. Fix those issues.
Furthermore, it's very much possible that some server-side error happened, so you will need to check the status of the request and possibly server logs. You may check your client-side console as well for client-side problems.
And make sure that you embed your fragments properly.
If all the above are double-checked and fix, then it should work.