I have developed an angularjs single page App. Meta tags and canonical link are dynamically set in each page. These contents are not shown in page source.It can be see while taking inspect element in browser.While we search our site in google,it doesn't show all pages and meta tags. We can see only index page in google search and the meta contents are not correct.
I have added these code in index.html page
<title>Processuae</title><meta name="title" content="Processuae"><meta name="keyword" content="Management Consulting,Business Setup,Call Center Outsourcing,PRO & Document Clearing,Event & Exhibition Organization,Technology Support Services"><meta name="description" content="Process UAE is a company focused on providing a multitude of outsourcing services."><link rel="canonical" href="{{canonical_link}}">
In each page, i have added
<update-title title="{{page_title}}"></update-title><update-meta name="title" content="{{meta_title}}"></update-meta><update-meta name="keyword" content="{{meta_keyword}}"></update-meta><update-meta name="description" content="{{meta_description}}"></update-meta>
I have attached screenshots below
Please help me.
Related
I've got a NextJS app where users can share links to Reddit and the link preview in Reddit should show a different thumbnail based on the shared link. It works perfectly sharing to Slack or FB, but it always shows the exact same image on Reddit regardless of the link shared.
As you can see below, it should be sharing a different image based on the trade.id. However, on Reddit it always only shows the image for trade.id == 2 (this was the first one I shared for testing). I've tried using different accounts, but still the same problem.
const TradePage: React.FC<Props> = ({ trade }) => {
return (
<div>
<Head>
<meta
property='og:url'
content={`https://${URL}/trades/${trade.id}`}
/>
<meta
property='og:image'
content={`https://${URL}/images/Thumbnail${trade.id}.png`}
/>
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='901' />
<meta
property='og:title'
content={`Verified ${trade.ticker} Trade`}
/>
<meta
property='og:image:alt'
content={`Verified ${trade.ticker} Trade`}
/>
<meta property='og:image:type' content='image/png' />
</Head>
<TradeComponent trade={trade} />
</div>
);
Reddit caches the OG image on the first request, as do a few other services like Twitter.
Twitter offers an OG testing tool to bust the cache - Reddit does not offer such a tool.
Unfortunately, your OG image is cached on Reddit for as long as they want to cache it or until they release a tool. However, it's been like this for a few years, and it doesn't look high on their priority.
A workaround is to change the URL for the page. For example, adding a trailing slash, query param, or renaming the route.
I am working on a project when the html.index file has the meta data. I.e. as follows:
<meta
property = "og: description"
content = "This is my web."
/>
Then when I post a link on WhatsApp or Slack I can see the description I wrote or more correctly the "slogan of the site".
How can I change the description when on the example page on the page "My projects" When I send the link in the description will be written "My projects".
Plus, I tried using React Helemnt but it does not work for me
<Helmet>
<title>{web.title}</title>
<description>My projects</description>
</Helmet>
Where am I wrong and what am I missing?
Can any one guide me how to implement the accessibility on Single Page Application? My precise question is on announcing page title and new content.
HTML
<title data-ng-bind="TitleText" data-id="TitleAnnouncer" aria-live="assertive" aria-atomic="true"></title>
Though page title is getting changed dynamically, screen reader is not recognising the change. I have used both cases for the attribute aria-live="polite" and "assertive" which is of no use.
Following are the links which I referred,
http://www.creativebloq.com/web-design/make-single-page-apps-work-screen-readers-101517155
http://simplyaccessible.com/article/spangular-accessibility/
Thanks & Regards
AngularJS rendering the content fine into title and meta tags, but when I share it with facebook or google, in the popup window it shows angular {{ }} there.
Code:
<div ng-controller="MyCtrl">
<title>{{mDetails.display1}} - Subtitle</title>
<meta name="description" content="{{mDetails.display1}} - {{mDetails.address1}} , {{mDetails.city}}, {{mDetails.state}}, {{mDetails.country}}">
.
.
Note: I am already using ng-cloak.
Thanks for help.
Two ways, as mentioned on another question :-
og meta tags, social buttons and angularjs
Method 1 :-
This can't be done using javascript. Some people think that Facebook is reading what's currently on the page. It's not. It makes a separate request to your server using the same url (from window.location.href) using it's Scraper, and the Facebook Scraper does not run javascript. That's why you get {{page_title}} when clicking on something like a Facebook share button. Your content will have to be generated by the server so when Facebook goes to hit the url it gets the content it needs up front without the need for javascript. You can tackle the server side rendering in a fews ways.
You can allow your server side technology to render the content.
You can use the PhantomJS approach https://github.com/steeve/angular-seo.
Method 2 :-
There's also a possibility that you can re-render Facebook widgets. Use their parse method:
FB.XFBML.parse();
after your angular stuff has completed. It's not working for my share button (yet!!), but I tested it on likes, and it's cool. Basically it re-scans the DOM and renders the Facebook widgets. You can also pass it a single element, something like this directive:
'use strict';
angular.module('ngApp')
.directive("fbLike", function($rootScope) {
return function (scope, iElement, iAttrs) {
if (FB && scope.$last) {
FB.XFBML.parse(iElement[0]);
}
};
});
This snippet would rescan the DOM for html5 facebook fb-like widgets when creating the last element in angular repeater.
Another accepted answer in the same context :-
https://stackoverflow.com/a/24086652/1366216
Edit:
I implemented json on server side just for the meta tags, however its an overhead because for on page data, there is still ajax call.
$mid=$_GET['id'];
$mJSON = file_get_contents($homeurl."/json/getdetail.php?mid=".$mid);
$mObject = json_decode($mJSON, true);
if ($mObject['ID'] != undefined && $mObject['ID'] != '') {
<meta property="og:title" content="<?php echo $mObject['display1'];?>"/>
<meta property="og:description" content="<?php echo .$mObject['display2']; ?>"/>
}
A possibility that worked for me is to have a "fallback" for FB description (so it would be a generic description that shows when angular hasn't loaded). I achieved this using two ng-if.
<meta ng-if="mDetails.display1" property="og:title" content="{ mDetails.display1 + "- Subtitle"}}">
<meta ng-if="!mDetails.display1" property="og:title" content="A generic title">
Whenever there are two meta descriptions with the same title, FB will take the last one. And after rendering, googlebot will only see the non-default one.
Google Plus lists all your +1s with a small preview of the webpage that was +1ed. Techcrunch and Mashable's previews come up as the first sentence of the article, however for me it just takes the first HTML on the page (which in my case is navigation). How can I get it to target the article for this preview rather than the navigation?
I have looked through the API and couldnt find anything that would do what I'm talking about.
Well, you have three options to avoid G+ trying a best guess.
1) (prefered) Mark up your site with microdata. Please refer to http://schema.org and possibly the Google Webmaster Tools help section on microdata and the Opera Developer resources.
It will look something like:
<body itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Article Title</h1> <!-- snippet title -->
<img itemprop="image" src="image-url"></img> <!-- the snippet icon -->
<p itemprop="description">Snippet text.</p>
</body>
The idea is to mark up the parts that you already uses as base for your snippet. Yahoo, MS Bing, Google and a few other search engines will try to honour this for their search snippets as well, as well as future browser versions, e.g. for bookmarks.
2) Use the facebook Open Graph protocol (which is not valid html, but makes your snippets compatible with facebook "shares").
It will look like (put this in your section)
<meta property="og:title" content="Your snippet title"/>
<meta property="og:image" content="url://of-your-snippet-image.jpeg"/>
<meta property="og:description" content="Your snippet text goes here"/>
3) Set the title and description meta tags.
<meta name="title" content="Your snippet title" />
<meta name="description" content="Your snippet text goes here">
Google finally released how to do it. http://developers.google.com/+/plugins/+1button/#plus-snippet
You need to use itemprop tags to tell +1 what you want to use.
There's many ways to go about it:
You can add the following tags to your opening HTML declaration:
<html itemscope itemtype="http://schema.org/Article">
and then add the following meta descriptors:
<meta itemprop="name" content="Your article's title" />
<meta itemprop="description" content="Your article's description or excerpt" />
and finally add this to the image you want to use:
<img itemprop="image" src="image.jpg" />