Social Media Check

Now that you have your website up and running.

And how you want to tell the world about it, but there is one last thing.

It has to look good when sharing the link on social media.

Online Check Tools

LinkedIn

The Post Inspector linkedin.com/post-inspector

Facebook

The Sharing Debugger: developers.facebook.com/tools/debug

Twitter

The Card validator: cards-dev.twitter.com/validator

Meta Tags

This header is from my Ruby on Rails projects. I hope this represents the necessary meta and link tags. It is here so you can compare with your own <head> section.

  <head>
    <%= favicon_link_tag %>
    <title>INSERT-THE-TITLE-OF-YOUR-WEBSITE-HERE</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="INSERT-THE-DESCRIPTION-OF-YOUR-WEBSITE-HERE.">
    <meta name="theme-color" content="#ffffff" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <meta property="og:type" content="website" />
    <meta property="og:title" content="INSERT-THE-TITLE-OF-YOUR-WEBSITE-HERE" />
    <meta property="og:description" content="INSERT-THE-DESCRIPTION-OF-YOUR-WEBSITE-HERE." />
    <meta property="og:url" content="INSERT-URL-TO-YOUR-WEBSITE" />
    <meta property="og:image" content="INSERT-URL-TO-YOUR-COMPANY-LOGO" />

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@INSERT-YOUR-TWITTER-ID" />
    <meta name="twitter:creator" content="@INSERT-YOUR-TWITTER-ID" />

    <link rel="canonical" href="INSERT-URL-TO-YOUR-WEBSITE">

    <%= tag(:link, rel: 'icon', type: 'image/png', sizes: '512x512', href: asset_path('maskable_icon_x512.png')) %>
    <%= tag(:link, rel: 'icon', type: 'image/png', sizes: '384x384', href: asset_path('maskable_icon_x384.png')) %>
    <%= tag(:link, rel: 'icon', type: 'image/png', sizes: '192x192', href: asset_path('maskable_icon_x192.png')) %>
    <%= tag(:link, rel: 'icon', type: 'image/png', sizes: '128x128', href: asset_path('maskable_icon_x128.png')) %>
    <%= tag(:link, rel: 'icon', type: 'image/png', sizes: '96x96', href: asset_path('maskable_icon_x96.png')) %>
    <%= tag(:link, rel: 'icon', type: 'image/png', sizes: '72x72', href: asset_path('maskable_icon_x72.png')) %>
    <%= tag(:link, rel: 'icon', type: 'image/png', sizes: '48x48', href: asset_path('maskable_icon_x48.png')) %>
    <%= tag(:link, rel: 'manifest', href: asset_path('manifest.json')) %>

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-XXXXXXXXXX');
    </script>
  </head>