When attempting to validate a schema.org/Article against Google's Structured Data Testing Tool, I noticed that it gives an error if you specify an SVG image:
The value provided for logo must be a valid URL.
Required by:
AMP Articles (what's this?)
When the URL is changed to have a .png (or .jpg, .bmp, .webp, etc.) extension, rather than .svg, it passes validation.
Here is the example I'm working with:
<div itemscope itemtype="http://schema.org/Article">
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="name" content="Example" />
<meta itemprop="url" content="http://example.com" />
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://example.com/logo.svg" />
<meta itemprop="width" content="600" />
<meta itemprop="height" content="60" />
</div>
</div>
<meta itemprop="dateModified" content="2016-01-05T12:43" />
<meta itemprop="datePublished" content="2016-01-05T12:43" />
<meta itemprop="headline" content="Example" />
<meta itemprop="name" content="Example" />
<meta itemprop="author" content="Example" />
<link itemprop="mainEntityOfPage" href="http://example.com/article" />
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://example.com/article.jpg" />
<meta itemprop="width" content="1200" />
<meta itemprop="height" content="800" />
</div>
</div>
Changing the other image's URL's extension will also produce the error.
I was unable to find any information on why it rejects SVGs in the Rich Snippets documentation or the AMP HTML spec. Does anyone have an explanation for this behavior?
Google has updated the documentation and specifically mentioned svg.
Logo image files should be raster (for example, .jpg, .png, .gif), not vector (for example, .svg), with no animation.
From one of the links you gave: https://developers.google.com/structured-data/rich-snippets/articles
Images should be in .jpg, .png, or. gif format.
Why? Who knows. Perhaps because SVGs still have some support issues in some browsers (particularly older ones).
Update: 2022 - after reading the google documentation, it seems they do now accept svgs. https://developers.google.com/search/docs/appearance/structured-data/logo#structured-data-type-definitions
Related
I am having difficulty on how to properly display this like the real ones. Right, so
here's my piece of code. You can try this on your respective IDE's to view the page
because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it.
I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Google Login</title>
<link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-
icon">
</head>
<body>
<div id="header">
Gmail
Images
<img src="pad.png">
<img src="cs-logo.png">
</header>
<main>
<input type="search">
<img src="google-voice-search-icon.png">
<img src="googlelogo_color_272x92dp.png">
<button>Google Search</button>
<button>I'm feeling lucky</button>
</main>
<p>Google offered in: Filipino <a href="#">Cebuano</p>
</div>
</body>
</html>
The property src="" in the img tag will take the image from the local path or an URL to an image.
If you want, for example, the doodle's image you have two options:
Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
I hope this could help.
I trying to use the Docusign REST api to retrieve a page image from a specified envelope.
Using the GetDocumentPageImage api call specified in the docusign's developer resources:
https://docs.docusign.com/esign/restapi/Envelopes/Envelopes/getDocumentPageImage/
When I make a call, I receive in the response header:
content-type:image/png
When I save the raw binary to disk and try to open it, it doesn't seem to be a PNG file. Opening the file a text editor to inspect the contents shows that th file begins with:
˝PNG IHDR...
which seems to be a valid PNG file header, but ends with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Image</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<meta name="robots" content="noindex, noarchive" />
</HEAD>
<body MS_POSITIONING="GridLayout">
<form method="post" action="./image.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUxMTcwNzgxMGRkQRcFn//jRJ+06xbvFxUi4rKEZIQb6fRuQKDtT8P6CNnm/JfLfRFk+peLPbzp4xXAtupqCca4iRWWnIYdQRieIA==" />
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="40952B3F" />
</form>
</body>
</HTML>
I tried to strip the end part of the file that has the Microsoft rubbish with no luck. It seems the response content has been encoded differently some way and the docs don't explain what this is and how to decode.
My Facebook sharing plugin does not work right for this blog post page at https://www.tradesumo.com/Home/LearningsFromLaunchingAStartupWhileAtUniversity at the bottom of the page under "Like our blog post? Share this with your friends!" When I try to share it, it loads up our error page (you will see lots of pandas) instead of the specified image and the right title and description.
I don't understand why this isn't working coz the code we used is pretty similar to what I used for https://www.tradesumo.com/Home/Blog where the FB social sharing icon is working fine, and propagating the right things from the meta tags of that view.
Just FYI, the following are the meta tags and code for the FB sharing plugin respectively, for the blog and the blog post:
BLOG:
#section AdditionalMeta
{
<meta name="robots" content="noindex,nofollow"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="TradeSumo | Blog" />
<meta property="og:image" content="~/Scripts/Landing/assets/img/custom/meta.jpg" />
<meta property="og:url" content="https://www.tradesumo.com/Home/Blog" />
<meta property="og:description" content="Latest news, updates and events about TradeSumo." />
}
<li><img src="~/Scripts/Landing/assets/img/flat_web_icon_set/color/Facebook.png"></li>
BLOG POST:
#section AdditionalMeta
{
<meta name="robots" content="noindex,nofollow"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="TradeSumo | Learnings From Launching A Startup While At University" />
<meta property="og:image" content="~/Scripts/Landing/assets/img/blog/startupweekend1.jpg" />
<meta property="og:url" content="https://www.tradesumo.com/Home/LearningsFromLaunchingAStartupWhileAtUniversity" />
<meta property="og:description" content="People always ask me what launching a tech startup while studying or working is like. It is definitely possible as long as you have a committed team with a united vision." />
}
<li><img src="~/Scripts/Landing/assets/img/flat_web_icon_set/color/Facebook.png"></li>
Would be great if someone could tell me why it is wrong.... I also tried debugging the plugin through the URL at https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fwww.tradesumo.com%2FHome%2FLearningsFromLaunchingAStartupWhileAtUniversity but dunno what is the problem!
I discovered that the problem was with the image meta tag. It needs to have the full URL:
<meta property="og:image" content="https://www.tradesumo.com/Scripts/Landing/assets/img/blog/startupweekend1.jpg" />
rather than this:
<meta property="og:image" content="~/Scripts/Landing/assets/img/blog/startupweekend1.jpg" />
Somehow the plugin cannot find the image and returns an error page coz of the image. It is weird that I have to treat the blog and blog post views differently for the image meta tag, coz I used the latter meta tag for the blog view and it works okay, and both the blog and the blog post views reside within the same Home Controller, so by right, they SHOULD work the same way. Anyway, problem fixed!
I'm having issues getting my code: (http://codepen.io/hoschiCZ/pen/rOJmmr) to work.
<html>
<head>
<meta charset="utf-8">
<title>The title doesn't matter</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><center>MDL test</center></span>
</div>
</header>
<div class="mdl-grid" style="margin: 0px">
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
<div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
There is the main text/content located. This has to stay visible at all costs and screen sizes.
<br><small>Material Design Lite courtesy of Google, Inc.</small>
</div>
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
</div>
</div>
</body>
</html>
The intended columns layout & counts are as follows:
Desktop 3-6-3
Tablet 1-6-1
Phone 0-4-0
The outer numbers/cols are probably space for ads or just empty space, is just looks bad otherwise.
The problem is: it's not responsive, even after refreshing pages. I tried Chromium Linux mobile/tablet emulation and Nexus 5 Firefox & Chrome. Everywhere, the desktop version is used.
MDL requires you to include this in the header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Btw I didn't see it written in the Getting Started guide, maybe add it there?
Working CodePen
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
into
<head></head>
Your problem is that you haven't wrapped your .mdl-grid in a .mdl-layout__content
<div class="mdl-layout__content">
<div class="mdl-grid">row</div>
</div>
I made a jsfiddle example for you.
Just expand the window slider and you'll see what you are desiring.
I have a page that Google Chrome insists on thinking is in French.
Here's a snapshot of it:
http://yootles.com/outbox/overcleverchrome.html
Note that I'm including a meta http-equiv tag to tell it that it's in fact in English:
<meta http-equiv="Content-language" content="en">
But it doesn't help.
Is there anything else I can do to prevent this?
Google Chrome currently requires several tags to make an (HTML5) document opt out of translation. Before doing this, you should be sure that you know your audience's language, as otherwise it will prevent foreign sites from properly translating your site.
The relevant tags are:
<meta charset="UTF-8" />
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="en_US" />
And here is a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="en_US" />
</head>
<body>
Dies ist ein Test Deutsch
</body>
I found a post which might help you: http://www.blogsdna.com/4593/how-to-stop-google-from-translating-your-website-or-webpage.htm
You can either use a meta tag:
<meta name="google" value="notranslate">
Or you can use a class:
<span class="notranslate"></span>
I hope that answered your question.
EDIT: I Just checked my blog which I offer in German and English. On each language version Chrome doesn't ask me for translation: http://kau-boys.de
I checked my source code and the multilanguage plugin only included this code:
<meta http-equiv="Content-Language" content="en_US" />
So maybe your locale needs to have a subregion, like US in this example.
You guys should be referencing http://support.google.com/webmasters/bin/answer.py?hl=en&answer=79812 and not guessing what works
<meta name="google" content="notranslate" />
Adding <meta name="google" value="notranslate"> (not W3C by the way) or <meta name="google" content="notranslate"> doesn't avoid the annoying translate popups.
BUT I have tried the following and it seems to work:
You can avoid translation of the page by adding class="notranslate" to the <body> tag!
I have success with <meta name="google" content="notranslate" />
remember to open the page in a new tab or a new window after insert
<meta name="google" value="notranslate">
otherwise it looks not work, but it actually works well.
On an older version of Chrome (18.x), the Content-Language meta tag seems to have no effect on the translation popup, unless it is lowercased:
<meta http-equiv="content-language" content="en" />
(to be clear --http-equiv="Content-Language" did not work; neither did name="content-language")