Improve social sharing meta tags

[bryancasler]

RAN reported issues with Twitter Large Images: https://app.productive.io/2650-4site-interactive-studios-inc/m/task-2/886843 but I think we have figured out a way that solves the issue:

Page Template Header

<title>${page~title} | ORGNAME</title>

<!-- Social network account meta tags -->
<meta property="twitter:account_id" content="ACCOUNTID" />
<meta property="fb:app_id" content="FBAPPID"> <!-- Optional -->

<!-- Fallback Twitter Large Card meta tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@TWITTERHANDLE">
<meta name="twitter:creator" content="@TWITTERHANDLE">
<meta name="twitter:title" content="TWITTERTITLE">
<meta name="twitter:description" content="TWITTERDESCRIPTION">
<meta name="twitter:image" content="TWITTERLARGEIMAGEURL">

Body: EN Social Sharing Widget (Order in the body doesn't matter) Insert EN Social Sharing Widget

Body: Twitter Large Card Code Block (Order in the body doesn't matter) Each of the three meta tags is completely optional. You can have one, two, or all three in your code block. If a tag is not specified, then the Social Networks will look elsewhere on the page to get that information when generating the social post. Depending on the Social Network, that order of precedence is different and detailed below.

<!-- Page specific Twitter Large Card meta tags -->
<meta name="twitter:title" content="TWITTERTITLE">
<meta name="twitter:description" content="TWITTERDESCRIPTION">
<meta name="twitter:image" content="TWITTERLARGEIMAGEURL">

Page Template Footer

<!-- Fallback Facebook meta tags -->
<!-- General Social Sharing meta tags -->
<meta property="og:title" content="${page~title}" />
<meta property="og:site_name" content="ORGNAME" />
<meta property="og:image" content="IMAGEURL" />

Facebook Meta Tag Order of Precedence

1. EN Social Sharing Widget
2. Twitter Large Card Code Block
3. Page Template Footer
4. Page Template Header

Twitter Meta Tag Order of Precedence

1. Twitter Large Card Code Block
2. EN Social Sharing Widget
3. Page Template Header
4. Page Template Footer

[bryancasler]

Below is the latest

Page Template Header, inside

    <title>${page~title} | Robert F. Kennedy Human Rights</title>
    <meta name="title" content="${page~title} | Robert F. Kennedy Human Rights">

    <!-- Social network account meta tags -->
    <meta property="twitter:account_id" content="34934634">
    <meta property="fb:app_id" content="993021647861195">

    <!-- Default, Twitter Large Card, and Facebook meta tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@RFKHumanRights">
    <meta name="twitter:creator" content="@RFKHumanRights">
    <meta name="twitter:title" content="${page~title}">
    <meta name="twitter:image" content="https://rfkhumanrights.org/assets/images/_1024x512_crop_center-center_82/rfk_program_about_rfk1.jpg">
    <meta name="twitter:description" content="At Robert F. Kennedy Human Rights we look to teach change through human rights advocacy for social justice. See how you can help.">
    <meta property="og:image" content="https://rfkhumanrights.org/assets/images/_1024x512_crop_center-center_82/rfk_program_about_rfk1.jpg">
    <meta property="og:type" content="website">    

Page Template Footer, before

    <!-- Additional Default meta tags: Placed at the bottom so any previously defined meta tags in the page take precedence -->
    <meta property="og:title" content="${page~title}">
    <meta property="og:site_name" content="Robert F. Kennedy Human Rights">
    <meta property="og:description" content="At Robert F. Kennedy Human Rights we look to teach change through human rights advocacy for social justice. See how you can help.">
    <meta property="description" content="At Robert F. Kennedy Human Rights we look to teach change through human rights advocacy for social justice. See how you can help.">