# Social Media Check (Web Development)

_Published: 2023-11-30 · Author: Finn_

## Social Media Check

Now that you have your website up and running.

- Your domain is pointing to it. [Simple DNS Admin](/technology/2023/11/27/simple-dns-admin.html)
- It has GA and SEO. [Google Analytics](/technology/2023/11/28/google-analytics.html)
- It is performing well. [Website Performace](/technology/2023/11/29/website-performance.html)
- It has PWA properties. [Progressive Web App](/technology/2023/11/29/progressive-web-app.html)

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](https://www.linkedin.com/post-inspector/)

## Facebook

The Sharing Debugger:
[developers.facebook.com/tools/debug](https://developers.facebook.com/tools/debug/)

## Twitter

The Card validator:
[cards-dev.twitter.com/validator](https://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.

````html
  <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>
````

---

[View the normal web page](https://www.finnpedersenfrance.com/technology/2023/11/30/social-media-check.html)
