Live preview of meta tag output (D8)

flyke → changed the visibility of the branch 1539192-live-preview-of to hidden.

I added a new submodule 'metatag_serp_preview' (in branch 1539192-serp-preview) that does this when its enabled.

Thank you for putting this together.

I don't think this would work super well:

• It assumes the Metatag field is called "field_metatags".
• It only works when the form is initially loaded.

I think the correct approach would be either an AJAX callback of some sort, possibly as a response to a button being clicked, or to do it all in JS on the page.

For determining of the current Node has a metatags field, that part of the code is ok and automatically gets the correct fieldname of the node if it has a metatag field.
For altering the metatag form on the node edit form to add a new form item: yes, at this moment I was not sure on how to dynamically get the correct form element key. I just inspected the form and saw that I wanted to add a new form element in $form['field_metatags']['widget'][0]['basic']. Is the form element key 'field_metatags' always the exact same value as the machine name of the metatag field on the node entity ? Because that would be an easy fox then, I do dynamically have the correct node field machine name.

About the Ajax possibility: I thought about it when I created this but it quite frankly seemed too difficult for me. For the most part because you can use tokens in the meta title and description and the JS code needs to handle and convert those. And if you have a token for description that automatically generates text from layoutbuilder blocks on the node, or from paragraphs on the node, I honestly have no Idea of how to handle that via Ajax without saving the page.

But if you really want that, feel free to contribute, it would be very welcoming if you could create a patch or MR for that.

The $form['field_metatags'] variable will always depend upon how it's configured on the site, it should be $form['$metatag_fieldname'].

This is a difficult issue to accomplish, because Drupal's form API is so complex and because there can be so many different possibilities on how the meta tags are configured, that's why there hasn't been a solid implementation of this functionality yet.