I have just logged into Google Webmaster Tools and am finding an error in structured data relating to a new WordPress theme I am using:
JSON-LD: There was an error parsing your JSON-LD.
The code it is referring to is:
<meta property="og:site_name" content="Townsville Nerds - Ph 0402 807 890" />
<script type='application/ld+json'>
execOnReady(function({{"#context":"http:\/\/schema.org","#type":"WebSite","url":"http:\/\/www.townsvillenerds.com\/","name":"Townsville Nerds - Ph 0402 807 890"}})
</script>
NOTE: In Webmaster Tools there is a red underscore under the "e" in the word "execOnReady".
Your data block does not contain valid JSON-LD (application/ld+json).
Instead of
<script type='application/ld+json'>
execOnReady(function({{"#context":"http:\/\/schema.org","#type":"WebSite","url":"http:\/\/www.townsvillenerds.com\/","name":"Townsville Nerds - Ph 0402 807 890"}})
</script>
it should be
<script type='application/ld+json'>
{"#context":"http:\/\/schema.org","#type":"WebSite","url":"http:\/\/www.townsvillenerds.com\/","name":"Townsville Nerds - Ph 0402 807 890"}
</script>
I guess you don’t need to escape the /, so it could be:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebSite",
"url": "http://www.townsvillenerds.com/",
"name": "Townsville Nerds - Ph 0402 807 890"
}
</script>
Related
For example, there is a news article with 3 images. The first one — main picture, the other two — photos from social network.
I want: 1) define the first picture as main image. This one search engines should use for rich results.
2) Define other 2 images as related to the news topic.
#1 All images goes to Article.image property.
<html>
<head>
<title>Article headline</title>
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "NewsArticle",
"headline": "Article headline",
"image": [
"https://example.com/photos/photo1x1.jpg",
"https://example.com/photos/photo4x3.jpg",
"https://example.com/photos/photo16x9.jpg",
"https://example.com/photos/2.jpg",
"https://example.com/photos/3.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00"
}
</script>
</head>
<body>
</body>
</html>
#2 Only first image goes to Article.image property, other two — Article.hasPart.
<html>
<head>
<title>Article headline</title>
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "NewsArticle",
"headline": "Article headline",
"image": [
"https://example.com/photos/photo1x1.jpg",
"https://example.com/photos/photo4x3.jpg",
"https://example.com/photos/photo16x9.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"hasPart": [
{
"#type": "ImageObject",
"url": "https://example.com/photos/2.jpg"
},
{
"#type": "ImageObject",
"url": "https://example.com/photos/3.jpg"
}
]
}
</script>
</head>
<body>
</body>
</html>
Which one is more correct?
Define other 2 images as related to the news topic.
Structured Data is highly dependent on the content of the linked web page. If we assume that your web page has the appropriate structure for three images, then, in this case, using the property about or subjectOf can help you. Embed a type that is most appropriate for the sub-subject. And for this type, set a separate image property. This can create rich results that present images for the subject of the entire article and images for sub-subjects of the same article. However, structured data depends on the details.
I've a flutter web app that'll run on the localhost perfectly but when I deploy it to firebase I get a blank page. In setting up firebase hosting I selected build/web as my public directory. I ran flutter build web which compiles the app. The build directory is created. My firebase.json file looks fine.(pos-ap/build/web for the public directory is correct)
{
"hosting": {
"public": "pos-app/build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="pos">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>pos</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxx",
databaseURL: "xxxxxxxxx",
projectId: "xxxxxx",
storageBucket: "sxxxxxxxxxx",
messagingSenderId: "xxxxxxx",
appId: "1:xxxxxxxxx:web:xxxxxxxxxxxx7bc",
measurementId: "G-xxxxxxxxx"
};
// Initialize Firebase
// firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I'm not really familiar with web stuff. And apologies I can't really offer any more info. I suppose the only clue is that it works on localhost but not when deployed.
My root directory is..
|-pos-app
|-consumer-app
|-firebase.json
I'm trying to deploy pos-app which is a flutter app.
I have taken over the general administration of a business website. On the service pages, two separate instances of structured data are being loaded (the Service schema type, and the Webpage schema type).
<script type='application/ld+json'>
{
"#context": "http://schema.org/",
"#type": "Service",
"serviceType": "Service Type Here",
"alternateName": "Alternate Service Name Here",
"description": "Description Here",
"mainEntityOfPage": "https://www.WebsiteAddress.com/service-type",
"name": "Service Name"
}
</script>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"name": "Webpage Name",
"url": "https://www.WebsiteAddress.com/service-type",
"inLanguage":"en-US",
"description": "Description Here",
"publisher": {
"name": "Business Name"
}
}
</script>
Could the current setup cause conflicts with how search engines interpret the page?
As most of the tags are duplicates, would it make more sense to remove the Webpage type schema markup and add the brand tag into the Service schema?
Interested to hear opinions on this.
About your Q. The short answer is YES => It's ok to declare two types (-or- more) on the same page (No "one rule" her - it's related to page structure/content).
"duplication" -
First As most of the tags are duplicates is a wrong sentence (One time the name related to webPage object and one time for service object). If in your specific case "service name" = "page name" it's ok to use the same value (This is the true semantic meaning of your content).
WebPage & Service
WebPage is a special type:
Every web page is implicitly assumed to be declared to be of type
WebPage. https://schema.org/WebPage
If you look at this issue in the microdata approach it's easier to understand the structure/idea of the sentence above.
a.The webpage (Again - Every page assumed to be of type WebPage):
<body itemscope="" itemtype="http://schema.org/WebPage">
<h1 itemprop="name">Our services</h1>
</body>
b.The service
<div itemscope itemtype="http://schema.org/TaxiService">
<h2 itemprop="name">Drive to airport</h2>
</div>
a & b - could look like this:
<body itemscope itemtype="http://schema.org/WebPage">
<h1 itemprop="name">Our services</h1>
<div itemscope itemtype="http://schema.org/TaxiService">
<h2 itemprop="name">Drive to airport</h2>
</div>
</body>
If page name = service name - you could do something like this:
<body itemscope itemtype="http://schema.org/WebPage">
<meta itemprop="name" content="Drive to airport">
<div itemscope itemtype="http://schema.org/TaxiService">
<h1 itemprop="name">Drive to airport</h1>
</div>
</body>
Nothing wrong her.
1/2. The page name is "Drive to airport" (true):
2/2. And the service name is "Drive to airport" (true):
If the service is the main entity of webPage this outline is a good start point (Close to your Q code example):
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"name": "Our services",
"breadcrumb": "main > Our services",
"mainEntity":{
"#type": "service",
"name": "Drive to airport"
}
}
</script>
I know this can be done because i'm looking at an invoice from a telco in my gmail inbox mobile app but I don't know how to set the gmail markup / schema to make it happen.
The example I have shows:
August bill for xxxx
Total: $xxx, due MMM DD
$ Total amount due
$xxxx
Due date
DD MMM
Issuer
Telco X
Can anyone help?
I can't find any guidance on the email markup pages on Google.
It uses regular http://schema.org markup within the HTML of the email. See gmail markup reference.
Example adapted from google's gmail markup example:
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Amazon.com"/>
</div>
<meta itemprop="orderNumber" content="123-4567890-1234567"/>
<meta itemprop="priceCurrency" content="USD"/>
<meta itemprop="price" content="259.99"/>
<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Samsung Chromebook"/>
<meta itemprop="sku" content="B009LL9VDG"/>
<link itemprop="url" href="https://rads.stackoverflow.com/amzn/click/com/B009LL9VDG" rel="nofollow noreferrer"/>
<link itemprop="image" href="http://ecx.images-amazon.com/images/I/81H-DO3qX0L._SX522_.jpg"/>
</div>
<meta itemprop="price" content="249.99"/>
<meta itemprop="priceCurrency" content="USD"/>
<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
<meta itemprop="value" content="1"/>
</div>
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Samsung Marketplace Store"/>
</div>
</div>
</div>
<div itemprop="priceSpecification" itemscope itemtype="http://schema.org/DeliveryChargeSpecification">
<meta itemprop="price" content="10.00"/>
<meta itemprop="priceCurrency" content="USD"/>
</div>
<link itemprop="url" href="https://www.amazon.ca/gp/css/summary/edit.html/orderID=123-4567890-1234567"/>
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
<link itemprop="target" href="https://www.amazon.ca/gp/css/summary/edit.html/orderID=123-4567890-1234567"/>
</div>
<link itemprop="orderStatus" href="http://schema.org/OrderStatus/OrderProcessing"/>
#AaronP, I've posted my findings and example in this issue similar to your question. Using schema.org/Invoice and schema.org/PayAction, I was able to get the email similar to what you received from Telco X. Keep in mind that this seems only active with Inbox and not Gmail.
<script type="application/ld+json">
[
{
"#context": "http://schema.org",
"#type": "Invoice",
"description": "January 2015 Acme Bill",
"url": "https://www.americanexpress.com",
"accountId": "xxxx-xxxx-xxxx-1234",
"potentialaction": {
"url": "https://example.com",
"#type": "PayAction"
},
"paymentDue": "2020-01-30",
"minimumPaymentDue": {
"#type": "PriceSpecification",
"price": "$15.00"
},
"totalPaymentDue": {
"#type": "PriceSpecification",
"price": "$200.00"
},
"paymentStatus": "payment due",
"provider": {
"#type": "Organization",
"name": "Acme Bank"
}
}
]
</script>
You should get this:
Question
Does anyone have a working example of code for a login button?
Detail:
I need it to be a <paper-button> that says, "Login with x." Where "x" is any one of the following: "Google", "Google Plus", "Facebook", "Linked In", "Yahoo", or "Twitter".
Obviously, the button also needs to "point to" or integrate with the respective service it mentions.
Also please note, <google-signin> described here doesn't work for me because I need to use my own button (for styling purposes). I don't want to use the <google-signin> button. I just need the functionality it provides. And more specifically, how to implement that functionality using my own <paper-button> element.
Code:
<paper-button>Login with Google</paper-button>
<paper-button>Login with Google Plus</paper-button>
<paper-button>Login with Facebook</paper-button>
<paper-button>Login with Linked-In</paper-button>
<paper-button>Login with Yahoo</paper-button>
<paper-button>Login with Twitter</paper-button>
Element
<!--
#license
Copyright (c) 2015 Glenn Vandeuren. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<dom-module id="login-button">
<style>
:host {
display: block;
box-sizing: border-box;
}
</style>
<template>
<paper-button raised>Login using <span>[[service]]</span></paper-button>
</template>
</dom-module>
<script>
Polymer({
is: 'login-button',
properties: {
service: String
},
listeners: {
'tap': '_handleTap'
},
_handleTap: function () {
this.fire('login', this.service);
}
});
</script>
Index
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>login-button Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../login-button.html">
</head>
<body>
<login-button service="google"></login-button>
<login-button service="twitter"></login-button>
<script>
document.addEventListener('login', function(service) {
// handleLogin();
alert(service.detail);
});
</script>
</body>
</html>
On this question, Ian, posts this answer:
I ended up getting auth to work by adapting this example element by HackITtoday for my firebase urls.