I have managed to make php read angular routes and update meta tags and title on each request.
After some time I uploaded a new build , this time it was cleaned , but now the angular it doesn't change the title of the document, in Google Chrome for ex, but if I hit view source, i can see all meta tags and title set correctly. This means the meta tags are applied correctly using a curl in php to grab meta informations.
I am trying to understand why my index.php doesn't want to change the title of the document and what I am missing.
.htaccess
DirectoryIndex index.php index.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# Serve files and directories directly if they exist
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Redirect all other requests to index.php
RewriteRule ^ index.php [L]
</IfModule>
# Prevent directory listing
Options -Indexes
# Allow access to static assets
<FilesMatch "\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
And this is my index.php that results from the angular build:
index.php
<?php
$slug = strtok($_SERVER['REQUEST_URI'], '?');
$slug = rtrim($slug, '/');
// Make the API request using cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(['slug' => $slug]));
$response = curl_exec($ch);
curl_close($ch);
// Parse the API response
$meta = json_decode($response, true);
$metaTitle = $meta['title'];
$metaDescription = $meta['description'];
$metaKeywords = $meta['keywords'];
$metaImage = $meta['main_image'];
$metaUrl = $meta['og_url'];
?>
<html lang="en">
<head>
<title><?php echo htmlspecialchars($metaTitle); ?></title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="./assets/icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/svg+xml" href="./assets/icons/favicon.svg">
<link rel="shortcut icon" href="./assets/icons/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png">
<link rel="manifest" href="./assets/icons/site.webmanifest">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="description" content="<?php echo htmlspecialchars($metaDescription); ?>">
<meta name="keywords" content="<?php echo htmlspecialchars($metaKeywords); ?>">
<link rel="canonical" href="<?php echo htmlspecialchars($metaUrl); ?>">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
<meta property="og:url" content="<?php echo htmlspecialchars($metaUrl); ?>">
<meta property="og:image" content="<?php echo htmlspecialchars($metaImage); ?>">
<meta property="og:image:alt" content="<?php echo htmlspecialchars($metaTitle); ?>">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
<!--<meta property="og:image:type" content="image/webp" />-->
<meta name="twitter:description" content="<?php echo htmlspecialchars($metaDescription); ?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo htmlspecialchars($metaTitle); ?>">
<meta name="twitter:image" content="<?php echo htmlspecialchars($metaImage); ?>">
<link rel="preconnect" href="; crossorigin="">
<link rel="preconnect" href=";>
<base href="/">
<link rel="stylesheet" href="styles.543ae2227a562180.css">
</head>
<body>
<app-root></app-root>
<script src="runtime.bf3051b90593455e.js" type="module"></script>
<script src="polyfills.c88ce8d8e8ff1349.js" type="module"></script>
<script src="scripts.91e58680bebedc85.js" defer></script>
<script src="main.be934ab3482f7d6c.js" type="module"></script>
</body>
</html>