exclude content from link preview - html

I always wonder how pages like this works on link preview structure. specifically "Infobox Section"? (here) this section appears top of the content but always excluded from link previews.
How can we exclude one HTML section from link preview?

You can't exclude any content from being visible to another website; your DOM is always publicly visible. Rich Preview just shows the <meta> information for a website for use on sites like Google and Facebook. If you don't want information to show on Rich Preview, simply don't include the relevant information in your <meta> tags.

Related

When coding Facebook likeability into a webpage, what are the drawbacks of using a simple "sharer.php" link without Open Graph tags and specification?

When coding a webpage you can, as I understand it, code Facebook likeability - defined as an element that when clicked takes a user somewhere that they can "like" the page on Facebook - by using a little "f" image (for example) as your link and the text https://www.facebook.com/sharer/sharer.php?u=http://foobar.com/mypage.html as your hypertext reference ("href").
You can in addition refer to the Open Graph XML extension in the page's HTML declaration
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">,
which allows you to use meta tags to control the image that gets shown at Facebook and various other things.
Let's say that as far as Facebook is concerned all you want is for people who browse to your page to be able to "like" it on that company's website. If so, what are the drawbacks, if any, of doing no more than simply having a "sharer.php" link with an "f" image as your link?

Can I search Google for the href link in an anchor tag?

In other words, if there are pages out on the web with anchor tags saying, for example:
Interesting photo
Can I search for "this_page.html" and find pages that link to that page on my site? I seem to be able to search only for "Interesting photo", the shown text in the link.
Thanks for any insight.
You can make the following google search: www.mysite.com/this_page.html -site:www.mysite.com To find webpages there links to your website -site:www.mysite.com exclude your own website.
You can use a "backlink-checker"
for the main site, but it won't reference
individual pages (free versions anyway, paid version will have different feature sets).

Google Chrome Add Bookmark Image

Recently Google has added a new interface when users click the star icon in the address bar to add a website to their bookmarks.
The UI displays the page title as well as anything from the meta description element if present, but I was wondering if there's a way to set the image that's displayed, or whether this is just purely decorative on Chrome's part:
It seems to be some datas included in the head part of the pages.
You probably know that you can use meta tags to set some favicon, gps coordinates, and many other things.
Some new tags, the Opengraph meta tags, are now used to define some informations to best describe the content of the website you're browsing. For example, on facebook, when you share a link, these opengraph datas are used to create a small block which summarize and show a picture of the linked website.
So, to be clear and to speak about code, just try with this line in your head section:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Tried it while writing this post on a little static website I'm working on, seems to work prefect !
It's looks like Google collect all images on the webpage et allow you to choose which one you want for your bookmark.

Optimizing a Web Page to get it to embed well on Facebook, Embedly, et al

What code elements do I need to add/modify on a Web page to ensure that it gets embedded properly on a facebook status update?!
See below for an example of what I think is a good embed:
Some web pages I tried to embed don't appear very well on facebook i.e. when you put their links in a status update. Also, sometimes it gives you a selection of images to choose from?!
Is this purely a <meta> tag play, or are there other things I could do to ensure that the web page gets embedded the way I want it to (images and all)?!
Thanks.
Yes this is meta tags at work. You need to specify Open Graph metadata to define what appears on Facebook. See http://ogp.me/

Page url links to pages internal frame

I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });