The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.I was shown a similar plugin for Wordpress and it had a neat function where the page title, url and meta description were previewed as they would appear in a Google search, styled to look like a Google search result.
In my experience trying to explain to clients how and why to input meta tags, it really helps to have that immediate visual of "Oh, this is how my page is going to look in a Google search"
I wonder if a preview like this could be something added to the Meta tags area of the node editing page? Maybe a preview of a Bing result as well?
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | serp-preview-demo.png | 167.7 KB | flyke |
| #3 | Simple SEO Preview.png | 154.66 KB | simon georges |
| #3 | Real-Time SEO.jpg | 138.04 KB | simon georges |
Issue fork metatag-1539192
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 1539192-serp-preview
changes, plain diff MR !114 - 1539192-live-preview-of compare
Comments
Comment #1
idflood commentedA coworker who use wordpress also showed me this preview thing and I definitely liked the idea. So +1 for this feature (as a submodule eventually).
Comment #1.0
idflood commentedhad html in text that wasn't showing
Comment #2
sirtet+1, or +10...
This is a good example of real time preview:
http://www.sistrix.de/serp-snippet-generator/
Comment #3
simon georges commentedBoth https://www.drupal.org/project/simple_seo_preview & https://www.drupal.org/project/yoast_seo are doing this, and I feel it brings a great value to content editors. I attached a screenshot of both modules so you can see what it displays.
What do you think?
Comment #4
damienmckennaI think there are a number of different previews that could be displayed:
Yes, I think these could be added to Metatag, I'm just not sure of the UX.
Comment #5
simon georges commentedI was thinking the simplest one is the SERP preview (because Twitter needs a preview per card type, and facebook needs an image), but the Search result preview should be hookable, so Schema.org Metatag can adds some information for reviews, events, breadcrumb, and so on.
But a first approach could be to simply add the SERP preview immediatly under Title and Description metatags, considering they are the first two ones to be displayed in the Metatag fieldset.
What other UX were you thinking about? A modal?
Comment #6
damienmckennaComment #8
flyke commentedComment #10
flyke commentedI added a new submodule 'metatag_serp_preview' (in branch 1539192-serp-preview) that does this when its enabled.
Comment #12
flyke commentedComment #13
damienmckennaThank you for putting this together.
I don't think this would work super well:
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.
Comment #14
flyke commentedFor determining if 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.
Comment #15
damienmckennaThe $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.