how to change the title that shows in parcel delivery type of gmail markup highlights? - google-schemas

Hi I'm trying to send emails with gmail markup. The markup type I am using is Parcel delivery. Everything went well with the sample code. But it confused me when I am trying to change the title part of the highlights. The title part seems always showing whatever in "Items" like the screenshot below.
Markup code I am using.
<div itemscope itemtype="http://schema.org/ParcelDelivery">
<div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="John Frank"/>
<meta itemprop="streetAddress" content="24 Willie Mays Plaza"/>
<meta itemprop="addressLocality" content="San Francisco"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94107"/>
</div>
<div itemprop="originAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="John Frank"/>
<meta itemprop="streetAddress" content="25 Willie Mays Plaza"/>
<meta itemprop="addressLocality" content="San Francisco"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94107"/>
</div>
<meta itemprop="expectedArrivalFrom" content="2027-03-10T12:00:00-08:00"/>
<meta itemprop="expectedArrivalUntil" content="2027-03-12T12:00:00-08:00"/>
<div itemprop="carrier" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="FedEx"/>
<link itemprop="url" href="http://fedex.com/"/>
</div>
<div itemprop="itemShipped" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Item Shipped.Name"/>
<link itemprop="url" href="http://apple.com/ipad32gb"/>
<link itemprop="image" href="http://apple.com/images/ipad32gb.jpg"/>
<meta itemprop="sku" content="B00DR0PDNE"/>
<meta itemprop="description" content="iPod Mini 32Gb White"/>
<div itemprop="brand" itemscope itemtype="http://schema.org/Brand">
<meta itemprop="name" content="Apple"/>
</div>
<meta itemprop="color" content="white"/>
</div>
<meta itemprop="trackingNumber" content="3453291231"/>
<link itemprop="trackingUrl" href="http://fedex.com/track/3453291231"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/TrackAction">
<link itemprop="url" href="http://fedex.com/track/3453291231"/>
</div>
<div itemprop="hasDeliveryMethod" itemscope itemtype="http://schema.org/ParcelService">
<meta itemprop="name" content="http://schema.org/ParcelService"/>
</div>
<div itemprop="partOfOrder" itemscope itemtype="http://schema.org/Order">
<meta itemprop="orderNumber" content="176057"/>
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Merchant Name"/>
<link itemprop="sameAs" href="http://www.freebase.com/m/0fhkx"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderInTransit"/>
</div>
</div>
Current highlights screenshot:
When I trying to have the title part of highlights show as the UPS notification email in attached, which is different from what's in "Items", I don't know where to change. I've read through the parcel delivery reference here but didn't find anything about it. I know where to change the "Items", "expected delivery date", "Merchant name" in highlights, but I can't find how to change the content of the title like the circled part like in UPS email. Please help. Many thanks!
UPS email screenshot:

Related

Event reservation email markup not recognize "action" attribute

I create an email that with Microdata for EventReservation. When I receive mail Gmail recognizes properly the information about the event date, place, etc. But I added a custom action to go a web page that Gmail don't recognized. I this action attribute of Event still supported by Gmail. Microdata looks like this:
<div itemscope itemtype="http://schema.org/EventReservation">
<meta itemprop="reservationNumber" content="1000"/>
<link itemprop="reservationStatus" href="http://schema.org/ReservationConfirmed">
<link itemprop="modifyReservationUrl" href="https://www.mywebsite.com/1000">
<div itemprop="underName" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Name"/>
<div itemprop="action" itemscope itemtype="http://schema.org/Action">
<meta itemprop="name" content="Go to my web site"/>
<link itemprop="url" href="https://www.mywebsite.com/action"/>
</div>
</div>
<div itemprop="reservationFor" itemscope itemtype="http://schema.org/Event">
<meta itemprop="name" content="Event name"/>
<meta itemprop="startDate" content="2020-09-01T18:00:00+0000"/>
<meta itemprop="endDate" content="2020-09-01T19:00:00+0000"/>
<div itemprop="performer" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Event Performer Name}}"/>
</div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<meta itemprop="name" content="Address name"/>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Address">
<meta itemprop="addressLocality" content="Locality">
<meta itemprop="addressRegion" content="Region"/>
<meta itemprop="postalCode" content="PostCode">
<meta itemprop="addressCountry" content="Country">
</div>
</div>
</div>
</div>

