{% set titleArray = seomatic.title.get('title').renderAttributes() %}
{% set descriptionArray = seomatic.tag.get('description').renderAttributes() %}
{% set canonicalArray = seomatic.link.get('canonical').renderAttributes() %}

{% set showSeoTitleNames = showSeoTitleNames ?? true %}
<div class="preview-column">
    <div class="displaypreview" style="{{ displayPreviewInlineStyles ?? '' }}">
        {% if showSeoTitleNames %}
            <h4 class="metadata-title-separator"><span>Google</span></h4>
        {% endif %}
        <div class="card-seo-google">
            <span class="card-seo-google__title js-preview-title"><a class="googleDisplay" href="{{ canonicalArray.href ?? seomatic.helper.siteUrl("/") }}" rel="noopener" target="_blank">{{ (titleArray.title ?? "") }}</a></span>
            <div class="card-seo-google__url">
                <span class="card-seo-google__url-title js-preview-domain">{{ (canonicalArray.href ?? seomatic.helper.siteUrl("/")) | replace({'http://': ''}) | replace({'https://': ''}) }}</span>
                <span class="card-seo-google__url-arrow"></span>
            </div>
            <span class="card-seo-google__description js-preview-description">
              {{ (descriptionArray.content ?? "") }}
            </span>
        </div>
    </div>
</div>