Adding microdata to Concrete5 through a content editor - html

TinyMCE strips certain microdata from content entries when added to the html. I'm building a website for a mobile spa service, and would like to list their services as products using schema.org's markup. So my question is this: Is there a wysiwyg editor block I can let my client use that wont "clean" microdata I end up putting in later?

This may not be a direct answer to your question, but depending on how structured the content is, you might consider creating a new block type using Designer Content and then wrap individual fields with microdata tags.
http://www.concrete5.org/marketplace/addons/designer-content/

Related

How to include meta data in HTML tags

I plan to use a headless-CMS to manage content on my website, so a non-technical content editor will be able to independently maintain content.
To assist the content editor map content between the website and the CMS, I need to inject a CMS ID into HTML tags. (thinking that the content editor will view the page source to find the value)
What is the standard way to inject meta data into a HTML tag?
E.g. <p cms-id=7adQpNPZxP4jK28RLp3wES></p>
You can use data attributes on elements - https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes.
It doesn't interfere with HTML semantics and is easily accessible with JavaScript.
The <meta> tag defines metadata about an HTML document. Metadata is information about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Contentful DevRel here. 👋
The rendering has to be done by your server. Depending on the technology you use you have to place the id in the website. It's hard to give advice without knowing what you use to render the HTML.

Is Google microformats supposed to be visible on the web page?

I was trying to add microformats as following to my webpage:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="brand">Company Name</span>
<span itemprop="name">Product Name</span>
<span itemprop="description">Product Description</span>
Product #: <span itemprop="sku">12345</span>
</div>
I thought this microformat will only show up in a google search result page. But after adding it, those information became visible on my webpage, and not in a good shape.
Is there something wrong? Or should I use display:none to make it invisible on my webpage?
Microformats are meant to add machine readable meaning to existing content on the page. They're not invisible meta data, they augment content that's already there. So, yes, it'll show up. You can hide or style it via any of the usual ways in which you hide or style content.
You are using Microdata, not Microformats.
Microdata is a syntax to include structured data within HTML5. Ideally you would use your existing content (i.e., add the needed attributes like itemprop etc. to your already existing markup), and only if that’s not possible, the hidden elements meta and link (which are allowed in the body if used for Microdata).
If you don’t want to use your existing markup and the visible content, you could use an alternative syntax: JSON-LD. This gets included as a data block (using the script element), which is not visible by default.
Don't try to use hide or style on your content, it will have a bad impact on your site. You might get penalized for cloaking if you practice it on all of your pages.
If you are trying to mark/let the bots know about some more info that is not on your page you can try using either the Data Highlighter for simple things in you Search Engine Console (Webmaster Tools) or for more complicated stuff you can try using JSON-LD coding on you pages.
Microformats are HTML. Used to publish a standard API that is consumed and used by search engines, browsers, and other web sites. Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Microformats are a way to enable "smart scraping" of web pages, so that you can create tools and scripts that losslessly extract machine-readable information from cleanly-formatted, human-readable HTML. Structured Data is the name given to content which is marked up in a specific way, using MicroFormatting, to explain what that content is all about.
It is always recommended to show the Microdata information and not to hide it. You can probably try to give a good shape. It would show up in the Google and Bing result pages as well but you need to wait a little for that. There is nothing wrong with the Microformats applied by you. The thing is SEO need some more patience.

Wrapping paragraphs in p tags

I have a HTML Document that has correct paragraph formatting for most of the text But there are some paragraphs that don't contain p tags and as such are not displaying correctly.
Is there way to inclose paragraphs with <p> </p> tags using a text editor with regular expressions? I tried using HTML tidy, but I cant get it to recognize separate paragraphs or it reformats it in the wrong way, I dont know what is going on...
I need each paragraph that doesnt already contain html tags to have the paragraphs wrapped:
Template Design Creation for the layout for the content that will exist on each page.
Custom Programing to make certain features work with the design.
Photos of the Location For the Website Design Elements.
Like this
<p>Template Design Creation for the layout for the content that will exist on each page.</p>
<p>Custom Programing to make certain features work with the design.</p>
<p>Photos of the Location For the Website Design Elements.</p>'
Using regular expressions:
/($|\n|^)/$1<\/p>\n<p>/g
Is the easiest, but it requires cleaning up an extra close tag at the start of the document and an extra open tag at the end. It is possible to get it perfect but I don't find it's worth the trouble.
I'd agree with the guy above, just add them in manually. If the content is coming from a web page on your server just deploy a WYSIWYG editor (loads of them around) and they should cater for that function.

how to use well html5 tags into a specific service web site

I've read some html5 doc and how to use tags, expecially news
I have a site www.webmaster-toolbox.com and is like an utility, it prints some informations about a site.
well I have separate in 2 section
results_sect: where I put all results
analize_sect: where I put search bar
well about header and article I have no idea like use them in my situation, so the question is but html5 is only useful for blog? no for this kinda sites? thanks
if not can help me microformats to better indicize page?
HTML 5 is useful not only for blogs. It is extremely helpful to create a very meaningful semantic HTML which not only the browser could understand even the human could understand clearly.
Previously to create header part of the document we pretty much use div with the id/class as header. Now with the help of HTML5 we could use the header tag to semantically structure the document.
You could use article tag can be used for blog post or forum post etc...You could also use section tag to seperate different content meaningfully rather going with the traditional div approach.

Embed sandboxed HTML on a webpage + SEO

I want to embed some HTML on my website... I would like that:
SEO: that content can be crawled and indexed
Integration: it renders nicely (does not break my DOM trees for instance, or does not inherit my styles)
Security: it remains safe for our user (javascript disabled)
Flexibility: the HTML can be completely free (don't want any BBCode or MarkDown or even TinyMCE, it's our users that are writing the HTML code...)
I saw that I might be able to use the IFrame for that, but I am not sure it is a very good solution concerning my SEO constraint.
Any answer would be greatly appreciated!!! Thanks.
For your requirements (rendering and security, primarily), IFRAME seems to be your only option, especially when we consider no rules are specified for the HTML content except the JS removal. Even some CSS + 'a' tag can bring a serious security risk, like overlaying outgoing links on your standard interface.
For the SEO part, you can use SEO maps to show the search engines the relation between the content and the container, also use html tags like link to make connection.
To make sure the user's html is safe then you should use HTMLPurifer. In terms of the rest of the question, you should split this up into multiple questions.