I'm developing a Wordpress website with a ReactJS SPA theme and I'm attempting to collect the necessary SEO head tags from the Yoast SEO plugin during an WP API AJAX call. The reason I am using Yoast is because it provides seo values (ie image, description, title, etc) even if these values are not explicitly set on the post.
In a non SPA wordpress theme, Yoast echoes the seo tags during the wpseo_head() hook which is triggered by the call to wp_head() in header.php. Since I am implementing an SPA theme, I need to update the seo tags each time the url changes but there will be no page reload. I am attempting to capture these tags within a WP API call but for some reason, inside the API call the wpseo_head hook does not echo the same tags. I ran the following test to confirm the disparity in behavior:
I added a direct call to wpseo_head() in my header.php file just after the opening body tag:
<?php wp_head(); ?>
</head>
<body>
<div id="wpseo_head">
<?php do_action('wpseo_head'); ?>
</div>
And here's the corresponding output:
<div id="wpseo_head" class="baby">
<!-- This site is optimized with the Yoast SEO plugin v7.7.2 - https://yoast.com/wordpress/plugins/seo/ -->
<title>CORRECT PAGE TITLE</title>
<!-- Admin only notice: this page does not show a meta description because it does not have one, either write it for this page specifically or go into the [SEO - Search Appearance] menu and set up a template. -->
<link rel="canonical" href="CORRECT POST URL">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="article">
<meta property="og:title" content="CORRECT POST TITLE">
<meta property="og:description" content="CORRECT DESCRIPTION">
<meta property="og:url" content="CORRECT URL">
<meta property="og:site_name" content="CORRECT SITE NAME">
<meta property="article:publisher" content="CORRECT FACEBOOK URL">
<meta property="og:image" content="CORRECT IMAGE URL">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
<script type="application/ld+json">{/* CORRECT JSON LD */}</script>
</div>
Within my api callback to load the post I capture the output of wpseo_head() and return it.
global $post, $wp_query;
$post = $_post;
$wp_query = new WP_Query(['p' => $_post->ID]);
setup_postdata($post);
ob_start();
do_action('wpseo_head');
$yoast_seo_tags = ob_get_contents();
ob_end_clean();
$yoastSeoTags = stripslashes($yoast_seo_tags);
This is the response from the api call:
<!-- This site is optimized with the Yoast SEO plugin v7.7.2 - https://yoast.com/wordpress/plugins/seo/ -->
<link rel="canonical" href="CORRECT POST URL" />
<script type='application/ld+json'>{/* CORRECT JSON LD */}</script>
Notice that the output of the wpseo_head() call in header.php is complete but the response from the wpseo_head() call in the api callback is missing many fields but does contain correct values. This leads me to believe that while I am correctly setting the post in the api callback, there must be some inherent differences in wordpress behavior in header.php vs in the API callbacks.
1) Can anyone please explain this and how I can successfully grab the output of the wpseo_head() call within an API callback?
2) I have attempted several other ways of grabbing the yoast SEO tags and have failed, but I suspect there is a better way of doing this so please feel free to suggest alternate methods.
3) Based on how web crawlers currently work today, is it even necessary for me to worry about setting the SEO tags each time the user navigates to a new page? Or is it enough to simply let the SEO tags be set on the INITIAL page load?
I tried to be exhaustive with the above description of the problem, but please let me know if you need more info. Thanks in advance for any advice! I saw some similar posts, but none of the answers led me to a solution. Thanks again
