How to configure a Twitter card type and image? about react-share

[modulitos]

After further investigation, it looks like this issue isn't with react-share, but instead it has to do with adding meta tags and allowing bots to parse the page.

I am currently solving this issue by adding my meta tags via react-helmet and pre-rendering the page via prerender.io. Hopefully this helps somebody!

Closing this issue for now.

[matewilk]

Is this a complete example ? I'm trying to react-share with an image on the client side only. I have a standard index.html file, and I included react-helmet into my component that is suppose to display the iframe share with an image.

I tried many variations with property, name etc as keys, still nothing.

Render method looks like this:

render () {
    const {
      TwitterShareButton
    } = ShareButtons;
    const TwitterIcon = generateShareIcon('twitter');

    let shareUrl = 'http://example.com';
    let title = 'Title for the tweet';
    return (
      <div className='twitter-share-button-container'>
      <Helmet
        base={{href: `${window.location.path}`}}
        title="My Title"
        meta={[
          {"name": "twitter:card", "content": "summary_large_image"},
          {"property": "twitter:site", "content": "@twitteruser"},
          {"property": "twitter:title", "content": "content goes here"},
          {"property": "twitter:description", "content": "description"},
          {"property": "twitter:image", "content": "http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"},
          {"property": "og:image", "content": "http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"}
        ]}
        />
        <div className='share-text'>
          <Subheader >share</Subheader>
        </div>
        <TwitterShareButton
          url={shareUrl}
          title={title}
          hashtags={['test', 'test2']}>
          <TwitterIcon
            size={32}
            round />
        </TwitterShareButton>
      </div>
    );
  }

The share window is of course displayed, but there is no difference no matter if I use helmet or not.

The title of the browser tab changes correctly though.

Any help much appreciated.

Thanks!

[buddies2705]

Did you solved the problem?