Note: using the same PATCH request as defined in Onenote API (REST) - PATCH append - "must include a 'commands'" error when Commands is already supplied (?!)
Each PATCH request is an append operation, and uses the following layout supplied to |HTML| in my code:
<div>
<h1>Hardcoded_Name_ForNow</h1>
<h3>4.345054</h3>
<p>sdfsdfsdf</p>
<img src="name:image-part-name" alt="New binary image" />
</div>
However, when I GET the content of the page (ref: https://jsapi.apiary.io/apis/onenote/reference/get-pages/v10pagesid/get.html?console=1), it turns out like this:
(HEADER OMITTED)
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div style="width:624px">
<h1 style="font-size:16pt;color:#1e4e79;margin-top:11pt;margin-bottom:11pt">Hardcoded_Name_ForNow</h1>
<h3 style="font-size:12pt;color:#5b9bd5;margin-top:11pt;margin-bottom:11pt">47.77527</h3>
<p>TEST</p>
<img alt="New binary image" width="624" height="353" src="https://www.onenote.com/api/v1.0/resources/0-60a8d03c70a04372ad60cabb8191f86d!1-6C3CB48828A4FCE7!185/$value" data-src-type="image/png" data-fullres-src="https://www.onenote.com/api/v1.0/resources/0-60a8d03c70a04372ad60cabb8191f86d!1-6C3CB48828A4FCE7!185/$value" data-fullres-src-type="image/png" />
<h1 style="font-size:16pt;color:#1e4e79;margin-top:11pt;margin-bottom:11pt">Hardcoded_Name_ForNow</h1>
<h3 style="font-size:12pt;color:#5b9bd5;margin-top:11pt;margin-bottom:11pt">41.16911</h3>
<p>ewqeqweqweqew</p>
<img alt="New binary image" width="624" height="353" src="https://www.onenote.com/api/v1.0/resources/0-9d9ab7935d16464eb826e70dd7fdb3ef!1-6C3CB48828A4FCE7!185/$value" data-src-type="image/png" data-fullres-src="https://www.onenote.com/api/v1.0/resources/0-9d9ab7935d16464eb826e70dd7fdb3ef!1-6C3CB48828A4FCE7!185/$value" data-fullres-src-type="image/png" />
...
</div>
</body>
I know that if I didn't supply a specific target ID, the PATCH request will target the topmost . However, I expected the PATCH request to throw in the layout wholesale without stripping the encapsulator.
Currently working around it by assuming h1, h3, p, img will always be in order, but this is harder to maintain if the tag order changes or new tags are added.
Enabling div id attributes doesn't help, the are simply not there in the first place.
We don't really have a way to store arbitrary containers in OneNote, so we sort of do our best to resynthesize them on demand. Unless they have some meaningful distinguishing data, individual ones can melt away, as you are seeing. Our aim it to get presentation content in and out of the surface rather than to be a high fidelity HTML store.
So that said, if you add a data-id="UniqueFoo" attribute to your , we treat it as semantically meaningful, so we do extra work to reproduce those semantics. The HTML may not be exactly the same, but we should produce the semantic equivalent as far as containment goes, which will likely in this simple case mean your is preserved as you'd expect.
You could use a guid or some such as the data-id attribute for an easy unique value if there's nothing unique in your app that these divs represent.
Related
I have this snippet in a LocalBusiness listing (based on this example):
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src="/images/trouwlocatiefotos/medium/315_24_83_Veranda-005.jpg">
</div>
</div>
But Google's structured data testing tool throws an error:
image
A value for the image field is required.
Why is it throwing the error?
Testing the URL directly: https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fwww.wonderweddings.com%2Fweddingvenues%2F315%2Fbeachclub-sunrise
The markup snippet you posted doesn’t give the quoted error. So your actual markup is probably doing things differently.
It seems that your image property isn’t nested under the LocalBusiness item:
Line 396: <div itemscope itemtype="http://schema.org/LocalBusiness">
Line 372: <div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
No itemref involved.
So your LocalBusiness item really doesn’t have an image property. Instead, the image property seems to be specified without any parent item (= itemscope), which is invalid.
Google’s SDTT probably ignores this error and parses the ImageObject as a top-level item, which is why it’s listed on its own (next to LocalBusiness and BreadcrumbList).
How to fix this?
If you can’t move the elements to nest them (like in your example snippet), you could make use of Microdata’s itemref attribute:
<div itemscope itemtype="http://schema.org/LocalBusiness" itemref="business-image"></div>
<div itemprop='image' itemscope itemtype='http://schema.org/ImageObject' id="business-image"></div>
Add in snippet
In LocalBusiness schema, Required image, PriceRange field
Properties from Thing - Google returns errors..
Error:
image=A value for the image field is required.
priceRange=The priceRange field is recommended. Please provide a value if available.
Ans: add in code
1.For (image,logo,photo)= Image Object or URL = An image of the item. This can be a URL or a fully described ImageObject.
For priceRange = Text = The price range of the business, for example $$$.
That items mandatory in LocalBusiness
I have a template which contains (in part) exactly the same content repeated two or three times with minor changes to the bindings, eg:
<div class="xyz-state0" data-ng-hide="data.error || !data.states[0].name">
<div class="xyz-content">
<img data-ng-src="{{data.states[0].image}}" width="48" height="48">
<span>{{data.states[0].name}}</span>
</div>
</div>
<div class="xyz-state1" data-ng-hide="data.error || !data.states[1].name">
<div class="xyz-content">
<img data-ng-src="{{data.states[1].image}}" width="48" height="48">
<span>{{data.states[1].name}}</span>
</div>
</div>
How do I write this to avoid duplicating this HTML? This is specific to its parent view (it won't be used anywhere else) so creating a full-blown widget seems wrong.
Basically I want something similar to ngRepeat, but I can't use that for the following reasons:
I need a specific (and different) style on each parent div.
I need to render a specific number of divs (2 in this case, 3 in another) regardless of whether or not they exist in the scope (ie. data.states could only have 1 element in it, but it still needs to create both divs).
In the other case the items need to be rendered out of order (first 1, then 0, then 2).
I've managed to get a template fragment in a separate HTML file and included it with ngInclude, but I don't know how to get a single name in its new scope to refer to a specific item. My first attempt was this, which doesn't work:
<div class="xyz-state0" data-ng-include="'state.tpl.html'" data-ng-init="state=data.state[0]"></div>
<div class="xyz-state1" data-ng-include="'state.tpl.html'" data-ng-init="state=data.state[1]"></div>
I suspect I could probably do it with a custom controller, but that seems like a heavy solution too. What's the Right Way™?
This is pretty much a textbook case for a custom directive. Define a directive, and then you can do
<state ng-repeat="item in data.states" item="item">.
Alternatively, if a custom directive is too much overkill (depends on whether you'll be reusing that view component elsewhere, mainly), you could just put an ng-repeat on the entire div. The only real issue is the class="xyz-stateN" stuff, but I bet you could hoke that up with ng-class usage.
EDIT:
if you do an ng-repeat, you can just use the $index key (as long as you're always counting up from zero and the state class is the same as the index). Something like
<div ng-class="{{'xyz-state'+$index}}" ng-repeat="state in data.states" data-ng-hide="data.error || !state.name">
<div class="xyz-content">
<img data-ng-src="{{state.image}}" width="48" height="48">
<span>{{state.name}}</span>
</div>
</div>
Would probably work fine. All that said, it's almost always worth making a directive in my opinion. Code gets recycled all the time, plus you can be cautious with namespacing and modularizing if that makes you nervous.
Well, this seems to do the trick (thanks to pfooti for the hint). I'm still not entirely happy with it as the directive is registered globally, whereas I really only want it in this one place.
state.tpl.html:
<div class="xyz-content" data-ng-show="state.name">
<img data-ng-src="{{state.image}}" width="48" height="48" />
<span>{{state.name}}</span>
</div>
view.tpl.html:
<div data-xyz-state="data.states[0]" class="xyz-state0"
data-ng-hide="data.error"></div>
<div data-xyz-state="data.states[1]" class="xyz-state1"
data-ng-hide="data.error"></div>
app.js:
app.directive('xyzState', [function() {
return {
templateUrl: 'state.tpl.html',
scope: {
state: '=xyzState',
},
};
}]);
Interestingly it doesn't work if I try to declare the introducing element as <xyz-state ...> instead of <div data-xyz-state="" ...>, despite the docs saying that this ought to work too. I assume there's some sort of validation thing interfering here.
Just as an FYI, I later revisited this code and decided to do it like this instead: (I'm letting my original answer stand as that is more like what I was originally asking for, and they both seem reasonable in different cases.)
view.tpl.html
<div data-ng-repeat="state in data.states" data-ng-if="!data.error"
data-ng-class="state.class">
<div class="xyz-content" data-ng-show="state.name">
<img data-ng-src="{{state.image}}" width="48" height="48" />
<span>{{state.name}}</span>
</div>
</div>
app.js
...
while ($scope.data.states.length < 2)
$scope.data.states.push({});
$scope.data.states[0].class = 'xyz-state1';
$scope.data.states[1].class = 'xyz-state2';
...
I've done something similar for the other (3-item) case, except there as I wanted to rearrange the order of the items I added an order property for the desired order in the controller and then used data-ng-repeat="button in data.buttons|orderBy:'order'" in the view.
This does mean that a bit of view definitions (display order and CSS classes) have leaked into the controller, but I think the benefit to code clarity outweighs that.
I put some effort in marking up an ancient message board with schema.org/UserComments microdata. Testing it in WMT yields an error message: Missing required field "dtstart".
Here’s an item, and apart from the table markup, I think it’s all fine:
<tr itemscope itemtype="http://schema.org/UserComments" itemprop="comment">
<td>
<meta content="2013-09-23T17:39:14+01:00" itemprop="commentTime">
<meta content="http://example.com/cmts/?id=321" itemprop="replyToUrl">
<meta content="comment’s title" itemprop="name">
<div itemscope itemtype="http://schema.org/Person" itemprop="creator">
<a itemprop="url" href="http://www.example.com/user/Nickname">
<img itemprop="image" src="http://cdn.example.com/pic.jpg">
<span itemprop="name">Nickname</span>
</div>
</td>
<td>
<p itemprop="commentText">the comment’s actual text</p>
</td>
</tr>
In UserComments, there’s no field named “dtstart”. In a similiar, yet not helpful question, there’s another link to WMT, stating somewhat implicit that startDate and dtstart are synonyms. This does not prove true, at least not for UserComments.
Is it a hitch at Google, so I can disregard it? Am I missing some point (datetime instead of content)?
Your Microdata and Schema.org usage is correct. They don’t define any required properties. So when the Google Structured Data Testing Tool reports "Missing required …" errors, it only means that Google (probably) won’t consider displaying a Rich Snippet when specific properties are missing.
When testing your snippet with a parent item for the comment property, no errors are reported, e.g.:
<article itemscope itemtype="http://schema.org/CreativeWork">
<table>
<!-- your tr here -->
</table>
</article>
Another solution: adding a startDate property (but Google might want to see a date from the future here.)
(The term "dtstart" probably comes from the data-vocabulary.org vocabulary, where Google required this property for the Event Rich Snippet. And Schema.org’s UserComments is also some kind of Event, see notes below.)
If you don’t care about Google’s Rich Snippets, you can keep it like that.
Notes about your snippet:
You might want to use Comment instead of UserComments (because the latter one is an Event, not a CreativeWork).
However, currently, the comment property expects UserComments, but this will most likely change in one of the next Schema.org updates.
For specifying replyToUrl, you must use link instead of meta.
The CKEditor 4.3 demo show an example of widget for work with HTML5 figure tag.
As a user (editing the demo text) I can not edit a second figcaption (one before image, as "figure title", and other after image, as caption): when edit (by CKEditor's source code) before, it goes after, when I add a paragraph (p tag) before image, also goes after. So, there are no way to user express distinct "head-caption" and "foot-caption", always CKeditor put after image.
There are some configuration to enable "head-captions"?
The edited source code:
<figure class="caption" style="float:right">
<figcaption>HEAD - Test</figcaption>
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
So, CKEditor transforms into,
<figure class="caption" style="float:right">
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>HEAD - Test</figcaption>
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
Idem with <p>HEAD - Test</p>. If I use only the <figcaption>HEAD - Test</figcaption>, it also goes after image (impossible to express a "before img caption").
NOTE-1: "head" and "foot" figcaptions are both valid in HTML5, as showed in this fiddle.
NOTE-2: another problem is a caption with more than one paragraph. CKEditor transforms it in a BR, that is not what author need in a typical journal.
NOTE-3: for this related needs — use of paragraphs, use of "before image" caption, and use of two captions —, see all needs of a typical journal at an stable standard like JATS fig element, or millions of article examples at PMC.
Short answer - no, there is no config option for that.
Some details - you're using the image widget, which is supposed to handle figure.caption>img+figcaption case. Specific widget may not work with every possible input and it happens in this case.
If you want to remove that limitation there are two ways:
Don't use the image widget by disabling it or remove class="caption" from your HTML. For example this HTML will not be changed:
<figure>
<figcaption>1</figcaption>
<img src="..." ...>
<figcaption>2</figcaption>
</figure>
Also, the enter key will work in a standard way inside figcaptions (will create <p> tags).
The other way, if you want to use the image widget, is to modify its behaviour. In case of simple widgets it can be done without touching widget code, inn the widgetDefinition event listener. However, image widget is pretty complex, so you'd have to change its code.
To change enter key behaviour, just change the widgetDefinition.editables.caption.allowedContent - it has to contain a p tag. This part can be done in widgetDefinition listener.
In order to be able to use two captions, you'd have to add another nested editable and modify the plugin code, because it handles only img+figcaption case.
I'm trying to use the <a> tag in HTML5 more as a container as this tag can now have block elements as children, example:
before (valid XHTML 1.1)
<div>
<h3>
article title
</h3>
<p>
text
</p>
<a href="page.html" title="article title" >
<img alt="image">
</a>
<a href="page.html" title="article title" >
read more
</a>
</div>
after (valid HTML5)
<a href="page.html" title="article title" >
<h3>
article title
</h3>
<p>
text
</p>
<img alt="image">
<div>
read more
</div>
</a>
Does this new way of markup have any effects for SEO?
OK, removing pure semantics from your question (which, in my mind, does have a material impact on deciding on implementing your chosen method) and concentrating on pure "SEO" value and impact:
The first example needs to be qualified more, as if we take your example as literal, then you are linking to the same page.html 3 times. Google (specifically) only takes the link anchor value from the 1st link to any page that it comes across, so - the value for the first example is only extracted from that first link. The 2nd link (using an IMG tag with an ALT attribute as the anchor value), and the 3rd link using read more as the anchor value are effectively "ignored". It's important that other signals are used to supplement the first link's true intended value, such as surrounding text, images etc.
The 2nd example (HTML5), wraps all of that semantic/surrounding content up to make the effective 'anchor' value from which search engines will derive the link's intended meaning, and then as a consequence, the meaning of the destination page of the link.
Using an anchor tag as a containing wrapper for content that contains additional emphasis (the H tag), an image and an additional div only increases the difficulty that a search engine has to decipher the intended meaning of the link so it can associate it with the destination page.
Search engines (and Google predominantly) are constantly improving their crawling ability to enable better algorithmic parsing and processing of the HTML. Apart from emphasis signals (which are very low), Google mostly ignores the mark-up. The exception is of course links - so making an effort to simplify the parsing/processing by providing clear signals as to a link's anchor text is the safest way forward. Expecting them to understand all of the differences of HTML3, vs HTML4, vs HTML5 and all of the transitional, strict and other variations of each, is probably expecting too much.
TL;DR
Possibly, but only in terms of true link value.
As far as i know in the second way is not bad in anyway in term of seo But first may be slightly better as the titles,images are more closely linked to link.
Q. But better by how much?
A. May be not too much