Why open graph tags <meta> don't work on thymeleaf template

I added open graph meta tags to my thymeleaf page.
When I try to share my page - it looks like tags absent.
My page (partially) code
<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
prefix="og: //ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link th:href="#{/css/app.css}" rel="stylesheet"/>
<title th:text="${'pageTitle'}">Title</title>
<meta property="og:type" content="article" />
<meta property="og:url" th:content="${'https://my_site_url'}" />
<meta property="og:title" th:content="${'pageTitle'}" />
<meta property="og:description" th:content="${'DESCRIPTION'}" />
<meta property="og:image" th:content="#{'https://pp.vk.me/c629531/v629531034/3172e/xEBYyER1WE4.jpg'}" />
</head>
<body>
<section class="base fullpage">
<div class="fullpage__content">
<div th:replace="component/partial/header"/>
<div th:replace="${page}"/>
</div>
<div class="fullpage__bottom">
<div th:replace="component/partial/footer"/>
</div>
</section>
<div th:replace="component/auth/auth"/>
</body>
</html>
And my share page button
<a th:href="#{'https://twitter.com/share?url=' + ${full_my_Page_Url}}" rel="canonical" target="_blank" class="c-article-socials__link twitter-share-button">
<div class="icon">
<img th:src="#{/img/icons/social/tw-h.svg}" alt="">
</div>
</a>
I expected share preview card if full by open graph tags, but now it is empty, I can share, but haven't information. Only the link from the share button, but no info from og prefix info
UPDATES
My generated HTML head code looks like:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/app.css" rel="stylesheet">
<title>Статья</title>
<meta property="og:type" content="website">
<meta property="og:url"content="https://localhost:8443/articles/instruction/2">
<meta property="og:title" content="Статья">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content="/cmsstatic/img/posts/image_5.png">
</head>

Tracking URL changing automatically to a different one

We have a Microdata Parcel Delivery markup code for our shipping confirmation email. Everything works great, but something strange happens.
For both the trackingUrl and the potentialAction url, we put our Narvar link: this is a service we use, that provides users with an intermediary page, where they see the status of their shipping and some additional info. If they want, on that page they can click on their UPS/FedEx/USPS link and go to their websites for more information.
In spite of this, when someone receives the email with the Markup code, right away the Narvar url is behind the button and call to action links. Then, after a few seconds, the button changes and the link "behind" it becomes the UPS/FedEx/USPS one.
The weird thing is that the UPS/FedEx/USPS link never appear in the Markup code, noyl the Narvar one does.
Has anyone experienced this and knows if this is expected?
Maybe the code automatically bypasses intermediary pages, recognizing the "final destination" and use that instead?
Can something be done to avoid this?
Thanks!
UPDATE: added code and screenshots
https://snag.gy/8ZBax6.jpg shows the email as soon as it hits the inbox: clicking in the link brings you to the Narvar web page
https://snag.gy/7tOD6l.jpg shows the email a few seconds after it got to the inbox: the link will bring you directly to the USPS website, no signs of Narvar
Here is the code we use:
<div itemscope itemtype="http://schema.org/ParcelDelivery">
<div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="name" content="Stefano Pistillo"/>
<meta itemprop="streetAddress" content="63 Bovet Road Suite 224"/>
<meta itemprop="addressLocality" content="San Mateo"/>
<meta itemprop="addressRegion" content="CA"/>
<meta itemprop="addressCountry" content="US"/>
<meta itemprop="postalCode" content="94402"/>
</div>
<meta itemprop="expectedArrivalUntil" content="07/05/2018"/>
<div itemprop="carrier" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="USPS PRIORITY MAIL NO CHARGE"/>
</div>
<div itemprop="itemShipped" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="W's Fitz Roy Down Jkt"/>
<link itemprop="url" href="http://www.patagonia.com/us/product/?p=84596-1-NVYB"/>
<link itemprop="image" href="http://www.patagonia.com/dis/dw/image/v2/ABBM_PRD/on/demandware.static/-/Sites-patagonia-master/default/images/hi-res/84596_NVYB.jpg?sw=100&sh=100&sm=fit&sfrm=png"/>
<meta itemprop="sku" content="84596"/>
<meta itemprop="color" content="NVYB"/>
</div>
<meta itemprop="trackingNumber" content="XXXXXXXXXX"/>
<link itemprop="trackingUrl" href="http://patagonia.narvar.com/patagonia/tracking/USPS?service=PP&ozip=94402&dzip=&tracking_numbers=XXXXXXXXXX"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/TrackAction">
<link itemprop="url" href="http://patagonia.narvar.com/patagonia/tracking/USPS?service=PP&ozip=94402&dzip=&tracking_numbers=XXXXXXXXXX"/>
</div>
<div itemprop="hasDeliveryMethod" itemscope itemtype="http://schema.org/ParcelService">
<meta itemprop="name" content="http://schema.org/ParcelService"/>
</div>
<div itemprop="partOfOrder" itemscope itemtype="http://schema.org/Order">
<meta itemprop="orderNumber" content="12345678"/>
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Patagonia.com"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderInTransit"/>
</div>
</div>

