diff --git a/ghost/admin/app/components/gh-tag-settings-form.hbs b/ghost/admin/app/components/gh-tag-settings-form.hbs
index b4c2ed9893..2c1713e11c 100644
--- a/ghost/admin/app/components/gh-tag-settings-form.hbs
+++ b/ghost/admin/app/components/gh-tag-settings-form.hbs
@@ -94,56 +94,62 @@
 
         <div class="gh-expandable-content">
             {{#liquid-if this.metadataOpen}}
-            <div class="gh-main-section columns-2">
-                <div class="gh-main-section-block">
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
-                        <label for="meta-title">Meta title</label>
-                        <GhTextInput
-                            @id="meta-title"
-                            @name="metaTitle"
-                            @placeholder={{this.scratchTag.name}}
-                            @tabindex="4"
-                            @value={{this.scratchTag.metaTitle}}
-                            @focus-out={{action "setProperty" "metaTitle" this.scratchTag.metaTitle}}
-                        />
-                        <GhErrorMessage @errors={{this.tag.errors}} @property="metaTitle" />
-                        <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaTitle 70}}</p>
-                    </GhFormGroup>
+            <div class="gh-setting-content-extended">
+                <div class="gh-seo-settings">
+                    <div class="gh-seo-settings-left flex-basis-1-2-m flex-basis-2-3-l">
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
+                            <label for="meta-title">Meta title</label>
+                            <GhTextInput
+                                @id="meta-title"
+                                @name="metaTitle"
+                                @placeholder={{this.scratchTag.name}}
+                                @tabindex="4"
+                                @value={{this.scratchTag.metaTitle}}
+                                @focus-out={{action "setProperty" "metaTitle" this.scratchTag.metaTitle}}
+                            />
+                            <GhErrorMessage @errors={{this.tag.errors}} @property="metaTitle" />
+                            <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaTitle 70}}</p>
+                        </GhFormGroup>
 
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaDescription">
-                        <label for="meta-description">Meta description</label>
-                        <GhTextarea
-                            @id="meta-description"
-                            @name="metaDescription"
-                            @class="gh-tag-details-textarea"
-                            @placeholder={{this.scratchTag.description}}
-                            @tabindex="5"
-                            @value={{this.scratchTag.metaDescription}}
-                            @focus-out={{action "setProperty" "metaDescription" this.scratchTag.metaDescription}}
-                        />
-                        <GhErrorMessage @errors={{this.tag.errors}} @property="metaDescription" />
-                        <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaDescription 156}}</p>
-                    </GhFormGroup>
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="canonicalUrl">
-                        <label for="canonical-url">Canonical URL</label>
-                        <GhTextInput
-                            @id="canonical-url"
-                            @name="canonicalUrl"
-                            @tabindex="4"
-                            @value={{this.scratchTag.canonicalUrl}}
-                            @focus-out={{action "validateCanonicalUrl"}}
-                        />
-                        <GhErrorMessage @errors={{this.tag.errors}} @property="canonicalUrl" />
-                    </GhFormGroup>
-                </div>
-                <div class="gh-main-section-block">
-                    <div class="form-group">
-                        <label>Search Engine Result Preview</label>
-                        <div class="seo-preview">
-                            <div class="seo-preview-title">{{this.seoTitle}}</div>
-                            <div class="seo-preview-link">{{this.seoURL}}</div>
-                            <div class="seo-preview-description">{{this.seoDescription}}</div>
-                        </div>
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaDescription">
+                            <label for="meta-description">Meta description</label>
+                            <GhTextarea
+                                @id="meta-description"
+                                @name="metaDescription"
+                                @class="gh-tag-details-textarea"
+                                @placeholder={{this.scratchTag.description}}
+                                @tabindex="5"
+                                @value={{this.scratchTag.metaDescription}}
+                                @focus-out={{action "setProperty" "metaDescription" this.scratchTag.metaDescription}}
+                            />
+                            <GhErrorMessage @errors={{this.tag.errors}} @property="metaDescription" />
+                            <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.metaDescription 156}}</p>
+                        </GhFormGroup>
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="canonicalUrl">
+                            <label for="canonical-url">Canonical URL</label>
+                            <GhTextInput
+                                @id="canonical-url"
+                                @name="canonicalUrl"
+                                @tabindex="4"
+                                @value={{this.scratchTag.canonicalUrl}}
+                                @focus-out={{action "validateCanonicalUrl"}}
+                            />
+                            <GhErrorMessage @errors={{this.tag.errors}} @property="canonicalUrl" />
+                        </GhFormGroup>
+                    </div>
+                    <div class="flex-basis-1-2-m flex-basis-1-3-l">
+                            <label>Search Engine Result Preview</label>
+                            <div class="gh-seo-container">
+                                <div class="gh-seo-preview">
+                                    <div class="flex mb6">
+                                        {{svg-jar "google"}}
+                                        <div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
+                                    </div>
+                                    <div class="gh-seo-preview-link">{{this.seoURL}}</div>
+                                    <div class="gh-seo-preview-title">{{this.seoTitle}}</div>
+                                    <div class="gh-seo-preview-desc">{{this.seoDescription}}</div>
+                                </div>
+                            </div>
                     </div>
                 </div>
             </div>
