After all day following the google rabbit hole, I’m still wondering about google/bing/etc being able to crawl svelte apps. I want to convert my personal portfolio to svelte, which will be a SPA. If I add tags for the header data on the svelte SPA, will google pick it up, or do I need ssr for google to see the rendered page?
Google crawlers will most likely run your JavaScript so that the title etc. inside <svelte:head> is picked up, but Bing and others will not.
If you go with Sapper you can use sapper export on your site to get a pre-rendered html/svelte hybrid which will solve your issue.
Be aware of using svelte:headfor your base meta stuff. Things like open graph images or twitter cards will not work this way! This is just useful if you need to inject something to the head on mount, but not safe if you have to deal with SEO.
Related
I am trying to inject op:tags in my reactjs App. I came across https://github.com/nfl/react-helmet and it dynamically inject the tags ion my index.html header juts like i wanted it. The problem is, it injects the tags at the end of the head and thus was not recognised by facebook debugger here. It works when the ogen graph tags appear right in the beginning of the header before the script tags. With reac-helmet however, it injects them at the extreme end. Please how do i best fix this ? I am trying to have article preview on social media and this is failing just because of the arrangement. Any help would be appreciated.
well, I don't think it is because of the arrangement.
As far as I remember FB doesn't execute javascript code in the provided URL.
Facebook’s scraper just looks at the HTML code of your page; it’s not a full-fledged “browser” that would execute any client site code.
with that being said.whatever meta tags you need there it can't be done via JS on the client-side. it must be server-side rendered.
I am not sure what technology you are using to serve this app, but I can assume it is a react app. and it would be easy to handle this via a small express server. that serves the app with the right meta tags in place even.
I have GA on every page on one domain (actually not me, but my company, whose programmer needs auditing). Just the default code (Classic version, ga.js), no special accommodations whatsoever that I've seen or know of. Bare minimal if any configuration past registering the service with the main site...
All the pages are either aspx or static HTML. It's common practice for this guy to embed pages on the site within other pages on the site in iframes, where both the parent (top-level) & child (embedded) pages contain the GA script.
I don't really know much at all about GA, have never worked with it, but I do suspect that might result in extra hits being counted by GA or something, that that may be messing with the metrics. But then I've read stuff about GA using first-party cookies so by default pages loaded in iframes won't be tracked/counted... I could really use some clarification on this, please.
Then our programmer frames pages from the main site in pages on other sites that we own, that are on different domains. So then there's this cross-domain business, with no segregation of sources, because they really don't care much. So what should be the outcome of that? The external sites' pages don't have the GA code.
However, we're rebuilding one of those other sites - actually I am, for the most part - and the programmer told me to just copy and paste the same exact GA script used on the main site into that one. So, it's a different domain. That wouldn't work as-is, would it? Wouldn't there have to be some sort of special configuration, setting of the domain, something?
I'd really appreciate if someone could tell me more about the scenarios described above. Thanks in advance.
In the Google Analytics developer menu, you can create a new 'profile' for this new site. The analytics will then be tracked for just that one site, not for all. In theory, it is possible to use one GA.js for all your sites, but it kind of kills the whole concept of Google Analytics, so it's not recommended.
Your really shouldn't be using iframes anymore IMO. There are reasons to use them like embedding code for tracking etc, I think, even GA uses iframes. But, generally Google doesn't like them because a lot of spammers use them to try and fool the Google Crawler.
Also, it get's very complicated to understand what is going on within GA.
To answer your question: Each iframe is like an independent webpage completely separated from the other webpage (for security reasons). So when Google or a web browser goes to your website it will do this:
Load your main html document.
Render that page.
See that you have an iframe.
Load that page in the iframe.
Render the iframe.
Now, if you don't have GA installed on the iframe page it will not track the page being loaded.
But if you do put GA in the iframe it will record when the iframe is loaded or the webpage is loaded.
But, remember that one of the main reasons of having GA is to see where your customers are coming from and why. If you have an iframe of another webpage, you really don't know if that is because a customer is:
A) visiting your website from the page directly.
OR
B) the customer is visiting that page through an iframe on another page.
It can get very complicated
You must generate a new tracker for each domain you are using. Otherwise what is to stop someone from just copying your GA code, and putting it on their webpage.
Is it possible to track if someone links to data on my site? Specifically if my data is used in a site dynamically generated by a developer program? I would like to know if someone is blatantly passing off my site's data as their own. There are obviously ways around directly linking to content, such as content manipulation or even manual manipulation. But if someone where to link(or directly add word for word or manipulate) my content into their website, is there a way to track it?
Can I avoid someone being able to scrape my website at all, or is everything just up for grabs?
the best answer and the easy one is called GOOGLE - WEBMASTER TOOLS!
HERE
actually doing that is very hard and you would need to crawl the web to discover those links that address to your pages... dynamic content as well is linked so it would be find by google as well.
this tool will allow you to see outer links that address to your site.. and you can check them.
for extra - you can monitor requests and traffic to your site and find ip's that are using the same page over and over again. that can tell u that an outer page is dynamically loading content from your web page.
EDIT:
here is a good article in this subject: link - scroll down and you can see the use of google
webmaster tool with some other progrmas and method.
here is a good start guide to the google webmaster: link
ENJOY!
I'm working on a site that needs a basic calendar, and thought of adding in Google Calendar. The thing is that I would really like to style the whole embedded calendar, but it's in an iframe and even adding !important to the targeted classes does not work.
Is there any way of adding some css to that iframe? Through some JavaScript or something?
Thanks!
You are not going to be able to do any styling on the iFrame, if you do you'll get the cross-domain origin error. Essentially, you are locked out of tampering with an iframe for security reasons. You should look into pulling the feed/json of the google calendar and creating the entire view yourself.
The settings offered by Google are only basic, however, and so for it to fit the unique style of your site, you’ll want a bit of extra editing power. Unfortunately adding CSS rules to the parent document doesn’t work, even when adding an !important directive to each rule.
https://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
Because of the same-origin policy, it isn't possible to inject CSS into an iframe.
However, these days there are a number of third party apps that make it easy to style and embed Google calendars.
Here is a short list of options:
Styled Calendar
Tockify
ChronoFlo Calendar
Or, if you'd rather use something open source, FullCalendar is a great solution. Here is some documentation on how to use their Google Calendar plugin: https://fullcalendar.io/docs/google-calendar
*Full disclosure, I'm a member of the Styled Calendar team
Do you have any Drupal module (or other solution) to implement a feature similiar to Facebook's Share a Link?
To be precise:
you paste a link
site's preview is generated
title
short excerpt
and a thumbnail of one of the site's images
You'll need to do some pretty fancy stuff when snagging that thumbnail.
That's parsing the page and picking out thumbnails that might want to get used from the tags on the page.
It will need to do this via javascript after the link has been placed.
Facebook actually caches their thumbnails for page sharing once a day, so they choose not to go grab it at run time for the client every time.
There are certainly libraries (and maybe a jQuery plugin that would let you slurp a URL into memory then traverse it and present some one the fly images.
Check out the Tumblr Share tool. You might be able to reverse engineer from that.
As for Drupal modules this seems unlikely. Would love to hear it though.
You could also think about a third party screen shot service, but that's a pain too.