Advanced SEO: Display custom seo meta descriptions in Social Previews (…

…Automattic#7415)

* Adds support for site and post custom meta descriptions in the social previews.

* Use `get` to be safer when accessing the site options.

client/components/seo-preview-pane/index.jsx

@@ -10,7 +10,8 @@ import { localize } from 'i18n-calypso';
 import {
  compact,
  find,
- get
+ get,
+ identity
 } from 'lodash';
 
 /**
@@ -21,6 +22,7 @@ import FacebookPreview from 'components/seo/facebook-preview';
 import TwitterPreview from 'components/seo/twitter-preview';
 import SearchPreview from 'components/seo/search-preview';
 import VerticalMenu from 'components/vertical-menu';
+import PostMetadata from 'lib/post-metadata';
 import { formatExcerpt } from 'lib/post-normalizer/rule-create-better-excerpt';
 import { parseHtml } from 'lib/formatting';
 import { SocialItem } from 'components/vertical-menu/items';
@@ -62,6 +64,29 @@ const getPostImage = ( post ) => {
  : null;
 };
 
+const getSeoExcerptForPost = ( post ) => {
+ if ( ! post ) {
+ return null;
+ }
+
+ return formatExcerpt( find( [
+ PostMetadata.metaDescription( post ),
+ post.excerpt,
+ post.content
+ ], identity ) );
+};
+
+const getSeoExcerptForSite = ( site ) => {
+ if ( ! site ) {
+ return null;
+ }
+
+ return formatExcerpt( find( [
+ get( site, 'options.seo_meta_description' ),
+ site.description
+ ], identity ) );
+};
+
 const ComingSoonMessage = translate => (
  <div className="seo-preview-pane__message">
  { translate( 'Coming Soon!' ) }
@@ -75,7 +100,7 @@ const ReaderPost = ( site, post ) => {
  siteSlug={ site.slug }
  siteIcon={ `${ get( site, 'icon.img', '//gravatar.com/avatar/' ) }?s=32` }
  postTitle={ post.title }
- postExcerpt={ formatExcerpt( post.content ) }
+ postExcerpt={ formatExcerpt( post.excerpt || post.content ) }
  postImage={ getPostImage( post ) }
  postDate={ post.date }
  authorName={ post.author.name }
@@ -85,19 +110,18 @@ const ReaderPost = ( site, post ) => {
  };
 
 const GoogleSite = site => (
-
  <SearchPreview
  title={ site.name }
  url={ site.URL }
- snippet={ formatExcerpt( site.description ) }
+ snippet={ getSeoExcerptForSite( site ) }
  />
 );
 
 const GooglePost = ( site, post ) => (
  <SearchPreview
  title={ post.title }
  url={ post.URL }
- snippet={ formatExcerpt( post.excerpt || post.content ) }
+ snippet={ getSeoExcerptForPost( post ) }
  />
 );
 
@@ -106,7 +130,7 @@ const FacebookSite = site => (
  title={ site.name }
  url={ site.URL }
  type="website"
- description={ formatExcerpt( site.description ) }
+ description={ getSeoExcerptForSite( site ) }
  image={ largeBlavatar( site ) }
  />
 );
@@ -116,7 +140,7 @@ const FacebookPost = ( site, post ) => (
  title={ post.title }
  url={ post.URL }
  type="article"
- description={ formatExcerpt( post.excerpt || post.content ) }
+ description={ getSeoExcerptForPost( post ) }
  image={ getPostImage( post ) }
  author={ post.author.name }
  />
@@ -127,7 +151,7 @@ const TwitterSite = site => (
  title={ site.name }
  url={ site.URL }
  type="summary"
- description={ formatExcerpt( site.description ) }
+ description={ getSeoExcerptForSite( site ) }
  image={ largeBlavatar( site ) }
  />
 );
@@ -137,7 +161,7 @@ const TwitterPost = ( site, post ) => (
  title={ post.title }
  url={ post.URL }
  type="large_image_summary"
- description={ formatExcerpt( post.excerpt || post.content ) }
+ description={ getSeoExcerptForPost( post ) }
  image={ getPostImage( post ) }
  />
 );

client/lib/post-metadata/index.js

@@ -1,3 +1,5 @@
+/** @ssr-ready **/
+
 /**
  * External dependencies
  */