I am facing a problem with indexing my site on the internet (created with R software) and I am limited by my lack of knowledge: to make a long story short, the site is not found in the search bar, but is displayed well when the URL is directly entered in the URL bar. So the site is well deployed.
The site was following the blogdown vignette and deployed with netlify. However, I didn't use a pre-existing theme (maybe that's why the site is not found?). I followed the file structure as explained in the blogdown vignette (it is composed of an HTML index file, some additional HTML pages that the index file refers to, and a CSS file for some features). I compile the HTML files from Rmd documents in R (using Rmarkdown; R studio 4.1.3 with ubuntu 20.04).
Before reaching you for help, I tried to solve this issue and:
created a header file that I added to every HTML page in which I added metadata with title, name of author keywords, description. Here is an example of the structure (while preserving anonymity):
<title> My name </title>
<link rel="icon" href="Images/pacman_ghost.ico">
<meta name="author" content="My name">
<meta name="keywords" content="Keyword 1, keyword 2" />
<meta name="description" content="A brief description">
<meta name="viewport" content="width=device-width, initial-scale=1" />
indexed it in google, to force crawling, and added it to the metadata of the header file:
<meta name="robots" content="index, follow"/>
<link rel="canonical" href="My site URL">
<meta name="google-site-verification" content="The key provided by google"/>
But the pages are still not indexed by Google. Is it because I have to submit a sitemap? I have created the XML file, but I don't know how to link it to the site, so I can submit it to Google via their search console page. What do existing themes (as in Hugo) that induce the site created by combining with blogdown and netlify to be indexed then?
Thanks in advance for the help!
Related
I have a problem that I'm almost sure is because of how I'm building my pages and not just a CSS issue. I am using Tailwind for my website. For my Sveltekit blog, I wanted the xyz.com/projects/some-project URL structure so I created a folder in routes called projects. Inside that I have two files, index.svelte and [project].svelte. Index should contain the listing of all posts and any project should be created at [project]. All this works fine, but the pages that are dynamically created have some weird layout issue that is causing it to not be responsive. For example, you can see how weirdly this page is formatted.
You can visit this page and see it for yourself. My code for this is here.
I read somewhere that I am supposed to use __layout.reset.svelte or something of that sort while creating dynamic routes? Is that what is wrong?
Why are my breakpoints and responsive CSS not working?
The reason I think its a Sveltekit issue is because the dynamic pages are the only pages where this is happening, so I'm assuming there is something wrong in how I've set it up.
Your /src/app.html's <head> section is where the problem is located. Yours is:
<head>
%svelte.head%
</head>
which is missing a critical piece, the <meta name="viewport" content="width=device-width, initial-scale=1" /> tag which is essential for mobile responsiveness.
This is normally present in default SvelteKit projects:
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
I noticed you started your project from a custom template, and indeed that template's /scr/app.html skeleton is missing the above info.
This is something you have to watch out for when using such templates - how they deviate from a standard install and what the impact is for you. My advice is, start from the default, and add pieces knowingly, with full understanding of the incremental changes and full control of your source.
After deploying my react app, I noticed that when I am sharing it on whatsapp for example, The link looks really basic.
Title is "React App" and descriptions is "website created with create-react app".
I have managed to change title and description from the meta inside index.html and got something like:
My App
My description
I am trying to make it look like that:
I have read about React helmet but I did not understand if it is right for my case.
Thanks in advance!
For determining what your website looks like on social media, you'll want to add more meta tags containing Open Graph data.
// These are the 4 required properties, but there's more
<meta property="og:title" content="My Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.mycanonicalurl.com">
<meta property="og:image" content="mymainimage.jpg">
Using this protocol you can tell crawlers what properties to use to make up those previews on WhatsApp, Facebook, etc.
Here's the docs for all the available properties:
https://ogp.me/
React helmet is helpful if you need to customise the meta data on a per page basis, if you just need one set of data to be shown for your entire site it's not necessary for you to use it.
You should look into Open Graph tags. To break down the example image you provided there is 4 noteworthy sections (taken from their source code):
<meta property="og:title" content="National Geographic: Stories of Animals, Nature, and Culture">
<meta property="og:image" content="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/homepage/nationalgeographicog.ngsversion.1530540626597.adapt.1900.1.jpg">
<meta property="description" content="Explore National Geographic. A world leader in geography, cartography and exploration.">
<meta property="og:url" content="https://www.nationalgeographic.com">
You can take a look at the page source to see this information and match it up if you would prefer to learn by seeing.
If you do look, you'll notice there is a seeming repetition of some tags, e.g. twitter:image, this allows you to provide images in different aspect ratios for these platforms to pull.
Note: It can sometimes take time for the crawler to pick up on changes to your meta tags, so be aware changes might not be immediately reflected.
I was wondering if someone could explain how social media rich previews define which og:title to pick.
I use wordpress and for certain pages I insert php echo strings to inject them into the <head>. I choose to do that to change certain titles and descriptions into more commercial texts. What obvisouly happens is that there are 2 og:title meta tags; my injected one and the Wordpress backend page title.
Once I was told that the first meta tag in the top of the <head> will be picked as thé meta tag to be picked up for rich previews for example, but this seems not to happen (anymore).
Below is my current situation and exact order of meta tags in the <head>:
<html>
<head>
<meta charset="UTF-8">
<title>EXAMPLE</title> // my injected and used by Google
<link rel="canonical" content="https://example.com">
<meta name="description" content="description">
<meta name="subject" content="example">
<meta name="og:image" content="/image.jpg"> // my injected and used by Social Media
<meta property="og:title" content="og:title #1"> // my injected og:title, but ignored
<meta property="og:description" content="description">
<meta property="og:url" content="https://example.com">
<meta name="twitter:title" content="EXAMPLE">
<meta name="twitter:description" content="description">
<link rel="alternate" href="https://example.com" hreflang="nl-nl">
<link rel="alternate" href="https://example.com" hreflang="nl-be">
<title>EXAMPLE</title> // default by Wordpress
<meta property="og:title" content="og:title #2"> // default by Wordpress and being used
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta name="og:image" content="/image.jpg"> // default by Wordpress
</head>
</html>
What happens is that Whatsapp and Facebook are taking the 2nd og:title meta tag, which doesn't make sense in my opinion.
Changing the title page in the backend is not a solution, because it becomes something like Check out our wonderful shop!, this is not user friendly. Also I'm not a fan of Yoast, because Yoast loads extra code into the pages, which I don't want.
Who knows a solution to this, or can explain why this is happening?
Update & Answer
Thanks to Chris I understand that og: meta tags are being scanned from top to bottom in the <head>, and updates the 2 identical properties with the last one that is being scanned. This RDFa process is typical for apps like Facebook, Whatsapp, Twitter. One exception: og:image seems to be needed in the top, it doesn't override a second or third one below it.
Google Search related tags are being picked up by the first one in the top of the <head> and keeps that one as "first come, first serve".
Solution: I will inject og: tags into the bottom of the <head> and the other ones will be kept in the top. Tested it and it works.
Facebook and other apps generally use their own slimmed down versions of RDFa parsing, which from my understanding is a way to parse meta data from xml and html documents. From what I was reading, it seems that as the parser goes through your html page, it will add the first metadata piece it finds to it's "current subject", and if it finds another one with the same name, it will then overwrite the "current subject" with the updated info.
It seems like a pretty complicated topic, so I suppose the simple answer would just be that their parser will always take the last meta data tag and use that.
To fix the issue, I would see if you can inject your custom og:title/metadata below the one autoinjected by Wordpress.
You can read more about RDFa parsing here
I'm developing a website in Weebly platform. I'm having issues with the meta-tags because without them I can't publish/advertise the website on Facebook which is a must for the organization.
So, I have already went to Settings > SEO and than added:
<link rel="canonical" href="https://www.website.com" />
<meta property="og:url" content="https://www.website.com" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.website.com/files/theme/facebook-logo.png"/>
Because that didn't work I also added on the Pages > Index > SEO Settings the same code excerpt to the header of the page. That also didn't work.
When I go inspect the page on Chrome I verified that there are 3 repetitions of the meta tag
<meta property="og:url" content="https://www.website.com" />
which one of them is http...
What am I missing here? Is Weebly filling out meta tags by default? Is it some mechanism?
Thanks in advance
Weebly adds Open Graph meta tags for the site automatically and fills them out by default using the information you supply while defining/building your site.
If you want to change the values for these automatically injected, Open Graph meta tags, you will want to change the settings and SEO for your site/pages.
Currently all I have on each page is <meta http-equiv="content-type" content="text/html; charset=UTF-8" />. Do people still include meta tags like keywords, description, and author? If so, should they go on every HTML page or just the home-page?
Well you defiantly should have the meta charset
<meta charset="utf-8">
The http-equiv is not needed because it represents the HTTP header equivalent. For the web however the Content-Type HTTP header supplied via the web server (probably apache) should do. You can override the server defaults via .htaccess or using the PHP header() function.
It is also not a bad idea to include
<meta name="description" content="">
<meta name="author" content="">
Paul Irish's html5 boiler plate also recommends using:
<!-- Always force latest IE rendering engine (even in intranet) this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
http://html5boilerplate.com/docs/#The-markup★make-sure-the-latest-version-of-ie-is-used
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://html5boilerplate.com/docs/#The-markup★mobile-viewport--creating-a-mobile-version
I don't think keywords have any impact on the ability to find your site using search any more. If you're going to use a description, you might want to include it on every page as it will help search engines to display a more usable description than they otherwise might for that page. I don't think it would be worth developing a separate description for each page, use use the same one on all. It wouldn't hurt to omit all of them, see http://en.wikipedia.org/wiki/Meta_element
Meta tags like Keyword , Description author used from a long time to tell search engine about the content current page.
Like a product website the description should be information about product and Keyword about the tags product have and Author is a book writer. it's help search engine like google to tell them what is content on the page.
their is no need of it but it's help to improve the SEO.