@@ -162,63 +168,79 @@
 
         <div class="gh-expandable-content">
             {{#liquid-if this.twitterMetadataOpen}}
-            <div class="gh-main-section columns-2">
-                <div class="gh-main-section-block">
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterImage">
-                        <label for="twitter-image">Twitter image</label>
-                        <GhImageUploaderWithPreview
-                            @image={{this.tag.twitterImage}}
-                            @text="Add Twitter image"
-                            @class="gh-tag-image-uploader"
-                            @allowUnsplash={{true}}
-                            @update={{action "setTwitterImage"}}
-                            @remove={{action "clearTwitterImage"}}
-                        />
-                    </GhFormGroup>
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterTitle">
-                        <label for="twitter-title">Twitter title</label>
-                        <GhTextInput
-                            @id="twitter-title"
-                            @name="twitterTitle"
-                            @placeholder={{this.scratchTag.name}}
-                            @tabindex="4"
-                            @value={{this.scratchTag.twitterTitle}}
-                            @focus-out={{action "setProperty" "twitterTitle" this.scratchTag.twitterTitle}}
-                        />
-                        <GhErrorMessage @errors={{this.tag.errors}} @property="twitterTitle" />
-                        <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterTitle 70}}</p>
-                    </GhFormGroup>
+            <div class="gh-setting-content-extended">
+                <div class="gh-twitter-settings">
+                    <div class="gh-twitter-settings-left flex-basis-1-2-m flex-basis-2-3-l">
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterImage">
+                            <label for="twitter-image">Twitter image</label>
+                            <GhImageUploaderWithPreview
+                                @image={{this.tag.twitterImage}}
+                                @text="Add Twitter image"
+                                @class="gh-tag-image-uploader"
+                                @allowUnsplash={{true}}
+                                @update={{action "setTwitterImage"}}
+                                @remove={{action "clearTwitterImage"}}
+                            />
+                        </GhFormGroup>
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterTitle">
+                            <label for="twitter-title">Twitter title</label>
+                            <GhTextInput
+                                @id="twitter-title"
+                                @name="twitterTitle"
+                                @placeholder={{this.scratchTag.name}}
+                                @tabindex="4"
+                                @value={{this.scratchTag.twitterTitle}}
+                                @focus-out={{action "setProperty" "twitterTitle" this.scratchTag.twitterTitle}}
+                            />
+                            <GhErrorMessage @errors={{this.tag.errors}} @property="twitterTitle" />
+                            <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterTitle 70}}</p>
+                        </GhFormGroup>
 
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterDesctiption">
-                        <label for="twitter-description">Twitter description</label>
-                        <GhTextarea
-                            @id="twitter-description"
-                            @name="twitterDescription"
-                            @class="gh-tag-details-textarea"
-                            @placeholder={{this.scratchTag.description}}
-                            @tabindex="5"
-                            @value={{this.scratchTag.twitterDescription}}
-                            @focus-out={{action "setProperty" "twitterDescription" this.scratchTag.twitterDescription}}
-                        />
-                        <GhErrorMessage @errors={{this.tag.errors}} @property="twitterDescription" />
-                        <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterDescription 156}}</p>
-                    </GhFormGroup>
-                </div>
-                <div class="gh-main-section-block">
-                    <div class="form-group">
-                        <label>Preview</label>
-                        <div class="gh-twitter-preview">
-                            {{#if this.twitterImage}}
-                            <div class="gh-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
-                            {{/if}}
-                            <div class="gh-twitter-preview-content">
-                                <div class="gh-twitter-preview-title">{{this.twitterTitle}}</div>
-                                <div class="gh-twitter-preview-description">{{truncate this.twitterDescription 155}}</div>
-                                <div class="gh-twitter-preview-footer">
-                                    <div class="gh-twitter-preview-footer-left">
-                                        {{this.config.blogDomain}}
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="twitterDesctiption">
+                            <label for="twitter-description">Twitter description</label>
+                            <GhTextarea
+                                @id="twitter-description"
+                                @name="twitterDescription"
+                                @class="gh-tag-details-textarea"
+                                @placeholder={{this.scratchTag.description}}
+                                @tabindex="5"
+                                @value={{this.scratchTag.twitterDescription}}
+                                @focus-out={{action "setProperty" "twitterDescription" this.scratchTag.twitterDescription}}
+                            />
+                            <GhErrorMessage @errors={{this.tag.errors}} @property="twitterDescription" />
+                            <p>Recommended: <b>125</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.twitterDescription 125}}</p>
+                        </GhFormGroup>
+                    </div>
+                    <div class="flex-basis-1-2-m flex-basis-1-3-l">
+                        <label>Twitter preview</label>
+                        <div class="gh-twitter-container">
+                            <div class="flex ma4">
+                                <span>{{svg-jar "social-twitter" class="social-icon"}}</span>
+                                <div class="w-100">
+                                    <span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
+                                    <span class="gh-social-og-time">12 hrs</span>
+                                    <div class="flex flex-column mt2 mb3">
+                                        <span class="gh-social-og-desc w-100 mb2" />
+                                        <span class="gh-social-og-desc w-60" />
                                     </div>
