How to get google to read subpage title and description?

Questions
1

I load all my products in just one subpage and I want google to index them all with different titles and descriptions.

So I created a sitemap with urls to all my product pages and google crawls all the urls, but it is getting the title and description from my index.html page for all pages that it indexes.

So I wonder if I can load the subpage as a full html page?
With the tags html, head,title,description, body etc?

I tested to load a subpage just like an ordinary html page looking like this.
But it is only loading the “page” div, so the title and description is not indexed by google.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>my title</title>
<meta name="description" content="And here is the description">
</head>
<body>             
<div data-name="omoss" class="page ">
The content....
</div>
</body>
</html>

So how can I load the full html page?
Or how can I get google to index my subpages? How do you do it?
How do I have to set it up, with the routes file, component,pushstate etc?
I really need help here!!

2

Hello . did you manage to solve this problem? how did you implement it?

3

Add class to head tag into index.f7 and inject meta data or Sometime like that using query selector