Use unique title tags for both Twitter share and Facebook share... og:title overwriting twitter:title

Question

I have two social share meta tags I am using og:title for Facebook and twitter:title for Twitter. I need each to be different. Twitter always uses the open graph title and I need to find a way to give each share titles different content. Currently my code is as follows.

<meta content="my unique title for facebook" property="og:title" />
<meta content="a description tag here for facebook" property="og:description" />

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="my unique title for twitter content" />

The share feature is using "Add This" https://www.addthis.com/academy/setting-the-url-title-to-share/ the software is a template for multiple sites so it isn't easy to edit the HTML I want to find a solution using only meta tags.

I am using

<meta name="twitter:title" content="my content" />

and share this Twitter share is still using OG tag.

The Add This code looks like

    <!-- AddThis Button BEGIN -->
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript">

      var addthis_config = {
          services_compact: 'email, facebook, twitter, digg, reddit, linkedin, myspace, plaxo, blogger, livejournal, more',
          services_exclude: 'print'
      };
      var addthis_share = {
           url_transforms : {
                shorten: {
                     twitter: 'bitly'
                }
           }, 
           shorteners : {
                bitly : {} 
           }
      };

    </script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-56e1e3b04418084b"></script>
<!-- AddThis Button END -->

HTML

                            <a href="javascript:;" class="menuLink addthis_button"><i class="fa fa-share"></i> <span>Share</span></a>

Answer 1

Twitter's scraper will always take twitter meta tags over open graph

According to their docs:

When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independentl

OP edited their question, they originally were using property tags instead of name tags

It should be

<meta name="twitter:title" content="blah">

instead of

<meta property="twitter:title" content="blah">

With this change, it works.