How to add additional e-Commerce product SEO metadata when the web page content is partially dynamic?

Question

I have some product pages on my e-Commerce website that have variants on them. Each variant has three things that are relevant to this discussion:

1. A SKU that is unique to our business
2. A manufacturer part number (MPN)
3. A URL that correlates to the configuration that is relevant to that SKU/MPN pairing, such that if you visit this URL it will automatically load the selected configuration. URL is something like: www.example.org/product1 ?variant-opt-1=123&variant-opt-2=581 with the bold part getting added based on the selection.

When the page loads for a product that is structured with variants, the page is used as a more general landing area with the ability to customize the product configuration using some drop downs on the side. That means that if a crawler visited the page, it wouldn't see those SKU/MPN pairings.

When changing these drop downs a different SKU/MPN pairing will be loaded via an AJAX callback. There could feasibly be hundreds of variants that all have a SKU/MPN pairing. What I'm wondering is, how can I properly add these pairings to my HTML content such that Google/indexers will be able to link queries with those SKUs or MPNs to my site? Ideally I wouldn't have to add all these variants as separate products on my site (which I know would be properly crawled based on some other products structure like this).

Please let me know your suggestions. The e-Commerce site is custom and is not Shopify, etc so I do have a high level of control over the generated HTML.

My current thoughts are:

1. Add all the variant links into my sitemap (I'd have to change how this is currently generated), at least this way if every URL is crawled then it should be able to pull out the SKU and MPN properly.
2. Create some sort of XML data that is loaded into the web page with all three of those fields, something like: <tag sku="SKU-1", mpn="MPN-1", url="/unique?variant=12002148" /> I'm just not sure how to "tell" Google that these are relevant for searches.

Mainly I want the SKU and MPN when searched, to link to this page, and if possible, to the unique URL.

Edit - 2020-04-17: I attempted to fix this by adding all the variant links in my sitemap however it turns out Google doesn't seem to like that. It ignores those links by flagging them as duplicate or canonically ignored.

Answer 1

You can use Javascript to add SEO meta data dynamically and than implanet dunamic rendering of your website this will help google crawl your page easily. visit this site for more info:

https://developers.google.com/search/docs/guides/dynamic-rendering

Answer 2

Ok. It seems that you need to do some customization in the existing code. Go through my answer thoroughly and let me know whether it helps.

Following are the most important things that you need to consider or in some cases reconsider in order to implement search engine submissions.

1. Sitemaps: Sitemaps have the most important role in Search engine submission. To ensure to have an updated sitemap always especially with your custom URL arguments, you need to write a function or a trigger to update sitemap.xml upon addition of new variant every time. Writing a Cron job or task scheduler might also help. In the case of dynamic URL generation, custom sitemap generation code always helps. I do not recommend using any plugin as it may not fully comply with your URL structure.
2. Google Shopping Listing: I am not having experience with this, but I guess this might be of great help in your case. Very recently Google has allowed the public to submit their products to Google Shopping list. You have to implement Rich Snippets also for the same. I do not have a much deeper idea on this, but it will help you for sure.
3. Linking Google Analytics with Webmaster Tools: In the case of dynamic URLs, this is much recommended to do. Do link your Google Analytics Property with the Google Webmaster Tools property nowadays known as Search Engine Console. Doing so, Analytics will automatically detect the Landing Pages with attributes. So this might help Google for identifying hidden dynamic pages on the website.
4. Use of PWA and AMP: Making use of Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP) helps directly to improve the SEO ranking and URL Tunneling, Filtering and tracking. This point is not the truly part of the solution you require, but you might want to implement it for the betterment.

According to me, making use of JavaScript or any frontend tech for URL submission is NOT recommended. Instead, try to use Server-side middleware for better and reliable results.

Edit: Also, manual URL submission is not a good practice in your scenario.