chg: usr: make fancy og tags - and create a special one for battle sharing #4

templates/Game/battle_share.html.twig

@@ -3,32 +3,33 @@
 {% block title %} - Battle Report{% endblock %}
 
 {% block metas %}
-  {% set shareUrl = url('MineSeekerBundle_battle_share', { id: game.id }) %}
-  <meta property="og:url"         content="{{ shareUrl }}"/>
-  <meta property="og:type"        content="website"/>
-  <meta property="og:title"       content="{{ ogTitle }}"/>
+  {%- set shareUrl = url('MineSeekerBundle_battle_share', { uuid: game.uuid }) -%}
+  {%- set _ogImage = url('MineSeekerBundle_og_battle', { uuid: game.uuid }) -%}
+  <meta property="og:url" content="{{ shareUrl }}"/>
+  <meta property="og:type" content="article"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:locale" content="en_US"/>
+  <meta property="og:title" content="{{ ogTitle }}"/>
   <meta property="og:description" content="{{ ogDesc }}"/>
-  <meta property="og:image"       content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
-  <meta property="og:image:width"  content="1600"/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
   <meta property="og:image:height" content="627"/>
-  <meta name="twitter:card"        content="summary_large_image"/>
-  <meta name="twitter:title"       content="{{ ogTitle }}"/>
+  <meta property="og:image:alt" content="{{ ogTitle }}"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:site" content="@MineSeeker"/>
+  <meta name="twitter:title" content="{{ ogTitle }}"/>
   <meta name="twitter:description" content="{{ ogDesc }}"/>
-  <meta name="twitter:image"       content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
+  <meta name="twitter:image:alt" content="{{ ogTitle }}"/>
 {% endblock %}
 
 {% block body %}
   <div class="bshare-page">
-
     <div class="bshare-card">
-
       <div class="bshare-card__eyebrow">
         <i class="fas fa-crosshairs"></i> Battle Report
       </div>
-
-      {# VS Header #}
       <div class="bshare-vs">
-
         <div class="bshare-player bshare-player--red">
           <div class="bshare-avatar bshare-avatar--red">
             {{ redName|slice(0,2)|upper }}
@@ -36,7 +37,6 @@
           <span class="bshare-player__name">{{ redName }}</span>
           <span class="bshare-player__side">Red</span>
         </div>
-
         <div class="bshare-vs__center">
           {% if redPts is not null and bluePts is not null %}
             <div class="bshare-score">
@@ -48,8 +48,6 @@
             <div class="bshare-score bshare-score--na">— : —</div>
           {% endif %}
           <div class="bshare-vs__label">VS</div>
-
-          {# Result badge #}
           {% if resign == 'red' %}
             <div class="bshare-badge bshare-badge--blue">
               <i class="fas fa-trophy"></i> Blue wins
@@ -74,7 +72,6 @@
             {% endif %}
           {% endif %}
         </div>
-
         <div class="bshare-player bshare-player--blue">
           <div class="bshare-avatar bshare-avatar--blue">
             {{ blueName|slice(0,2)|upper }}
@@ -82,10 +79,7 @@
           <span class="bshare-player__name">{{ blueName }}</span>
           <span class="bshare-player__side">Blue</span>
         </div>
-
       </div>
-
-      {# Details #}
       <div class="bshare-details">
         {% if resign %}
           <div class="bshare-detail">
@@ -112,7 +106,6 @@
           </div>
         {% endif %}
       </div>
-
       <div class="bshare-cta">
         <a href="{{ path('MineSeekerBundle_gamePlay') }}" class="bshare-btn">
           <i class="fas fa-play"></i> Play MineSeeker
@@ -121,8 +114,6 @@
           <i class="fas fa-house"></i> Homepage
         </a>
       </div>
-
     </div>
-
   </div>
-{% endblock %}
+{% endblock %}

templates/Game/index.html.twig

@@ -3,12 +3,23 @@
 {% block title %} - The Game{% endblock %}
 
 {% block metas %}
+  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
   <meta property="og:url" content="{{ url('MineSeekerBundle_homepage') }}"/>
   <meta property="og:type" content="website"/>
-  <meta property="og:title" content="MineSeeker"/>
-  <meta property="og:description" content="A multiplayer minesweeper game"/>
-  <meta property="og:image"
-        content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
+  <meta property="og:site_name" content="MineSeeker"/>
+  <meta property="og:locale" content="en_US"/>
+  <meta property="og:title" content="MineSeeker — Multiplayer Minesweeper"/>
+  <meta property="og:description"
+        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
+  <meta property="og:image" content="{{ _ogImage }}"/>
+  <meta property="og:image:width" content="1600"/>
+  <meta property="og:image:height" content="627"/>
+  <meta property="og:image:alt" content="MineSeeker — Multiplayer Minesweeper"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:title" content="MineSeeker — Multiplayer Minesweeper"/>
+  <meta name="twitter:description"
+        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
+  <meta name="twitter:image" content="{{ _ogImage }}"/>
 {% endblock %}
 
 {% block header %}