Simple Rails 3 Application Meta OG tags not reconfiguring

I've been working to re-skin this app.
I've changed the original OG tags in the application layouts file to this:
application.html.erb
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 <%= #bodyId %>"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 <%= #bodyId %>"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 <%= #bodyId %>"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9 <%= #bodyId %>"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="<%= #bodyId %>"> <!--<![endif]-->
<head>
<title>Tweak Tell Friends, Earn Free free shoes</title>
<link rel="icon" href="<%= asset_path('favicon.ico') %>" type="image/x-icon">
<link rel="shortcut icon" href="<%= asset_path('favicon.ico') %>" type="image/x-icon">
<meta property="og:title" content="Tweak is coming!"/>
<meta property="og:description" content="Our legacy in your closet. Didn’t want to leave you all behind. Share tweak and earn free shoes."/>
<meta property="og:image" content="<%= asset_path("refer/truman.png") %>"/>
<meta property="og:url" content="<%= root_url %>"/>
<% if #is_mobile %>
<% if #bodyId == 'home' %>
<meta name="viewport" content="width=1600" />
<% else %>
<meta name="viewport" content="width=1120" />
<% end %>
<% end %>
<%= stylesheet_link_tag "core.css", :media => "all" %>
<%= csrf_meta_tags %>
</head>
<body id="<%= #bodyId %>">
<%= yield %>
</body>
</html>
But for some reason it's rendering this when you click the share to Facebook button. Note that it still shows all the old content (I still have not changed the razor image but the other content should be set.)
I used Facebook's developer tool to see what they are seeing when scraping my staging app.
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 home"> <![endif]--><!--[if IE 7 ]> <html class="ie7 home"> <![endif]--><!--[if IE 8 ]> <html class="ie8 home"> <![endif]--><!--[if IE 9 ]> <html class="ie9 home"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html class="home">
<!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Tweak Tell Friends, Earn Free free shoes</title>
<link rel="icon" href="/assets/favicon-0c278a6f59ad0742674f70fc104b1ad3.ico" type="image/x-icon">
<link rel="shortcut icon" href="/assets/favicon-0c278a6f59ad0742674f70fc104b1ad3.ico" type="image/x-icon">
<meta property="og:title" content="Tweak is coming!">
<meta property="og:description" content="Our legacy in your closet. Didn’t want to leave you all behind. Share tweak and earn free shoes.">
<meta property="og:image" content="/assets/refer/truman-f2f6a0b791d7b2a6bb5cb9a32b2a0dae.png">
<meta property="og:url" content="https://tweak-staging.herokuapp.com/">
<link href="/assets/core-e009a81f9ad71a7faa17350a2751d9ca.css" media="all" rel="stylesheet" type="text/css">
<meta content="authenticity_token" name="csrf-param">
<meta content="tONzpSwUruFddfaGxJOJPp30OSy+aaSZERg9SnCbhyU=" name="csrf-token">
</head>
<body id="home">
<div class="hero">
<p class="large brandon">Tweak is launching</p>
<p class="small brandon">The next generation of <br>creative footwear</p>
</div>
<div class="form-wrap clearfix ">
<div class="key"></div>
<p class="byline brandon">Be the first to know</p>
<form accept-charset="UTF-8" action="/users/create" class="new_user" id="new_user" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="tONzpSwUruFddfaGxJOJPp30OSy+aaSZERg9SnCbhyU=">
</div>
<input class="email brandon" id="user_email" name="user[email]" placeholder="Enter Email" size="30" type="text"><input class="submit brandon" name="commit" type="submit" value="Step Inside">
</form>
</div>
</body>
</html>
What could be causing this issue? Is it something to do with the asset's pipeline? I've been able to precompile with no problem.
I ended up fixing this issue by hardcoding the home url and the image url in the content section of the meta tag.

