Twitter card / Open graph / Apple touch icon / every page? - html

I have a doubt about this, my head tag in the index page covers the open graph data, twitter card and links for several sizes of apple touch icon. My question is: Is it necessary having these tags within every page of my site? Index page is which loads by default, therefore, I guess that only this page should have it but I have tested that some websites have these calls in every page.
So, what's the best way to proceed?

You should have it on every page. When someone shares a link on a social network or bookmarks a sub-page of your website the browser or social network will want to use that icon. It is not going to load your home page, so the links to the appropriate icons should be in the head of the page itself.

Related

How do I stop my Bootstrap Webpage (under development) from refreshing automatically

Explanation of issue:
Hi.
I'm developing a personal webpage using HTML and CSS. I have also incorporated Bootstrap and a number of its components to achieve responsiveness.
I'm using Locally linked Bootstrap file/folder (not the online CDN). I want to use Locally downloaded Bootstrap until I have finished development.
However, I'm having difficulty testing all the features of the site sufficiently, especially the carousel component which features multiple gallery photos, because it keeps refreshing on me and this is really disruptive.
In other words, while testing something or clicking through the photo gallery, before I go through a quarter of the entire photos in the gallery, the page will suddenly refresh itself, causing me to start my testing afresh and this never ends.
Question:
How can I disable auto-refresh on the site or at least to set it to a very large value, so it doesn't disrupt my work?
Thank you.
Answer:
I have finally figured out the solution.
While I was going through my HTML Code and reviewing the meta tags in the section of the code, I discovered that I had put a refresh value somewhere as one of the open graph meta tags. I had used a boilerplate code from somewhere which included a refresh rate of 30 seconds in the meta tag.
In essence, I had copied the boilerplate in addition with the meta tag and the refresh value along with others, while I was putting meta tags for the webpage.
I decided to comment out this piece of meta refresh tag and now, the web page is no longer refreshing automatically.
Below is the code:
<!-- END OF OPEN GRAPH SECTION -->
<!-- <meta http-equiv="refresh" content="30"> -->
Thank you.

Is there a way to open a page in an iframe from the previous tab?

I have a website where I host cooking recipes, on the index of the site there is a "recent dishes" button that you can click to view my most recent dish. The problem arises when you factor in that my most recent dish is designed to be viewed inside an Iframe in a "dish index". The dish index has a sidebar with important information that I would like to not have to implement a javascript solution for.
In summary, is there a way to format a link to open the index page, and then open the iframe inside the page?
just for extra clarification, as it seems there are a bunch of questions asking how to do a similar sounding thing.
click link.
link open.
Iframe inside of link opens to a specific page, separate from the default.
Here is a website that has the behavior that I'm looking for, but they're using Framesets and frames which were deprecated in html4 i believe. Please note that the sidebar does not refresh/load when a link is clicked, but the url does.
I've been googling for about 15 minutes now and have not found a solution, other than the javascript one.
From what I understood you want to have a menu and once a link inside this menu has been clicked you want to load different pages. If that is correct then make the menu the main page and then change frame src for different pages. You use target in the link to target the iframe
A short example can be found below
Page 1
Page 2
<iframe src="Page1.html" name="myIframe"></iframe>

html links & anchoring secondary html page to link back to index and anchored location

I feel like this should be very basic, I've been searching but can't seem to word it well enough for searches.
currently I have 2 html pages, my first index.html page has a navigation that links to itself throughout the entire site.
Home
Services
Portfolio
Contact
all of these section are on the main page (one page layout)
now I have recently added a secondary html page that is accessed via a button in the portfolio section to see a gallery of photos, easily enough I can get to that page via href="portfolio.html"
equally if i want to get back to my home page I can put in href="index.html"
here comes my troubles... What if I want to not only get to the home page, but I want to get to the Services section that is on the home page?
href="index.html/#services" throws error.
Thank you for your time.
Link should be: Services
anchor should be: <a id="services"> ... </a> (HTML5)
well...you're doing well to get into a specific place in the page you need you define id to your element and pass it with the URL. it'll be much easier to see the code itself and tell you what's wrong. try to check that the element has the right id or that you don't call different elements with the same id so the browser can't decide which element you'd like to go to

Link from external to specific part on a one page site

I have built my site based on a bootstrap template. It's a one page site with scrolling but I am currently redeveloping it so that my portfolio pages are separate pages and link back to the homepage. I want to link back to the gallery on the one page part of the site and therefore need to link to the homepage and get it to scroll instantly to the gallery. Any ideas on how I would do this. Site as it was is at www.js-gd.co.uk
Thanks
Jon
You could add an id to the section you are wanting and then have url.com/page#id
If you post the code I will be sure to help you

how can I navigate to a new page without reloading part of the current page?

I have a mybb forum, and a plugin that adds a public/private chat to the bottom of the forum (it adds a div before </body>).
I would like to navigate the forum without reloading the chat.
In this question, Josh Stodola explains how to change the url.
In this question, there is a small JavaScript code to change the url.
I've also read about HTML5 iframes, but I still can't imagine how can I use it all together.
Should the chat be inside an iframe? an iframe inside the forum? should the forum be inside an iframe, and the chat into another? And those 2 iframes, inside a new page???
I'm messed up...
You should have a window containing chat and an iframe for your content. This will allow you to navigate your forum and only reload the iframe vs the top frame.
<body><iframe src="someurl"></iframe><div>Chat</div></body>
A few things to note: doing it this way will not change the address bar while you navigate and this makes users confused when they try to link to pages and it takes them to the home page or wherever they started browsing your forum.
If you want to do something more fancy checkout pjax. It will let you change urls for the whole page while only loading certain content.