When sending a website hyperlink via SMS text message on my Android, I noticed some websites have a preview image above the title name, domain description, and url. I found this wasn't just video platforms but also blog articles, etc. Picture examples listed below.
When checking to see if this question has been asked prior, it was either confused for or convoluted with basic html requests asking how to add a hyper link to a photo. So please understand that this isn't a request for that.
I'm guessing it's a head meta tag data. Could someone share the code line and where it's placement in the .html file is. Is there an optimal size/ resolution as well? Thanks in advance!
After 3 days active and 13 views with zero replies I decided to aggressively comb high end website's source code until I found the answer.
How I found it: F12 and ctrl+F while searching "src" was a bust but "img" was the ticket to finding this line!
<meta property="og:image" content="x.jpg" name="image">
This lead me to finding "Open Graph Protocol" originally developed by Facebook.
You can read more about the concept here https://ogp.me/
or listen here https://www.youtube.com/watch?v=QwEQKM4YRnU&t=59s
It's pretty straight forward with this information and ends my question. Happy coding, future readers!
Related
I set all Og tags to my website.
But when I share a link from my website on social networks such as WhatsApp and Telegram, the image and other information is not displayed.
I even tried with a small photo but it still did not show
What is the problem?
I did a lot of research but I still haven't succeeded.
Please help me. Thank you
I realized that the address in the og:url should be exactly like the address of site.
Then, if this address is complete(https://www.websiteurl...) will be shown in Telegram and WhatsApp. If it does not have one of the "https" and "www" ,information may not be displayed in one.
I have had similar issues with Open Graphs tags... Facebook keeps updating the tags and their documentation does not make it clear.
I suggest copy-pasting your url in Open Graph debugger which would highlight any issues with your OG tags.
I don't see any issues with your tags, but you might want to include the following tags:
og:image:url
og:site_name
og:country-name
Also this question might be helpful.
I'm a manager of a page on Facebook and now I'm building a site for this page. To be honest I'm way too new to web-developing to be doing such a site, but I would like to try anyway.
My question is, when I see my friend shares a link (from BuzzFeed for example), I would see something like this
I believe that to change the thumbnail, the title and the description you would have to edit the meta tag of the html files (please correct me if I'm wrong).
So I just want to know how the source website (circled red in the picture) can be displayed through the shared links.
P/S: A side-question, if I want to learn more about building such a "social" site, where can I read more about it and what frameworks should I look into, thanks alot !
My site uses some aggressive caching techniques to keep requests to a minimum, among them being:
.htaccess redirects to cached HTML files;
Automatic merging of content images into CSS sprites.
This works great for human traffic, but when an article is posted on Facebook, Pinterest, Google+, Reddit, etc the bot fails to find a suitable thumbnail since the page images are all big sprite JPEGs.
One solution would be .htaccess rules that bypass the cache when a bot is making the request. Preferably without having to specifically name every possible bot user-agent. I am unsure how to accomplish that.
Another solution would be to embed one good thumbnail image on every page that a bot would download but a real web browser would not. Any ideas how to accomplish that?
Other suggestions are welcome. If all else fails I'll rework my script to exclude the first image of every post from the autosprites, but that will effectively double the number of image requests my poor overworked server must accomodate.
Showing different things to bots than to humans is a very bad approach regardless of the problem you're trying to solve. Google will sometimes even punish sites that do this with a low search ranking. A better way to do this would be to go to each bot's website and see if there is a way to tell that bot to display an image that is relevant to that page.
For example, Facebook accepts the following meta tag in the head of your html to tell it an image that is relevant to your page:
<meta property="og:image" content="[url to the image]">
I was wondering which elements are fetched when an user shares an url on Facebook or Google+...
For example: how can i make sure the description of the post will be the description i want to be shared and the image will be the image i want to be shared?
Title is pretty obvious, so i skipped that.
Facebook suggests the opengraph protocol: http://ogp.me
It works reliable and can be checked with the facebook url linter http://developers.facebook.com/tools/lint/
Funny, I just wrote a blog post about this this week. It seems to me that there's no reliable way of knowing how either social network site will parse your web page to get the "status" version of it. Not only does each site do it differently (i.e. FB, vs. linkedin vs. G+), but they're liable to change it at a whim.
So currently the short answer is that you can't know this for sure. You have to reverse engineer each social network site's behavior and hope it doesn't change too often. That is until the industry smartens up and decides on some markup to convey, for example, which image form a page is considered the cardinal "share" image, and so on.
I have a site that's running WordPress.
The main page has an embedded Flash player and an imbedded iframe, and for some reason, all the configuration info from the Flash player is showing up on Google for my site, and nothing else.
How can I have the main site information show up on Google, without having that Flash player config info show up?
And can I customize what shows up at all?
If there's some way to tag the info I don't want to show up, or tag the info I want to show up, I can probably do most ofthe edits myself, I just don't know where to start...
EDIT: I tried most of the suggestions below, and I didn't get anywhere...
Any other ideas?
Thanks a lot!
If you don't want Google, or other crawler to access certain parts of your website you should use a robots.txt file. Inside you specify which parts are accessible and which aren't, when the crawlers get to your website will always look for this file for instructions.
You can check some documentation on how to do it here and here
In order to influence what text is used on the google search result try putting this within your head tags
<meta name="description" content="WHATEVER YOU WANT DISPLAYED ON GOOGLE">
Source: http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
Some more information from google on controling parts of a page. Apparently there are google off/google on tags.
http://perishablepress.com/press/2009/08/23/tell-google-to-not-index-certain-parts-of-your-page/
Hope this helps.
If you want Google to index only part of your pages, you can't follow normal SEO routines. You should provide a mechanism to understand whether the current client (requester) is a robot or not. If yes, then don't render that part. This is the only way. Otherwise, a robot either gets the whole rendered content, or doesn't have access based on robots.txt file (Robot Exclusion Protocol).
Another way (which is not really smart, and can't be guaranteed to work) is to dynamically inject your content into the page via JavaScript. Because AMAIK, robots don't run JavaScript.
As search spiders won't render javascript generated markup (JS is not run as it is client-side in the browser), a quick fix would be to don't output any of flash / markup initially in the HTML document and then use JS to add the flash stuff on load.
Note: as far as I'm aware, Google is currently testing a JS reading spider so this may not work long term.
Google is returning this data because it simply can't find any content where it normally would. Search engines require content - they're not advanced enough to process your multimedia to determine what it's all about.
Google will IGNORE your meta description if it doesn't feel that it reflects your page content (of which there is only iframes and JS)
Use SWFObject to provide alternate content for users without flash (including search engines) - ensure it's not some dinky text like "download flash here" - but a lengthy descriptive content piece about your site or media that they would normally experience if they could experience.
Use robots.txt or <meta name="robots" content="noindex,follow"> for the iframe content to prevent it from being indexed.
For the love of all things holy, please look at reducing the number of JS files and inline JS on your site (i'd recommend WP-minify since it's so obvious that you love plugins)