-                                    <div class="gh-twitter-preview-footer-right">
+                                    <div class="gh-social-twitter-post-preview">
+                                        {{#if this.twitterImage}}
+                                            <div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
+                                        {{/if}}
+                                        <div class="gh-social-twitter-preview-content">
+                                            <div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
+                                            <div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
+                                            <div class="gh-social-twitter-preview-meta">
+                                                {{svg-jar "twitter-link"}}
+                                                {{this.config.blogDomain}}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="gh-social-twitter-reactions">
+                                        <div class="flex items-center">{{svg-jar "twitter-comment"}}2</div>
+                                        <div class="flex items-center">{{svg-jar "twitter-retweet"}}11</div>
+                                        <div class="flex items-center">{{svg-jar "twitter-like"}}32</div>
+                                        <div class="flex items-center">{{svg-jar "twitter-share"}}</div>
                                     </div>
                                 </div>
                             </div>
@@ -241,66 +263,80 @@
 
         <div class="gh-expandable-content">
             {{#liquid-if this.facebookMetadataOpen}}
-            <div class="gh-main-section columns-2">
-                <div class="gh-main-section-block">
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogImage">
-                        <label for="og-image">Facebook image</label>
-                        <GhImageUploaderWithPreview
-                            @image={{this.tag.ogImage}}
-                            @text="Add Facebook image"
-                            @class="gh-tag-image-uploader"
-                            @allowUnsplash={{true}}
-                            @update={{action "setOgImage"}}
-                            @remove={{action "clearOgImage"}}
-                        />
-                    </GhFormGroup>
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
-                        <label for="og-title">Facebook title</label>
-                        <GhTextInput
-                            @id="og-title"
-                            @name="ogTitle"
-                            @placeholder={{this.scratchTag.name}}
-                            @tabindex="4"
-                            @value={{this.scratchTag.ogTitle}}
-                            @focus-out={{action "setProperty" "ogTitle" this.scratchTag.ogTitle}}
-                        />
-                        <GhErrorMessage @errors={{this.tag.errors}} @property="ogTitle" />
-                        <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogTitle 70}}</p>
-                    </GhFormGroup>
+            <div class="gh-setting-content-extended">
+                <div class="gh-og-settings">
+                    <div class="gh-og-settings-left flex-basis-1-2-m flex-basis-2-3-l">
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogImage">
+                            <label for="og-image">Facebook image</label>
+                            <GhImageUploaderWithPreview
+                                @image={{this.tag.ogImage}}
+                                @text="Add Facebook image"
+                                @class="gh-tag-image-uploader"
+                                @allowUnsplash={{true}}
+                                @update={{action "setOgImage"}}
+                                @remove={{action "clearOgImage"}}
+                            />
+                        </GhFormGroup>
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="metaTitle">
+                            <label for="og-title">Facebook title</label>
+                            <GhTextInput
+                                @id="og-title"
+                                @name="ogTitle"
+                                @placeholder={{this.scratchTag.name}}
+                                @tabindex="4"
+                                @value={{this.scratchTag.ogTitle}}
+                                @focus-out={{action "setProperty" "ogTitle" this.scratchTag.ogTitle}}
+                            />
+                            <GhErrorMessage @errors={{this.tag.errors}} @property="ogTitle" />
+                            <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogTitle 70}}</p>
+                        </GhFormGroup>
 
