Adjust the SERP widget to the Google search results

core-bundle/src/Resources/contao/themes/flexible/main.css

@@ -1635,23 +1635,25 @@ ul.sgallery li {
 	padding:4px 6px;
 	font-family:Arial,sans-serif;
 	font-weight:400;
+	color:#3c4043;
 	border:1px dotted #aaa;
 	border-radius:2px;
 }
 .serp-preview p {
 	margin-bottom:0;
 	line-height:1.3;
 }
+.serp-preview .url {
+	margin-bottom:4px;
+}
 .serp-preview .title {
+	margin-bottom:2px;
 	font-size:18px;
 	color:#1a0dab;
+	line-height:1;
 }
-.serp-preview .url {
-	color:#006621;
-}
-.serp-preview .description {
-	margin-top:2px;
-	color:#545454;
+.serp-preview .description:not(:empty) {
+	margin-top:3px;
 }
 
 /* Ajax box */

core-bundle/src/Resources/contao/widgets/SerpPreview.php

@@ -44,16 +44,18 @@ public function generate()
 
 		// Get the URL with a %s placeholder for the alias or ID
 		$url = $this->getUrl($model);
-		list($baseUrl, $urlSuffix) = explode('%s', $url);
+
+		list($baseUrl) = explode('%s', $url);
+		$trail = implode(' › ', $this->convertUrlToItems($baseUrl));
 
 		// Use the base URL for the index page
 		if ($model instanceof PageModel && $alias == 'index')
 		{
-			$url = $baseUrl;
+			$url = $trail;
 		}
 		else
 		{
-			$url = sprintf($url, $alias ?: $model->id);
+			$url = implode(' › ', $this->convertUrlToItems($baseUrl . ($alias ?: $model->id)));
 		}
 
 		// Get the input field suffix (edit multiple mode)
@@ -67,16 +69,15 @@ public function generate()
 
 		return <<<EOT
 <div class="serp-preview">
-  <p id="serp_title_$id" class="title">$title</p>
   <p id="serp_url_$id" class="url">$url</p>
+  <p id="serp_title_$id" class="title">$title</p>
   <p id="serp_description_$id" class="description">$description</p>
 </div>
 <script>
   window.addEvent('domready', function() {
     new Contao.SerpPreview({
       id: '$id',
-      baseUrl: '$baseUrl',
-      urlSuffix: '$urlSuffix',
+      trail: '$trail',
       titleField: '$titleField',
       titleFallbackField: '$titleFallbackField',
       aliasField: '$aliasField',
@@ -202,4 +203,17 @@ private function getAliasField($suffix)
 
 		return 'ctrl_' . $this->aliasField . $suffix;
 	}
+
+	private function convertUrlToItems($url): array
+	{
+		$chunks = parse_url($url);
+		$steps = array_filter(explode('/', $chunks['path']));
+
+		if (System::getContainer()->getParameter('contao.prepend_locale'))
+		{
+			array_shift($steps);
+		}
+
+		return array_merge(array($chunks['host']), $steps);
+	}
 }

core-bundle/src/Resources/public/mootao.js

@@ -389,8 +389,7 @@ Contao.SerpPreview = new Class(
 {
 	options: {
 		id: 0,
-		baseUrl: null,
-		urlSuffix: null,
+		trail: null,
 		titleField: null,
 		titleFallbackField: null,
 		aliasField: null,
@@ -426,8 +425,7 @@ Contao.SerpPreview = new Class(
 			aliasField = $(this.options.aliasField),
 			descriptionField = $(this.options.descriptionField),
 			descriptionFallbackField = $(this.options.descriptionFallbackField),
-			a = new Element('a', { 'href': this.options.baseUrl }),
-			indexEmpty = (a.pathname == '/' || a.pathname.match(/^\/[a-z]{2}(-[A-Z]{2})?\/$/));
+			indexEmpty = this.options.trail.indexOf('›') === -1;
 
 		titleField && titleField.addEvent('input', function() {
 			if (titleField.value) {
@@ -446,9 +444,9 @@ Contao.SerpPreview = new Class(
 
 		aliasField && aliasField.addEvent('input', function() {
 			if (aliasField.value == 'index' && indexEmpty) {
-				serpUrl.set('text', this.options.baseUrl);
+				serpUrl.set('text', this.options.trail);
 			} else {
-				serpUrl.set('text', this.options.baseUrl + (aliasField.value || this.options.id) + this.options.urlSuffix);
+				serpUrl.set('text', this.options.trail + ' › ' + (aliasField.value || this.options.id).replace(/\//g, ' › '));
 			}
 		}.bind(this));