[Blog] OpenGraph description tag stumbles with img tags

[hramos]

Docusaurus will automatically generate OpenGraph metatags based on a blog post's content. One of the tags, 'description', is generated by grabbing the markdown content up to the first line break. If the blog post has a reference in markdown to an image at the top, it will avoid using the image as the description:

  getDescription() {
    var descLines = this.props.children.trim().split('\n');
    for (var i = 0; i < descLines.length; i++) {
      // Don't want blank lines or descriptions that are raw image rendering strings
      if (descLines[i] && !descLines[i].startsWith('![')) {
        return descLines[i];
      }
    }
    return null;
  }

The issue arises when instead of a 'raw image render string', the markdown content uses a plain <img> tag. In that case, the img html tag will be used as the description, which is not ideal.

Example

Raw post:

---
title: Implementing Twitter’s App Loading Animation in React Native
author: Eli White
authorTitle: Software Engineer at Facebook
authorURL: https://github.com/TheSavior
authorImage: https://avatars2.githubusercontent.com/u/249164?s=460&v=4
authorTwitter: 
category: engineering
---

<img src="/react-native/blog/assets/loading-screen-01.gif" style="float: left; padding-right: 80px; padding-bottom: 20px"/>

Twitter’s iOS app has a loading animation I quite enjoy.

Once the app is ready, the Twitter logo delightfully expands, revealing the app.

I wanted to figure out how to recreate this loading animation with React Native.

Result:

http://opengraphcheck.com/result.php?url=https%3A%2F%2Ffacebook.github.io%2Freact-native%2Fblog%2F2018%2F01%2F18%2Fimplementing-twitters-app-loading-animation-in-react-native.html

Tag	Content
og:title	Implementing Twitter’s App Loading Animation in React Native · React Native
og:type	website
og:url	https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html
og:description

Proposed Fix

We'd need to update our logic to account for raw HTML as well. Essentially, we want the first bit of plain text in the blog post, with no other HTML elements.

[JoelMarcey]

@hramos I wonder if #407 will fix this issue?

[hramos]

Hm I don't see anything in #407 that might address this. The issue shows up when Facebook's OpenGraph scraper runs through a blog post. The scraper does not use the blog feed AFAIK, it uses the og meta tags in the head section for the blog post.

[JoelMarcey]

Gotcha - ok. This is a quasi-bug, I think vs. a feature request. We can treat it as such.

[mattkanwisher]

Running into same issues, we are seeing raw markdown in the og:description instead of the rendered html

[JoelMarcey]

@mattkanwisher Hi! What version of Docusaurus are you using? See https://docusaurus.io/docs/en/installation.html to find out how to check.

We thought we may have fixed this in 1.0.6 - https://github.com/facebook/Docusaurus/blob/master/CHANGELOG.md%23106---2018-02-12

and just forgot to close this issue.

[mattkanwisher]

From our package.lock here
docusaurus@^1.0.12:

You can see if you

curl https://loomx.io/developers/docs/en/phaser-sdk-demo.html | grep og:description

="og:description" content="![Game screenshot](/developers/img/screenshot.png)"/>

[JoelMarcey]

Interesting...

In other Docusaurus sites, that bug is gone:

curl https://docusaurus.io/docs/en/installation.html | grep og:description

<meta property="og:description" content="Docusaurus was designed from the ground up.....

or

curl https://pyre-check.org/docs/installation.html | grep og:description

<meta property="og:description" content="You can install Pyre via `pip` or build it....

The only thing I see different in yours, assuming you are indeed running Docusaurus 1.06 or greater, is that your og:description is an image. Maybe that could be the bug.

[endiliey]

#1054