Event reservation email markup not recognize "action" attribute - google-schemas

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>

Related

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

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:

Trouble with #Html.ActionLink

I try to do left-side bar but all time i get error "[HttpException (0x80004005):Detected a potentially dangerous value Request.Path coming from the customer". What is wrong with that?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="~/Content/bootstrap.css" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<a class="navbar-brand" href="# Url.Action("List","Person")">Aplikacja</a>
</div>
<div class="row">
<div class="col-xs-2">
<ul class="nav nav-pills nav-stacked span3">
<li>Przyklad </li>
</ul>
</div>
<div class="col-xs-8">
#RenderBody()
</div>
</div>
</body>
</html>
#Html.ActionLink generates the markup for an anchor tag. You do not want to set that as the href value of another anchor tag.
When razor executes your current code, It will try to generate markup like below
Przyklad
Which is clearly invalid!
Solution : Either simply use Html.ActionLink alone,
<li>#Html.ActionLink("Przyklad","Navigator", "YourControllerName")</li>
Or
use use Url.Action to set the href value of an anchor tag.
<li>Przyklad </li>

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.

intel app framework centering content

I want to create a very simple layout with buttons on bottom of screen and some centered content.
How may I achieve this with Intel app Framework UI.
I need to support all screen sizes of course.
Here is example in Intel App Framework: http://jsbin.com/valuc/1/edit
<!DOCTYPE html>
<html>
<head>
<title>App Framework</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"></script>
<style>
#page1 {text-align: center}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<div class="panel" title="Welcome" id="page1" selected="true">
<p>This is come content</p>
<p>This text is centered in the panel</p>
</div>
</div>
<div id="navbar">
<a class="icon home" href="#button1">Button 1</a>
<a class="icon settings" href="#button2">Button 2</a>
</div>
</div>
</body>
</html>
You also refer to some basic templates created using Intel App Framework to get started: https://github.com/krisrak/appframework-templates

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