Flight Reservation schema: No card showing in Google Now

Using Google Script (microdata format) and my own GMail account, I am sending a flight reservation schema, but the Flight card isn't showing in Google Now.
The corresponding Weather forecast cards (departure/arrival) are popping up on Google Now for android phone, but not the Flight card.
Here is the code I have used...
<div style='display:none;' itemscope itemtype='http://schema.org/ReservationPackage'>
<div itemscope itemtype="http://schema.org/FlightReservation">
<meta itemprop="reservationNumber" content="FF6600"/>
<link itemprop="reservationStatus" href="http://schema.org/Confirmed"/>
<div itemprop="underName" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Saravanan Padmanabhan"/>
<meta itemprop="email" content="eva#mail.com"/>
</div>
<div itemprop="bookingAgent" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Cheap Air Travel"/>
<link itemprop="url" href="http://cheapair.com/"/>
</div>
<meta itemprop="bookingTime" content="2013-01-14T13:05:00-05:00"/>
<meta itemprop="modifiedTime" content="2013-03-14T13:05:00-05:00"/>
<div itemprop="programMembership" itemscope itemtype="http://schema.org/ProgramMembership">
<meta itemprop="memberNumber" content="4BY123111"/>
<meta itemprop="program" content="StarAlliance"/>
</div>
<div itemprop="reservationFor" itemscope itemtype="http://schema.org/Flight">
<meta itemprop="flightNumber" content="110"/>
<div itemprop="airline" itemscope itemtype="http://schema.org/Airline">
<meta itemprop="name" content="United"/>
<meta itemprop="iataCode" content="UA"/>
</div>
<div itemprop="operatedBy" itemscope itemtype="http://schema.org/Airline">
<meta itemprop="name" content="Continental Airlines"/>
<meta itemprop="iataCode" content="CO"/>
</div>
<div itemprop="departureAirport" itemscope itemtype="http://schema.org/Airport">
<meta itemprop="name" content="San Francisco Airport"/>
<meta itemprop="iataCode" content="SFO"/>
</div>
<meta itemprop="departureTime" content="2013-06-19T20:15:00-08:00"/>
<meta itemprop="departureTerminal" content="B"/>
<div itemprop="arrivalAirport" itemscope itemtype="http://schema.org/Airport">
<meta itemprop="name" content="John F. Kennedy International Airport"/>
<meta itemprop="iataCode" content="JFK"/>
</div>
<meta itemprop="arrivalTime" content="2013-06-20T06:30:00-05:00"/>
<meta itemprop="arrivalTerminal" content="B"/>
</div>
<meta itemprop="ticketNumber" content="FF6600"/>
<meta itemprop="airplaneSeat" content="9A"/>
<div itemprop="airplaneSeatClass" itemscope itemtype="http://schema.org/AirplaneSeatClass">
<meta itemprop="name" content="Business"/>
</div>
<meta itemprop="boardingGroup" content="B"/>
</div>
</div>
Basically it is the same as in the Google example, except I have changed the date and location, just in case Google Now would be based on those.
My Questions:
Should I be seeing a Flight card or any other cards in the Android phone apart from Weather forecast.
On the iPhone (4s and 5) and the iPad, no new cards appear, despite having the same schema embedded in the emails, and using the same GMail login.
For reference, I have enabled the flight card in these devices.
Could someone please explain where the problem lies.
Did you see this? you need to supply JSON.
https://developers.google.com/gmail/schemas/reference/flight-reservation
Also Google schema validator is giving an error "Unknown type AirplaneSeatClass"
https://developers.google.com/gmail/schemas/testing-your-schema#schema_validator
After removing the AirplaneSeatClass meta i was able to validate the email.

Resources