-                    <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogDescription">
-                        <label for="og-description">Facebook description</label>
-                        <GhTextarea
-                            @id="og-description"
-                            @name="ogDescription"
-                            @class="gh-tag-details-textarea"
-                            @placeholder={{this.scratchTag.description}}
-                            @tabindex="5"
-                            @value={{this.scratchTag.ogDescription}}
-                            @focus-out={{action "setProperty" "ogDescription" this.scratchTag.ogDescription}}
-                        />
-                        <GhErrorMessage @errors={{this.tag.errors}} @property="ogDescription" />
-                        <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogDescription 156}}</p>
-                    </GhFormGroup>
-                </div>
-                <div class="gh-main-section-block">
-                    <div class="form-group">
-                        <label>Preview</label>
-                        <div class="gh-og-preview">
-                            {{#if this.facebookImage}}
-                            <div class="gh-og-preview-image" style={{background-image-style this.facebookImage}}></div>
-                            {{/if}}
-                            <div class="gh-og-preview-content">
-                                <div class="gh-og-preview-title">{{truncate this.facebookTitle 88}}</div>
-                                <div class="gh-og-preview-description">{{truncate this.facebookDescription 300}}</div>
-                                <div class="gh-og-preview-footer">
-                                    <div class="gh-og-preview-footer-left">
-                                        {{this.config.blogDomain}} <span class="gh-og-preview-footer-left-divider">|</span> by <span class="gh-og-preview-footer-author">{{author-names this.post.authors}}</span>
-                                    </div>
-                                    <div class="gh-og-preview-footer-right">
-                                    </div>
+                        <GhFormGroup @errors={{this.tag.errors}} @hasValidated={{this.tag.hasValidated}} @property="ogDescription">
+                            <label for="og-description">Facebook description</label>
+                            <GhTextarea
+                                @id="og-description"
+                                @name="ogDescription"
+                                @class="gh-tag-details-textarea"
+                                @placeholder={{this.scratchTag.description}}
+                                @tabindex="5"
+                                @value={{this.scratchTag.ogDescription}}
+                                @focus-out={{action "setProperty" "ogDescription" this.scratchTag.ogDescription}}
+                            />
+                            <GhErrorMessage @errors={{this.tag.errors}} @property="ogDescription" />
+                            <p>Recommended: <b>65</b> characters. You’ve used {{gh-count-down-characters this.scratchTag.ogDescription 65}}</p>
+                        </GhFormGroup>
+                    </div>
+                    <div class="flex-basis-1-2-m flex-basis-1-3-l">
+                        <label>Facebook preview</label>
+                        <div class="gh-og-container">
+                            <div class="flex ma3 mb2">
+                                <span>{{svg-jar "social-facebook" class="social-icon"}}</span>
+                                <div>
+                                    <div class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</div>
+                                    <div class="gh-social-og-time">12 hrs</div>
                                 </div>
                             </div>
+                            <div class="flex flex-column ma3 mt2">
+                                <span class="gh-social-og-desc w-100 mb2" />
+                                <span class="gh-social-og-desc w-60" />
+                            </div>
+                            <div class="gh-social-og-preview">
+                                {{#if this.facebookImage}}
+                                    <div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
+                                {{/if}}
+                                <div class="gh-social-og-preview-content">
+                                    <div class="gh-social-og-preview-meta">
+                                        {{this.config.blogDomain}}
+                                    </div>
+                                    <div class="gh-social-og-preview-title">{{truncate this.facebookTitle 88}}</div>
+                                    <div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
+                                </div>
+                            </div>
+                            <div class="gh-social-og-reactions">
+                                <span class="gh-social-og-likes">{{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182</span>
+                                <span class="gh-social-og-comments">7 comments</span>
+                                <span class="gh-social-og-comments ml2">2 shares</span>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 3e4e581371..6f6ba25f4e 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -530,18 +530,26 @@
     .gh-seo-settings .form-group {
         max-width: 100%;
     }
+
+    .gh-seo-settings-left,
+    .gh-seo-container {
+        max-width: 591px;
+    }
 }
 
 @media (min-width: 1360px) {
     .gh-seo-settings-left {
         margin-right: 2.4rem;
     }
+
+    .gh-seo-container {
+        max-width: 1091px;
+    }
 }
 
 .gh-seo-container {
     display: flex;
     width: 100%;
-    max-width: 1091px;
     margin-bottom: 2.4rem;
     padding: 20px 30px 16px;
     border: 1px solid var(--whitegrey);
@@ -567,6 +575,10 @@
     .gh-twitter-settings .form-group {
         max-width: 100%;
     }
+
+    .gh-twitter-settings-left {
+        max-width: 591px;
+    }
 }
 
 @media (min-width: 1360px) {
@@ -601,6 +613,10 @@
     .gh-og-settings .form-group {
         max-width: 100%;
     }
+
+    .gh-og-settings-left {
+        max-width: 591px;
+    }
 }
 
 @media (min-width: 1360px) {