Can I build my html with dynamic Schema.org markup? - seo

I have a page for Mobile application details and features, but the app itself is not implemented yet and not available on any store, so I don't know the size,version,rating etc..
The question is can I render the page with dynamic Schema.org markup, which means to build now for example as an Article markup, and once the app is live the page will be built with MobileApplication ? Can I do this and Google will like it and understand it? if not, what can I do for my case?
#if(IsAppLive){
<div itemscope itemtype="http://schema.org/MobileApplication">
}
else{
<div itemscope itemtype="http://schema.org/Article">
}

Yes, but Google will only scrape and index one version. It won't register a second version until it re-scrapes, which can take up to two weeks.

Related

vue3 ssr does not return plain html

I'm using quasar and vue3 to build an SSR app
In chrome developer mode when I visualize the generated HTML, I have some Vue components not compiled to raw HTML like:
<body class="desktop body--light" data-server-rendered>
<div v-for="deal in clientssList" :key="client.Id">
<CLientItemSmDown :ClientModel="deal"></CLientItemSmDown>
</div>
is this normal, isn't SSR supposed to return raw HTML so bots can read it?
Saw this question last time already (can't find it back).
But no, CLientItemSmDown is a valid web-component and don't need to be transformed into a built-in HTML tag like input, div etc...
There is maybe an option to convert it down the road to some HTML, but I don't think that it's necessary and it may not be easily done if it's not supported by default.
That page may be quite interesting regarding Vue + Web-components.
You may raise a Github issue or join their Discord.
The TLDR being that it's fine to let it as is IMO.

Elm to manage a particular section of a site

Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0

Adding schema.org to site

I want to add schema.org to my site, I've read some guides for that and I understood the way I should do that. But should I add these tags for example for images and url:
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a itemprop="contentUrl" href="someurl" rel="bookmark">
<img src="someurl"/>
</a>
</figure>
to all my images, all my urls, all my pages or there is a way to do that globally for my site?
Yes, they are meant to be added to all your tags. That way you show search engines the semantic relationship between every item on your webpage.
If you don't use any programming or frameworks, you need to add them by hand.
It is a good practice to always validate them while developing to see how Search Engines will see them: http://www.google.com/webmasters/tools/richsnippets

Lightbox Gallery in Bootstrap 3 template?

I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)

How to create a Web slice with Search?

Does anyone know how bing's weather webslice search works? I am attempting to create a web slice(only available in IE8) with search built in and I have read that forms are not allowed and neither is javascript. Any help would be appreciated.
You can create active content by defining it on another page using the entry-content rel attribute of an tag. In this example slice.aspx has JavaScript code on it.
<div class="hslice" id="MySlice">
<p class="entry-title">
My Active Slice</p>
<a rel="entry-content" href="slice.aspx" />
<div class="entry-content">
</div>
</div>
You can achieve a similar effect using some simple javascript in a Chrome extension to create an Arbitrary Web Slice extension but with the advantage of being able to take any slice out of any web page, not just predefined Web Slice areas like Bing weather. Obviously only works in Chrome but Firefox has a similar extension API in GreaseMonkey.