So i am using the open graph method to pull in content from a Wordpress site that can then be posted on facebook. However with google plus the content that is pulled in is distorted. It is pulling in the title twice and the content twice. So i opted to use Schema.org. Open graph has meta tags which are invisible on the site while Schema uses regular html tags as follows:
<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
Trailer
</div>
This displays on my site so i added an inline style of "display: hidden;" to the div. However this doesn't work. Has anyone gotten schema to work with Wordpress? Or a better question might be, has anyone gotten open graph/schema to work with google plus?
Thanks
display: hidden; does not exist. You're looking for display: none;
http://jsfiddle.net/wgLZL/
Related
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
I have the following code,
<a href="https://plus.google.com/share?" onclick="javascript:window.open(this.href+'url={'+window.location.href+'}',
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="google.png" alt="Share on Google Plus"></a>
Which works perfectly. I'm developing a simple game in jquery and html and what I want to do is, once the game is over, allow the player to share their score on google plus. The above will share the page only. How would I go about doing this?
The content shared to Google+ is controlled by the markup of the page being shared.
<body itemscope itemtype="http://schema.org/Thing">
<h1 itemprop="name">Awesome Game 5000</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Super good score of {score}.</p>
</body>
In order to dynamically change the score people share you would have to dynamically change the score based on the url. E.g. https://example.com/shared/5343 would replace the score on the page with 5343.
Google displays links to pages in its search results by taking all the text inside an tag as the link. So this:
<a href="#">
<span>1</span> This is a great story
</a>
displays in Google search results as:
1 This is a great story
Is there any way to tell Google to index a specific part of the link text, e.g.
<a href="#">
<span class="dont-index-me">1</span>
<span class="index-me">This is a great story</span>
</a>
So I can have just: 'This is a great story'.
Or is the only option to change the markup:
<span>1</span> This is a great story
No. Google will index an entire page's contents. there is no way to tell Google to ignore part of a page. There are black hat techniques, of course, but those just get you banned if you get caught and aren't worth the risk.
just change the markup (2nd solution) ie. move it out of <a> tag
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 :-)
This question is about Blogger Template manipulation. People developing/changing or manipulating Blogger templates in any way know its syntax hence can provide some input.
I write a development blog on Blogger and I've changed my blog template so posts display HTML head title differently (post name first) from default (blog name first).
But. Since I format my inline programming code words similarly to Stackoverflow (gray background mono-spaced font) and do the same when I use any of them in blog post title... I enclose such code words inside <code/> element and then I have CSS set for this particular element to add it gray background and set mono-spaced font on it. This formatting works on blog post titles and its content.
But the problem I'm having is that these <code/> tags I use are also displayed in the HTML head title (displayed in browser window title). What is even more importan is that these get displayed in web search results as well. That's even more annoying.
Default template uses <data:blog.pageTitle/> in title element, which strips out any tags, but displays all titles as Blog Name: Blog post title (Google search results are quite meaningless because blog post title gets cut off). That's why I'm using <data:blog.pageName/> instead to display just blog post title in the head, but it still has all tags and I should strip them out somehow.
Check this blog post example. Load it, and look at browser's window title bar that still has tags displayed. I want them gone.
How do I strip tags from the post title when adding it to head element?
UPDATED
ok, so far this is what i worked out:
under settings -> Title -> put a nice
use <data:blog.pageTitle/> as title;
under design -> edit html -> replace theese lines
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Intestazione)' type='Header'/>
</b:section>
with your custom header like
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
aSeptik Site</h1>
</div>
<div class="descriptionwrapper">
<p class="description">
<span>
</span>
</p>
</div>
</div>
</div>
</div>
<title> will result from:
jQuery <em>"scroll into view"</em> plugin (with an additional <code>":scrollable"</code> selector filter)
to
: jQuery "scroll into view" plugin (with an additional ":scrollable" selector filter)
hope this help, demo http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
try with a little bit of javascript in your <body> like this
<script type='text/javascript'>
document.title = document.title.replace(/(<([^>]+)>)/ig,'');
</script>
</body>
copy and past as is don't convert entities,
DEMO: http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
although, i'm not sure this is the
right solution for you since spiders
usually avoid js execution, and i
don't know how "html tags in the title"
affects the search results.